Skip to content
Modern CSS color

Convert HEX to OKLCH, and OKLCH back to HEX

Paste a color in HEX, RGB, HSL, OKLCH or OKLab and get every other format, already written the way CSS wants it: oklch(62.8% 0.2577 29.23). If the OKLCH color does not exist on common (sRGB) screens you are told, instead of having it silently rounded. Runs in your browser.

Published on · Updated on · by

Picker and palette

OKLCH palette

Color formats

WCAG 2.1 contrast checker

Aa Aa large
Contrast ratio

UI preview

Sample heading

This paragraph uses the selected color as background and the chosen foreground. Verify the text is readable at a glance.

How to convert a color to OKLCH

  1. 1

    Paste the color

    Type or paste the value into the field of its format: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34) or oklab(0.68 0.17 0.12). The other fields update at once.

  2. 2

    Copy the CSS form

    Every field has a Copy button: the value is already in CSS Color 4 syntax, ready for a stylesheet or a design token.

  3. 3

    Watch the gamut warning

    If the OKLCH color is more saturated than sRGB allows, a warning appears below the formats: HEX, RGB and HSL show an approximation, not the same color.

  4. 4

    Build a scale

    The palette keeps chroma and hue fixed and changes only lightness, giving you a consistent tonal scale for design system colors.

Why convert colors to OKLCH

OKLCH describes a color with three numbers that track how the eye sees it: L is perceived lightness, C is chroma (how saturated it is), H is hue in degrees. It is the polar form of OKLab, the color space Björn Ottosson published in 2020 and that CSS Color 4 adopted. Every major browser now reads it natively through oklch() and oklab().

The gain over HSL is concrete. In HSL a yellow and a blue with the same L look very light and quite dark, because that L is geometric, not perceptual. In OKLCH two colors with the same L really look equally light. That is why design systems use OKLCH for tonal scales and for light and dark themes: change one number and you know what will happen.

Dedicated converters online do one job well. Here OKLCH and OKLab sit next to HEX, RGB, HSL and Lab in the same panel, with a WCAG contrast check on the same color: convert, confirm the text stays readable and copy the value without switching tools.

OKLCH, OKLab and the sRGB gamut

OKLab and OKLCH are the same space. OKLab uses Cartesian coordinates: L for lightness, a for the green-red axis, b for the blue-yellow axis. OKLCH holds the same information in polar form: chroma is the distance from gray and hue is the angle. Going from one to the other is trigonometry, with no loss.

Why an OKLCH color may have no HEX. HEX, RGB and HSL describe colors inside sRGB, the space of common monitors. OKLCH can describe far more saturated colors that exist only on wide-gamut screens such as the P3 displays of recent iPhones and Macs. Convert one of those to HEX and the result cannot be identical: you get an sRGB approximation. Most converters do that without telling you; this page shows a warning and leaves the OKLCH value you typed untouched, so the choice stays yours.

Writing it in CSS. The syntax is oklch(L C H), with lightness as a percentage or between 0 and 1, chroma as a number (usually between 0 and 0.4) and hue in degrees; add transparency after a slash: oklch(62.8% 0.2577 29.23 / 0.5). For very old browsers, declare the color in HEX first and the same color in oklch() right after it: browsers that do not understand the second line use the first.

Glossary

Technical terms used on this page, briefly explained.

sRGB #
Standard color space of the web defined in IEC 61966-2-1 (1999). Gamut: ~35% of visible colors. Default for every consumer monitor up to 2018.
OKLCH #
Polar color space (Lightness, Chroma, Hue) based on OKLab. Bjorn Ottosson, 2020. Standardized in CSS Color Level 4. Perceptually uniform.
CIE Lab 1976 #
L*a*b* color space from the Commission Internationale de l'Eclairage. Historic attempt at perceptual uniformity, but with known errors at high chroma (blue, purple). Useful for backward compatibility, OKLCH is superior.
WCAG contrast ratio #
Formula (L1+0.05)/(L2+0.05) with L1, L2 sRGB relative luminance. Range 1:1 (identical) to 21:1 (black on white). WCAG 2.1 thresholds: 3:1 large AA, 4.5:1 normal AA, 7:1 normal AAA.
Gamut #
The set of colors representable in a color space. sRGB ~35% of visible, Display P3 ~45%, Rec.2020 ~75%. OKLCH is gamut-agnostic: it represents any color if the display can show it.
Hue stability #
Property of a color space: changing L preserves the perceived hue. HSL has no hue stability (light blue shifts toward purple). OKLCH does.

OKLCH questions

How do I convert HEX to OKLCH?
Paste the HEX value into the HEX field: the OKLCH field shows the conversion at once, for example #ff0000 becomes oklch(62.8% 0.2577 29.23). The Copy button puts the value on your clipboard in CSS syntax.
And OKLCH back to HEX?
Type the color into the OKLCH field, with or without the oklch() function: HEX, RGB and HSL update. If the color is outside the sRGB gamut a warning appears, because the HEX shown is an approximation rather than the exact color.
What is the difference between OKLCH and OKLab?
They are the same color space written two ways. OKLab uses L, a and b coordinates; OKLCH turns them into lightness, chroma and hue, which are easier to edit by hand. The page shows both.
Do browsers support oklch()?
Yes, every major browser has read oklch() and oklab() for several versions. If you must support very old browsers, declare the same color in HEX first: browsers that do not understand oklch() fall back to the previous line.
Why is my OKLCH color out of gamut?
Because it is more saturated than an sRGB monitor can show. It happens often with high chroma, above roughly 0.2 to 0.3 depending on the hue. A P3 screen can display it; in HEX you get an sRGB approximation.
What values can chroma take?
From 0, which is gray, upward. In practice colors visible on a screen stay below 0.4, and inside sRGB the limit depends on hue and lightness: a blue reaches higher chroma than a light yellow.
Should lightness be a percentage or between 0 and 1?
Both are valid CSS: oklch(62.8% 0.25 29) and oklch(0.628 0.25 29) are the same color. The page accepts both and returns the percentage.
Is OKLCH useful for WCAG contrast?
It helps build tonal scales with even lightness steps, but WCAG 2.1 contrast is computed on sRGB luminance. That is why the page shows the contrast ratio next to the conversion: you check it on the color you will actually ship.
Can I convert transparency too?
Yes. Set alpha with the slider: it appears in the HEX8 value and in the CSS form with a slash, such as oklch(62.8% 0.2577 29.23 / 0.5).
Are the colors I enter sent anywhere?
No. Every conversion is a formula computed in your browser; once loaded, the page works offline too.

Who builds these tools?

Maurizio Fonte, senior IT consultant with 20+ years in PHP, Laravel, unmanaged Linux infrastructure, applied cybersecurity and AI/LLM integration. Production backends, legacy code modernization, security audits, custom AI agents and MCP servers: the work behind every tool published here.

About Maurizio Fonte