HSL, RGB or Hex code are the normal ways of adding colors in css. But this way of representing color has some limitations and few abnormalities when it comes to human perception.
oklch is a newer color model that is designed to be perceptually uniform. It's more accurate in terms of how humans perceive color.
It solves accessibility issues like yellows appearing very bright and blues appearing dark, even though the lightness of the colors are set similar.
oklch can display color gamut beyond the sRGB limit and show display-P3 colors which hsl or rgb or hex can't represent. It can represent even beyond display-P3 colors, even if there's no display invented yet to show it physically. Hence this is a future proof color format.
Almost every modern browsers support oklch color format. Most modern smartphone displays, OLED monitors, mackbooks support the diplay of these colors (upto display-P3 colors) (just 100%s sRGB monitors won't be capable of displaying these colors accurately)
hsl(270, 80%, 60%)
<< this is how Hue (0-360), Saturation(0-100%), Lightness(0-100%) is represented.
rgb(20, 30 , 255) & #08B74F << RGB and HEX is represented by the amount of Red,Green and Blue in a color.
oklch is represented as Lightness(0-1), Chroma(0~0.4), Hue(0-360)
oklch(0.7, 0.3, 220)
Lightness - Controls color brightness. Measured in values between 0 and 1 or percentage ranging from 0% to 100%.
Chroma - Controls intensity of the color, similar to saturation.
Hue - Controls the hue, measured in degrees ranging from 0 to 360.
oklch is a better version with some fixes over lch format.
This talk will explain
why OKLCH is better by showing practical examples,
a bit of science behind the displays and why it causes color inconsistencies in HSL and RGB formats,
how to use OKLCH and what are the limitations
This topic was previously presented at ChennaiFOSS 2026, This proposed version will go a little more deeper on the “why is HSL causing problems” part
