Discover oklch(), a modern CSS color notation that models color the way humans perceive it and learn when to use it over RGB.

Atomic Object is a software consultancy specializing in custom software development and product design. Readers can learn about software development methodologies, user-centered design principles, and agile practices. With case studies, blog posts, and technical insights, Atomic Object provides  guidance and expertise for building innovative and user-friendly software products.

Atomic Spin

oklch() is a CSS color function based on the Oklab perceptual color space, modeling lightness, chroma, and hue to match human vision. Unlike RGB, adjusting brightness in oklch requires changing only one value (L), making color manipulation more predictable and accessible. It supports a wider color gamut including Display-P3 colors, though it has limitations with gradients due to its polar hue dimension. It's backwards compatible in modern browsers for sRGB displays and is positioned as a useful tool for designers and UI engineers rather than an immediate replacement for RGB.

oklch() in CSS: A Modern Approach to Color

I was just studying this a couple hours ago and it looks definitely like something we as Web Developers should try and adopt. what do you think?

this is another great one
i hope i can find a partner whereby whe build websites together
ready to join me

The article lacks explaining how the function works. An example would be nice. I wouldn’t even now how to display the color red or blue. It sounds something that should make contrasts more intuitive, but is it? Best notations are allways human readable.

<a href="https://app.daily.dev/gresakg" data-mention-id="Z0Y5lKjimjGDZtplRmL1r" data-mention-username="gresakg" translate="no">@gresakg</a>
I’m not entirely convinced that when it comes to web colors, the best notations are always human readable. That’s what variables are for. Sure, hex code is more familiar at this point, but I’m not sure there’s anything inherently more readable about it except familiarity. That aside, most colors in a design aren’t arbitrarily ‘red’ or ‘blue’ anyway. It needs to match the clients logo, brand, etc.
It’s better to think of oklch() as a better starting point for the color. It can take a color like #b71c37 and make it oklch(0.5044 0.1866 19). On the surface, this looks worse, until you think of it as the ‘starting point’.
You want to adjust the lightness? Bring the first number up or down.
The Chroma? (think of it as saturation), adjust the second number.
Messing with the 3rd number is the Hue, which on the surface feels dumb to play with, but it’s an almost magical way of finding complimentary colors that ‘mesh’ well. Mess solely with the 3rd number and feel how almost every color ‘matches’ that first color better. None of these things can be done in hex because the levers just aren’t the same.