How to use the oklch color converter
- Type a color as a hex code, rgb(), hsl(), oklab(), oklch() or color(srgb-linear ...).
- Read the headline, which is the color in OKLCH, and the gamut line, which says whether sRGB screens can show it.
- Use the table to copy the same color in hex, RGB, HSL, linear RGB, OKLab and OKLCH.
- If the color is outside sRGB, use the fitted row: the same lightness and hue with the chroma lowered until it fits.
Formula
linear = ((c + 0.055) / 1.055)^2.4 for each sRGB channel above 0.04045, else c / 12.92
(l, m, s) = matrix x linear RGB, then each cube-rooted
(L, a, b) = second matrix x (l, m, s)
C = sqrt(a^2 + b^2) and H = atan2(b, a) in degrees
The matrices are the published OKLab ones. L runs from 0 for black to 1 for white. A color is outside sRGB when any linear channel is below 0 or above 1.
The sRGB primaries and a brand green
Pure sRGB red, rgb(255 0 0), is oklch(62.8% 0.2577 29.23). Pure green is oklch(86.64% 0.2948 142.5) and pure blue is oklch(45.2% 0.3132 264.05). White converts to oklch(100% 0 0), with lightness exactly 1. These match the values published with OKLab.
The green #25A86B has OKLab lightness 64.87% and converts to oklch(64.87% 0.1427 157.27), also written oklab(64.87% -0.1316 0.0552). The color oklch(70% 0.3 150) is outside sRGB, because a green with that much chroma needs a red value below zero. The fitted version keeps 70% lightness and hue 150 but lowers the chroma until it fits.
Why OKLCH
In HSL, colors of the same lightness number can look much lighter or darker than each other: pure yellow looks bright and pure blue looks dark at the same L. OKLCH is built so that equal steps in lightness look about equal, and hue and chroma stay more independent. That makes it easier to build palettes with steady contrast and to adjust one property without disturbing the others.
CSS supports the oklch() and oklab() functions in current browsers. Write the lightness as a percentage or a number from 0 to 1, chroma as a number around 0 to 0.4 and hue in degrees.
Gamut and what to do about it
Many OKLCH colors, especially with high chroma, are outside the sRGB range. Wide-gamut screens can show some of them, but sRGB screens cannot, and the browser maps the color in its own way. The page shows both a clipped hex and a version with the chroma lowered, so you can see the difference. For picking colors, see the Color Picker. To check text contrast, use the Color Contrast Checker, to blend colors the Color Mixer, and to build a set the Color Palette Generator.
Assumptions and limits
- Colors are read in sRGB with the standard transfer curve, and alpha is ignored.
- Hex input can have 3, 4, 6 or 8 digits. rgb() and hsl() accept commas or spaces and percentages.
- Hue is measured in degrees. Hue is not meaningful for gray, so it is shown as 0 when chroma is almost zero.
- Fitting to sRGB is done by lowering chroma only. Other gamut mapping methods may give a slightly different result.
Frequently asked questions
What do L, C and H stand for?
L is lightness, C is chroma (how colorful), and H is hue as an angle in degrees. OKLCH is the polar form of OKLab, where a and b are the green-red and blue-yellow axes.
Why does a color say it is outside sRGB?
At least one of its red, green or blue values would need to be below zero or above one in linear light. A normal sRGB screen cannot produce that, so the page shows the nearest it can.
Is OKLCH the same as LCH in CSS?
No. CSS also has lch() and lab(), which are based on CIELAB and behave differently, especially for blues. This page converts the OK versions, which are more even to the eye.
Can I use the output in CSS?
Yes. The OKLCH, OKLab and linear forms are written as CSS color functions, and the hex, rgb and hsl forms work everywhere. Check your browser support if you need to support old versions.