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

131–140 of 189 posts

Re: What are OKLCH colors?

#131

Post by throwaway0123_5 »

fidotron wrote: post #59

> 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. There is a very clear shift towards green in the OKLCH lightness value change example, enormously more so than any purple vibe in the HSL example. Clearly being able to select colours of the same per…

I don't know much about the science of colors and I imagine this is going to be very subjective but I would at "worst" describe the rightmost OKLCH color as blue-green (but probably just "light blue"). Meanwhile the two rightmost HSL colors I would not describe as blue at all. Second from right I would call "light purple" and the rightmost honestly looks grey to me (which is weird because the caption says the darker HSL values "muddy out towards greyish" but the leftmost values for OKLCH and HSL both look pretty blue to me).

Also if I use the macOS app "Digital Color Meter" I get essentially the same green value for the rightmost OKLCH and HSL colors (226 and 227 for "display native values" and 228 and 227 for sRGB).

Re: What are OKLCH colors?

#132

Post by ucarion »

FuriouslyAdrift wrote: post #100
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…

We already have CIE LAB as a standard that does the same thing... https://en.wikipedia.org/wiki/CIELAB_color_space [EDIT] Ahh.. The W3C has already looked at this. https://www.w3.org/Graphics/Color/Workshop/slides/talk/lille...

For others, I'm sure parent knows: OKLCH is largely a bugfix for CILEAB. Both try to make a color space where even steps feel evenly spaced to a human. But CIELAB had procedural flaws in its creation.

See slide 19: https://www.w3.org/Graphics/Color/Workshop/slides/talk/lille... -- if you ask CIELAB to make "pure blue" (RGB 0 0 100%) become grayscale, the intermediate colors become purple to the human eye. The entire point of a perceptual color space is that that doesn't happen. OKLCH fixes that.

BTW, credit to Björn Ottosson, who basically side-projected a color space into the web standards and more: https://bottosson.github.io/posts/oklab/ ... folks like him are why we sometimes have nice things!

Re: What are OKLCH colors?

#133

Post by [deleted] »

the_af wrote: post #121
layer8 wrote: post #97

Earlier quoted context omitted.

Think of fashion, of smartphone colors, pen and pencil colors and the like. Gray, white, black, are just color choices among all the available colors. A gray T-shirt isn’t a desaturated colored T-shirt. It’s its own color.

Oh, I understand what you say. But in color spaces, isn't gray the "sink" towards which desaturated colors shift? This would make it a location to avoid (unless you're purposefully desaturating).

[deleted]

Re: What are OKLCH colors?

#134

Post by chrismorgan »

jakubkrehel wrote: post #81
chrismorgan wrote: post #43

Earlier quoted context omitted.

It’s just completely wrong. The first uses oklch(0.65 0.20 300), comfortably inside sRGB, not even at the boundary. The second uses oklch(0.65 0.28 300), which is well outside P3 and even Rec.2020. The smallest fix would be to make the second one oklch(0.65 0.2399 300) to bring it inside P3 so the demo doesn’t get slightly warped if Rec.2020-capable (not really necessary, but preferable, I’d say), and the first #a95e…

This should be fixed now as well!

Good, much improved.

One last thing:

> This way the browser uses OKLCH colors if they are supported, otherwise it falls back to sRGB.

This wording suggests it’s about gamuts, but it’s actually about syntax. It will use the oklch() if that syntax is supported, and then the OKLCH value may be within sRGB or may be in another gamut the screen is using or may need to be mapped back to the screen’s gamut. Whereas #rgb values are inherently limited to sRGB, the baseline.

Re: What are OKLCH colors?

#135

Post by seba_dos1 »

cruffle_duffle wrote: post #122
layer8 wrote: post #97

Earlier quoted context omitted.

Think of fashion, of smartphone colors, pen and pencil colors and the like. Gray, white, black, are just color choices among all the available colors. A gray T-shirt isn’t a desaturated colored T-shirt. It’s its own color.

Color is weird like. Gray is “all the visible spectrum in equal proportions”, which is white… just less white than the whitest thing visible but more white than the darkest (blackest) thing visible. It’s a “color” because it’s useful to describe such a thing. If you had monitor entirely filled with 50% white you’d call it white. Only by comparing it to something brighter do you call it gray. Brown is the same thing.…

> Whites are the whole thing.

...with varying definitions of "whole". D65 white is almost blue when compared to A white. It stops being either “all the visible spectrum" or "in equal proportions” pretty quickly once you look closer at it.

Re: What are OKLCH colors?

#136

Post by JKCalhoun »

djoldman wrote: post #69
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…

But what really is a "color gradient"? Isn't it any continuous function that starts at a specified color and ends at another specified color? How then does one say that any gradient is good or bad? Isn't the problem you are highlighting guaranteed to exist for any colorspace that defines colors outside of human perception?

Interesting. In nature, I suppose I am most aware of a gradient from a saturated azure sky above to a much whiter sky on the horizon. This would seem to be a trivial saturation gradient.

For a spot color (from a gel covering a light) the light diffuses further from the center of the projected light — two spot colors (with different gels) then, next to each other, would give a kind of gradient from one color to the next as you walk a line from the center of one light to the other.

I wonder what the closest analog to this is algorithmically?

I guess where I am going with this is: is there precedent in nature as to how gradients are supposed to work (and therefore an analog which we should try to model) or are we going strictly on how the human eye perceives color and what algorithm we think "looks" right?

Re: What are OKLCH colors?

#137

Post by ghurtado »

layer8 wrote: post #85
cubefox wrote: post #80

Earlier quoted context omitted.

One could also argue that the detour through other hues is necessary in this case to avoid going through grey.

Gray is arguably just another color, it’s not clear why you’d want to avoid it. How is going via red and yellow better than going via gray? Varying hue is often perceived as a larger change than varying saturation or lightness. A path going through several distinct hues is visually less uniform than one going through gray once.

> Gray is arguably just another color

Only if you're working with additive color.

With substractive, grey is just a darker (or dimmer) white.

Re: What are OKLCH colors?

#138

Post by JKCalhoun »

brulard wrote: post #116
layer8 wrote: post #85

Earlier quoted context omitted.

Gray is arguably just another color, it’s not clear why you’d want to avoid it. How is going via red and yellow better than going via gray? Varying hue is often perceived as a larger change than varying saturation or lightness. A path going through several distinct hues is visually less uniform than one going through gray once.

Let's say you continuously change wavelength of a laser from blue (~480nm) to red (~630nm), you are going through green, not through gray. If in your use case going through gray makes sense, that's ok, there may be many paths from one color to another.

Shine a red and a green light near each other on a wall — what does the transition look like?

Re: What are OKLCH colors?

#139

Post by crazygringo »

altairprime wrote: post #118
fidotron wrote: post #117

Earlier quoted context omitted.

> You can see why by looking at the Hue chart for this color This misses the point: the example claims the hue isn't shifting, when it very clearly is. It's not a question of why.

The hue isn’t shifting in OKLCH at all; also, it’s definitely shifting when OKLCH is rendered to Display P3 or sRGB. This is normal and expected behavior for colorspace gradients when rendered to device profiles? But I suspect I’m too close to the problem to see what’s not explained properly, apologies.

No, it's not normal or expected for hue to change when rendering to a limited gamut.

It's normal and expected for saturation to change. And for brightness to get clipped. But not for hue to change.

That's the critique of OKLCH here, that changing hue is a bizarre and undesirable choice.

Re: What are OKLCH colors?

#140

Post by crazygringo »

rafram wrote: post #119
jibal wrote: post #101

Earlier quoted context omitted.

There certainly is ... run a color picker over it.

I opened the macOS Digital Color Meter and set it to "native values" mode. The second-to-last OKLCH swatch has a green component of 202, and the last has a green component of 226. The corresponding values in the HSL swatches are 203 and 227. Basically no difference at all.

> The corresponding values in the HSL swatches are 203 and 227.

That is a gigantic difference. Those are totally different hues. Which are, of course, exactly the difference we're seeing.

Post reply on HN