CSS oklch() color function – DEV Community

I love colors so I can’t help but be obsessed with oklch() color function in CSS. Admittedly, oklch can look daunting at first if you’re used to more common color notations such as hex code (#f4f4f1) or rgb.

But now that oklch() is part of the Baseline 2023 CSS features (which means that it works across the latest devices and browser versions but might not work in older devices or browsers) we would probably start seeing it used more frequently.

Tailwind is defining their color palettes with oklch(). As an example, the pink palette is defined like this:

--color-pink-50: oklch(0.971 0.014 343.198);
--color-pink-100: oklch(0.948 0.028 342.258);
--color-pink-200: oklch(0.899 0.061 343.231);
--color-pink-300: oklch(0.823 0.12 346.018);
--color-pink-400: oklch(0.718 0.202 349.761);
--color-pink-500: oklch(0.656 0.241 354.308);
--color-pink-600: oklch(0.592 0.249 0.584);
--color-pink-700: oklch(0.525 0.223 3.958);  
--color-pink-800: oklch(0.459 0.187 3.815);  
--color-pink-900: oklch(0.408 0.153 2.432);  
--color-pink-950: oklch(0.284 0.109 3.907);