OKLCH color converter for shadcn/ui

Convert hex, HSL and RGB colors to OKLCH, and back, for Tailwind v4 and shadcn/ui. Convert one color or a whole list of CSS variables at once.

OKLCHoklch(0.6231 0.188 259.81)

Hex#3b82f6

RGBrgb(59, 130, 246)

HSLhsl(217.22, 91.22%, 59.8%)

Tailwind v3 channels217.2 91.2% 59.8%

CSS variable--primary: oklch(0.6231 0.188 259.81);

How it works

1
Enter any CSS color, such as #3b82f6, rgb(59 130 246), hsl(217 91% 60%), oklch(0.62 0.19 260) or a bare v3 channel like 217 91% 60%.
2
Copy it in whichever format you need, including a ready-to-paste CSS variable.
3
Switch to batch mode to convert a whole block of --variable: value; lines in one go.

FAQ

Why does Tailwind v4 use OKLCH?

OKLCH is perceptually uniform: equal lightness values look equally light, so palettes and shades are easier to build and contrast is easier to predict. Read the OKLCH guide for details.

What do the three OKLCH numbers mean?

Lightness from 0 to 1, chroma (colorfulness, roughly 0 to 0.37) and hue as an angle from 0 to 360.

More tools

Theme switcher builder

Pick several shadcn/ui themes and install them all at once, with a ready-made theme picker, a hook and a no-flash script, using a single shadcn CLI command.

Tailwind v3 → v4 theme converter

Paste a Tailwind v3 shadcn/ui globals.css with HSL variables and get Tailwind v4 CSS with OKLCH colors, @theme inline mappings and chart and sidebar tokens.

Theme contrast checker

Check every text color in a shadcn/ui theme against WCAG 2 contrast in light and dark mode, then fix failing pairs automatically while keeping your theme's colors.

Image to theme

Upload a logo, screenshot or photo and get a complete shadcn/ui theme built from its colors, with accessible light and dark palettes, ready to export.

Compare themes

Preview two shadcn/ui themes next to each other on the same components, in light or dark mode, and see exactly which tokens differ.

Color scale generator

Generate a Tailwind-style 50–950 color scale in OKLCH from any brand color, and copy it as Tailwind v4 @theme variables for use alongside your shadcn/ui theme.