Two Things That are Not Great About OKLCH

I’m still a fan of the OKLCH color model and CSS function. But there are a couple of things that are confusing or weak about it, and it’s probably fair to point those out clearly.

Well, I know that 68% is the Lightness, 0.25 is the Chroma (sorta like saturation), and 150 is the Hue. Hue, like many of these color models, goes from 0 to 360. Increasing the Hue from the 140 where it’s at which is in Green-land should push it into Blue-land, then Purple-land, and Pink-land, then Red-land as it approaches 360.

If I just push that 150 Hue to 152… dead. I have now left the P3 color space and the color is totally invalid and will render as nothing. In fact, from 152 all the way to 310 is nothing, and at 311 it’s able to be a color again at a fairly normal-looking purple.

Those big empty gaps in the color space? That’s intentional! That’s part of the design of the color space. It’s like that because it actually solves some problems, like uniform brightness. But it causes others, like quite a few number combinations being invalid.

Leave a Comment