Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

What are OKLCH colors?

jakub.kr

Post reply on HN
Print view View original

21–30 of 189 posts

Re: What are OKLCH colors?

#21

Post by chrismorgan »

ta8645 wrote: post #19
chrismorgan wrote: post #7

The “Better Gradients” thing is dodgy. OKLCH is a polar coordinate space. Hue is angle in this space. So to interpolate hue from one angle to another, to get from one side of a circle to the other, you go round the edge. This leads to extreme examples like the one shown: linear-gradient(in oklch, #f0f, #0f0) You can also go round the circle the other way, which will take you via blue–aqua instead of via red–yellow: l…

Very interesting. Is this just a limitation of our current hardware? How much of this problem would still exist if everyone had a wider gamut monitor, say full DCI-P3? That still doesn't cover the full gamut of Oklch, but would it make the problem practically disappear?

No. We’re talking about colours way beyond the ranges of human perception.

For this specific gradient, see https://oklch.com/#0.7017,0.3225,328.36,100 and https://oklch.com/#0.86644,0.294827,142.4953,100, and look at the Chroma panel, see how far out of our screen gamuts they are (even tick “Show Rec2020”, which adds a lot of chroma around blue–green and magenta–red), and try to imagine the colours between the lime and magenta (in either direction). The red direction is probably the easier to reason about: there’s just no such colour as a light, bright red. You can have bright or light, but not both. (Its 3D view can also be useful to visualise these things: you’re building a straight-line bridge between two peaks, and there’s a chasm in between.)

Re: What are OKLCH colors?

#22

Post by seanwilson »

> It also works the other way around, where you can change the lightness value to create various color shades and there is no hue or saturation drift unlike in other color modes.

> In the example above, you can see that the OKLCH colors maintain consistent blueness across all of the shades, while in the HSL example, the lighter shades drift to purple and the darker ones muddy out towards grayish.

I see lots of automatic palette generator projects where the shades of each color are generated with OKLCH by only varying the lightness value on some chosen base color. The problem I find is if you look at popular open source palettes, the way the hand-crafted hue and saturation values vary across the shades for different hues isn't that predictable (the curve of the hue/saturation values over shades aren't straight lines or typical easing curves).

Hawking my own tool (using HSLuv with RGB for now), but you can load and compare the hue and saturation curves as they vary over shades of a color using example palettes from Tailwind 3, USWDS and IBM Carbon, plus tweak each shade to your liking:

https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvci...

So I think OKLCH is a nice starting base for palettes and a quick way to generate a color you need in CSS, but I think designers will always need to tweak the hue and saturation of each shade so it looks just right as there's no single right answer you could encode into the color space.

Re: What are OKLCH colors?

#24

Post by ta8645 »

chrismorgan wrote: post #21
ta8645 wrote: post #19

Earlier quoted context omitted.

Very interesting. Is this just a limitation of our current hardware? How much of this problem would still exist if everyone had a wider gamut monitor, say full DCI-P3? That still doesn't cover the full gamut of Oklch, but would it make the problem practically disappear?

No. We’re talking about colours way beyond the ranges of human perception. For this specific gradient, see https://oklch.com/#0.7017,0.3225,328.36,100 and https://oklch.com/#0.86644,0.294827,142.4953,100 , and look at the Chroma panel, see how far out of our screen gamuts they are (even tick “Show Rec2020”, which adds a lot of chroma around blue–green and magenta–red), and try to imagine the colours between the lime…

But once an algorithm to drag the colours back in-gamut was applied, would the lost perceptual uniformity still be a problem practically speaking, with DCI-P3 monitors?

Re: What are OKLCH colors?

#25

Post by twhb »

Great post!

Also check out oklch.com, I found it useful for building an intuition. Some stumbling blocks are that hues aren’t the same as HSL hues, and max chroma is different depending on hue and lightness. This isn’t a bug, but a reflection of human eyes and computer screens; the alternative, as in HSL, is a consistent max but inconsistent meaning.

Another very cool thing about CSS’s OKLCH is it’s a formula, so you can write things like oklch(from var(--accent) calc(l + .1) c h). Do note, though, that you’ll need either some color theory or fiddling to figure out your formulas, my programmer’s intuition told me lies like “a shadow is just a lightness change, not a hue change”.

Also, OKLCH gradients aren’t objectively best, they’re consistently colorful. When used with similar hues, not like the article’s example, they can look very nice, but it’s not realistic; if your goal is how light mixes, then you actually want XYZ. More: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value....

Also, fun fact: the “ok” is actually just the word “ok”. The implication being that LCH was not OK, it had some bugs.

Re: What are OKLCH colors?

#26

Post by chrismorgan »

ta8645 wrote: post #24
chrismorgan wrote: post #21

Earlier quoted context omitted.

No. We’re talking about colours way beyond the ranges of human perception. For this specific gradient, see https://oklch.com/#0.7017,0.3225,328.36,100 and https://oklch.com/#0.86644,0.294827,142.4953,100 , and look at the Chroma panel, see how far out of our screen gamuts they are (even tick “Show Rec2020”, which adds a lot of chroma around blue–green and magenta–red), and try to imagine the colours between the lime…

But once an algorithm to drag the colours back in-gamut was applied, would the lost perceptual uniformity still be a problem practically speaking, with DCI-P3 monitors?

Yes. I repeat: these colours are way outside gamut. Not just a little bit. P3 helps a little bit, Rec.2020 would help a fair bit more, but you’re still asking for a yellow that is about twice as vibrant as is possible.

Re: What are OKLCH colors?

#28

Post by boronine »

seanwilson wrote: post #22

> It also works the other way around, where you can change the lightness value to create various color shades and there is no hue or saturation drift unlike in other color modes. > In the example above, you can see that the OKLCH colors maintain consistent blueness across all of the shades, while in the HSL example, the lighter shades drift to purple and the darker ones muddy out towards grayish. I see lots of automa…

Wow, this might be the best use of HSLuv so far, I'm going to add it to the examples page https://www.hsluv.org/examples/

Re: What are OKLCH colors?

#29

Post by Vingdoloras »

chrismorgan wrote: post #7

The “Better Gradients” thing is dodgy. OKLCH is a polar coordinate space. Hue is angle in this space. So to interpolate hue from one angle to another, to get from one side of a circle to the other, you go round the edge. This leads to extreme examples like the one shown: linear-gradient(in oklch, #f0f, #0f0) You can also go round the circle the other way, which will take you via blue–aqua instead of via red–yellow: l…

For anyone else copy pasting the gradients into dev tools to look at them: The second one is missing the # sign on the first color.

And yes, both oklch gradients look pretty weird while the oklab gradient looks nice (if you can accept it going through grey).

Re: What are OKLCH colors?

#30

Post by chrismorgan »

Vingdoloras wrote: post #29
chrismorgan wrote: post #7

The “Better Gradients” thing is dodgy. OKLCH is a polar coordinate space. Hue is angle in this space. So to interpolate hue from one angle to another, to get from one side of a circle to the other, you go round the edge. This leads to extreme examples like the one shown: linear-gradient(in oklch, #f0f, #0f0) You can also go round the circle the other way, which will take you via blue–aqua instead of via red–yellow: l…

For anyone else copy pasting the gradients into dev tools to look at them: The second one is missing the # sign on the first color. And yes, both oklch gradients look pretty weird while the oklab gradient looks nice (if you can accept it going through grey).

Sorry, fixed.
Post reply on HN