OKLCH color converter
Paste a color in any format, such as #ff0000, rgb(), hsl(), oklch(), oklab(), lch() or lab(). You get every other format, ready to copy, and a note when the color is outside the sRGB gamut.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Type or paste a color, or use the color picker.
- Read the same color in HEX, RGB, HSL, OKLCH, OKLab, LCH and Lab.
- Press Copy next to the format you need.
How the conversion works
sRGB values are linearised, turned into cone responses with the OKLab matrices and a cube root, and then into lightness L and two opponent axes a and b. OKLCH writes the same point in polar form: C = √(a² + b²) and h = atan2(b, a).
CIE Lab goes through CIE XYZ. The sRGB primaries are D65-based, so the colour is adapted to the D50 white point with the Bradford transform that CSS Color 4 specifies, and then converted to Lab.
Example
#ff0000 is oklch(62.8% 0.258 29.2), oklab(0.628 0.225 0.126), lab(54.29 80.8 69.89) and lch(54.29 106.84 40.86).
Tips
- OKLCH lightness is 0–100% in this tool; CSS also accepts 0–1.
- For greys the hue is meaningless, so it shows as 0.
- Use OKLCH to build palettes: keep
L and C fixed and rotate h to get colors of the same weight.
Frequently asked questions
What is OKLCH?
OKLCH is the polar form of OKLab, a color space by Björn Ottosson. L is perceived lightness, C is chroma (colorfulness) and h is the hue angle in degrees. Equal steps in L look like roughly equal steps in lightness, which HSL does not give you.
How is LCH different from OKLCH?
CSS lch() and lab() use CIE Lab with a D50 white point. oklch() and oklab() use the newer OKLab space, which has a more even hue and lightness. Both are in CSS Color Level 4, but their numbers are not interchangeable.
What does "outside the sRGB gamut" mean?
Some OKLCH, LCH or Lab values describe colors that a standard sRGB screen cannot show, for example oklch(70% 0.4 150). This tool clips each channel to the sRGB range, so the HEX value is the nearest displayable color, not an exact match.
Does this tool send my colors anywhere?
No. All conversions are calculated in your browser.
How accurate are the numbers?
They follow the formulas and matrices published in CSS Color Level 4 and by Björn Ottosson, in double precision, and are rounded for display: OKLCH to 3 decimals for chroma, Lab and LCH to 2.