Oklch in CSS: why we moved from RGB and HSL (2024)

This really is one of the best color pickers I have ever come across. It breaks out the relevant axes such that is is really easy to understand what they mean and also how the color space bumps up against the limitations of an sRGB calibrated monitor.

By the way, if the authors see this discussion: As an alternative to the 3D view and/or the rectangular hue/chroma view could you add a constant-value slice through the color space that shows hue/chroma in polar coordinates, with gray at the center? That view is quite helpful context, especially for viewers who are new to the topic.

Wow, that is honestly nothing short of superb, the 3D is a nice touch.

I own a monitor color calibration tool and my Apple devices have fairly been well calibrated out of the box.

And even if your users may not use color calibrated monitors, you’re still better off picking the correct color on a calibrated monitor rather than doubling up on the error.

Also, none of this is new. Even if you used #aabbcc color codes, you were implicitly choosing the sRGB colorspace even if you had no idea about colorspaces. There isn’t a solution that gets rid of colorspaces… it’s like suggesting that it’s possible to specify length without a unit like meters or inches. The colorspace is the unit.

Consumer displays can do quite a good job matching colors if either (a) they have been characterized (either by a color measurement device or by eye by a careful human observer with normal color vision) and the OS is set up to do proper color management using the resulting profile, or (b) the company producing them buys consistent parts and does careful Q/C. If you get a recent model iPhone, as an example, you are likely to get very close to the same output as every other iPhone, assuming you are in similar lighting conditions.

Of course, human vision is quite sophisticated at adapting to various conditions, so the colors will not be precisely perceptually matching unless the observations take place in a standard setting. If one observer is sitting under a fluorescent bulb, another is in a dark room, and a third is sitting outside on a sunny day, all bets are off. There's also nontrivial inter-observer variation, even among people with normal color vision.

> I don't know about you, but I am much better at decoding separate RGB values (as in, including hex) than I am at decoding a single chroma value.

I can do it, but RGB and HEX are awful for me. A lot of mental work must be done to get to decimal/hex colors:

1. Memorize what happens when you mix combinations of RGB.

2. Learn/internalize hex

3. Mentally map how each color might roughly look in both decimal and hex.

All of that can be learned of course, but that's a lot of work compared to memorizing four numeric waypoints for hues (Red, Yellow, Blue, Green) to start. The rest was super easy for me once I knew that Chroma is how much color you're putting in (0=gray). By the way, you mentioned Chroma earlier. Did you mean Hue instead?

The beauty of OKLCH is that you don't absolutely have to know Hue cold to work with colors and create variations. You can pick your primary, secondary, etc. colors. Then set the Chroma (which probably remains the same throughout your palette) and Hue to CSS variables. Then forget about their real values and just use the variables. To get a color palette, adjust with the brightness to develop as many levels of a color as needed. Then, take that color and copy/paste for however many colors you have in your palette, replacing the hue with a different variable for each color. All the colors will have the same perceived brightness at a given level of lightness, which is a huge win that isn't easily achieved in other color systems like RGB.

Obviously you need to get some practice to learn what the numbers mean, but because they are related to human visual perception rather than to the physical details of the display device, they are much easier to learn than RGB coordinates. You should give it a shot; you should be able to get the basic idea with just a few minutes of effort, and if you try working with these seriously for a few days you'll be set.

Yeah, that's a bit of a hot take from the author. I'd say it's equally as readable as RGB. They're both arbitrary values that you need to spend time with to get a feel for.

There's no single "CMYK". Every 4-color printer is a bit different. In general I don't think you should use CMYK for anything except the final stage of image editing after you have already chosen the printer, paper, and inks, and need to do precise tweaks to get exactly the colors you intended. CMYK is entirely inappropriate for anything related to the web.

> List doesn't include "the same color should look the same on all renderers/browsers".

No browser supports CMYK, and using an RGB color space (browsers in popular use support two) doesn't solve this problem, even setting aside that some browsers support color management by default and some don't.

When I worked in design we used to have a big book of color swatches for CMYK (and pantone). Your screen was always lying to you, even if you calibrated it. Plus colors looked different on coated / uncoated paper.

The benefit of OKLCH is that it normalizes the colors to our perception. So a saturation % change in OKLCH is more of what we'd expect than in HSL. This is good for design systems that want to have a visually expected output after running it through a color function.

See the part on https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg... and notice the cut out in the right column. Now pretend to stretch those cutouts to fit the edges of the chart, you'll have a color gradient that is more uniform across the board versus the left where you have darker areas.

The advantage of OKLCH is not that it produces better colors, it's that you can vary a color reliably.

They sold HSL to us as a way to vary the hue easily in a way that's not possible with #000000 without manually computing it first. The reality is that the hue parameter in HSL also considerably changes the luminosity of the color.

The tool you linked only demonstrates that OKLCH can also display colors that rgb() can't, but most of them are the same.

There are cases of perceivable differences though like https://oklch.com/#70.29,0.2413,41.29,100 .

The gamut is much wider

seriously reminds me of https://xkcd.com/927/

if im doing color-anything, i do enjoy manipulating the raw colors over any integer representation of them, then sending whatever code i need back to whatever.

im more irk'd at the main linked page, shows up nice and dark background, then scroll down a hair and its back to staring at the day-star, ie white background and eye killer. why oh why? ha, if i scroll up and down fast enough its like a strobe light. weeeee. and there was another HN page related to oklch themes yesterday that did the same thing; making me improperly biased already.

please folks, dont make a mess of my dark mode