HEX to OKLCH Converter
Convert HEX, RGB or HSL colours to oklch() for modern CSS and Tailwind CSS v4, one at a time or a whole stylesheet at once.
Paste #hex (3, 6 or 8 digits), rgb(), hsl() or a colour name like teal.
OKLCH and other formats
oklch(62.3% 0.188 259.815)oklab(62.3% -0.033 -0.185)#3b82f6rgb(59 130 246)hsl(217.2 91.2% 59.8%)CSS with a fallback
color: #3b82f6; color: oklch(62.3% 0.188 259.815);
Browsers that do not understand oklch() ignore the second line and keep the HEX colour.
Convert every colour in a stylesheet to OKLCH
Paste CSS, a theme file or a list of colours. Each HEX, rgb() and hsl() value is replaced with oklch(); everything else is left as it is.
Related Developer Tools
This HEX to OKLCH converter gives you the oklch() value of any HEX, RGB or HSL colour, along with OKLab. OKLCH is the colour format Tailwind CSS v4 uses for its whole palette, and it is supported by every current browser. Moving a brand colour or an old theme to OKLCH makes lighter and darker shades, hover states and dark-mode colours far easier to get right, because its lightness number matches what the eye sees.
How to Use It
- Enter a colour as HEX (
#3b82f6,#38f,#3b82f680),rgb(),hsl()or a name, or use the colour picker. - Choose the decimals. Short matches how Tailwind writes its colours; Precise keeps more digits.
- Copy the oklch() value, or the two-line CSS that keeps the HEX as a fallback.
HSL Lightness vs OKLCH Lightness
The main reason to switch is that HSL lightness does not match how bright a colour looks. Pure colours all have 50% lightness in HSL:
| Colour | HEX | HSL | OKLCH |
|---|---|---|---|
| Yellow | #ffff00 | hsl(60 100% 50%) | oklch(96.8% 0.211 109.769) |
| Green | #00ff00 | hsl(120 100% 50%) | oklch(86.6% 0.295 142.495) |
| Red | #ff0000 | hsl(0 100% 50%) | oklch(62.8% 0.258 29.234) |
| Blue | #0000ff | hsl(240 100% 50%) | oklch(45.2% 0.313 264.052) |
OKLCH puts them where they look: yellow near white, blue much darker. In practice this means two OKLCH colours with the same L have similar contrast against a white or black background, so swapping the hue of a button does not make its text unreadable.
What You Can Do Once a Colour Is in OKLCH
- Shades. Lower L for a darker shade and raise it for a lighter one, keeping C and H. The Tailwind palette generator does this for all eleven steps from 50 to 950.
- Hover and active states with CSS relative colours:
oklch(from var(--brand) calc(l - 0.08) c h)gives a slightly darker version of any brand colour. - Consistent sets of colours. Keep L and C fixed and change only H to get colours for charts or tags that look equally strong.
- Vivid colours on new screens. OKLCH can go beyond sRGB, up to Display P3 and further. When you need the HEX of such a colour, use the OKLCH to HEX converter, which gamut-maps it.
Moving an Existing Theme to OKLCH
Paste a CSS file, a list of custom properties or a Tailwind v3 colour config into the stylesheet converter below the tool. Each HEX, rgb() and hsl() value is rewritten as oklch(), and variable names and comments stay as they are. The colours look exactly the same afterwards; only the notation changes. Re-check text colours with the contrast checker after you start adjusting them.
Frequently Asked Questions
How do I convert a HEX colour to OKLCH?
Type or paste the HEX code, such as #3b82f6, or pick a colour. The oklch() value appears straight away, here oklch(62.3% 0.188 259.815), ready to copy into your CSS.
Can I convert RGB or HSL to OKLCH?
Yes. The box accepts rgb(59 130 246), rgba(59, 130, 246, 0.5), hsl(217 91% 60%) and colour names like teal, as well as HEX with 3, 4, 6 or 8 digits.
Why use OKLCH instead of HEX or HSL?
OKLCH lightness matches how bright a colour looks. In HSL, yellow #ffff00 and blue #0000ff both have 50% lightness, yet the yellow looks far brighter; in OKLCH they are 96.8% and 45.2%. That makes it easy to build shades, hover states and dark themes by changing one number.
Does converting HEX to OKLCH change the colour?
No. Every HEX colour has an exact OKLCH equivalent, so nothing is lost. The short format rounds to Tailwind's precision (one decimal for lightness, three for chroma and hue), which is far finer than a screen can show; choose Precise for more decimals.
Why does the hue look random for greys?
Greys, black and white have zero chroma, so they have no hue. CSS writes the hue as 0 in that case, as Tailwind does with oklch(98.5% 0 0).
How do I convert a whole palette to OKLCH?
Paste the CSS or theme file into the stylesheet converter below the tool. Every HEX, rgb() and hsl() value is replaced with oklch() and everything else is left unchanged.
Is my data uploaded?
No. The conversion runs in your browser.