How to Convert RGB to OKLCH
Converting RGB to OKLCH is the best way to modernize your CSS colors. OKLCH takes the flawless perceptual math of OKLab and formats it into a cylindrical model (Lightness, Chroma, Hue) that is extremely easy for developers and designers to use.
The Power of OKLCH
OKLCH is rapidly becoming the standard for modern web design for several reasons:
- Perceptual Uniformity: The Lightness channel is perfectly accurate. A yellow and a blue with an OKLCH lightness of
0.7will look equally bright to the human eye. - Wide Gamut Support: RGB is limited to the sRGB color space. OKLCH can describe any color the human eye can see, including the ultra-vibrant colors available on modern P3 displays.
- Flawless Gradients: Because it is based on OKLab, gradients and color mixing done in OKLCH do not suffer from the muddy "hue shifts" that plague RGB and HSL.
The Conversion Pipeline
To convert RGB to OKLCH, the color must pass through a complex mathematical pipeline. The RGB values are linearized and transformed into OKLab space using LMS cone response matrices. Once the color is in OKLab, the a and b coordinates are converted into Chroma and Hue using trigonometry, resulting in the final OKLCH values.