> 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…
There’s no green shift at all in that example on my display. Could your calibration be off?
What are OKLCH colors?
101–110 of 189 posts
Re: What are OKLCH colors?
#102Earlier quoted context omitted.
As per discussion of this new OKLCH idea in TFA - Are we even sure we have great formulas for measuring/defining contrast in the first place? Do you agree / disagree with any of the counterexamples over at: https://github.com/tattoy-org/contrast-experiments
I'm not following. These examples are using the WCAG2 contrast algorithm which is well known to be flawed for people interested in this stuff, especially for dark themes so there should be lots of bad examples here? APCA is supposed to improve on this (see the example graphic comparing WCAG2 and APCA): https://git.apcacontrast.com/documentation/WhyAPCA.html > But as @c-blake has rightly pointed out, this doesn't take…
>These examples are using the WCAG2 contrast algorithm which is well known
Only one of the 4 tables shown is the thing you say is the known-to-be-flawed WCAG2 one. Some counterxamples are listed for all 4 formulas, though, 2 of which use the CIE Lightness (which, sure, is probably different, but I believe the CIE L is what APCA is based upon - in spite of so..many..words on their doc pages they often just say "lightness").
------------------------
Another point of those 4 tables, perhaps more clear when looking at the python script, is whether "numerical ratio" vs abs(difference) is better. It seems to me that color space designers, like this OKLCH, are going after "perceptual linearity" which suggests abs(diff) is far more appropriate than a "ratio" which has "near zero" troubles (and zero & one are downright seductive numbers for perceptual lightness scales).
I certainly should learn more about it, but various "click through" APCA things I've seen seem to speak in ratio terms like "10 times the contrast" (though admittedly that only assumes some scale for contrast not that it's formulated as a ratio - it's just suggestive). So, I should probably look more into it before actually offering a critique, but it still has the feeling of "cross purposes" - using some color space axis designed for [0,1] linearity differences instead for ratios within that axis. When I tried using the WCAG2 one I was kind of stunned how sensitive everything was to what should have been a kind of "arbitrary adjustment" to handle near-zero.
I might wonder what designers of color spaces actually have to say about this ratio vs. difference issue if you know of any articles. You seem knowledgeable. The spaces seem literally designed for differences to me.
Re: What are OKLCH colors?
#103> 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…
Agreed. The hue changes completely from blue to cyan. If that's a correct implementation of OKLCH, then it's not something I would ever touch. Something seems to be deeply wrong with however they're calculating hue. HSL/HSV have issues with perceptual lightness . But not with hues. The hue is constant and doesn't need any correction depending on saturation or lightness.
Re: What are OKLCH colors?
#104Aside from a few criticisms that others have already raised I think this is quite a nice introduction to OKLCH and how to use them in CSS. With that out of the way, I'd like to go on a tangent here: can anyone explain the modern trend of not including publishing dates in blog articles? It stood out to me here in particular because the opening sentence said that "OKLCH is a newer color model" and the "newer" part of t…
Re: What are OKLCH colors?
#105The “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…
Also, isn't the way browsers interpolate colors in sRGB just a bug that I assume is retained for backwards compatibility? sRGB is a logarithmic encoding, you were never supposed to interpolate between colors directly in that encoding - the spec says you're suppose to convert to linear RGB first and do the interpolation there...
Usually you fix it by moving your point through a different colour space. Choice depends on your requirements and mediums you're working with (normally different types of light sources or screens).
I had to write a low level colour interpolation librar for a few interactive art projects, so I dipped a bit into this, but I'm no colour expert
Re: What are OKLCH colors?
#106Re: What are OKLCH colors?
#107Aside from a few criticisms that others have already raised I think this is quite a nice introduction to OKLCH and how to use them in CSS. With that out of the way, I'd like to go on a tangent here: can anyone explain the modern trend of not including publishing dates in blog articles? It stood out to me here in particular because the opening sentence said that "OKLCH is a newer color model" and the "newer" part of t…
On some blogs I can only tell the timeframe of the content from the timestamps on the comments ... but many blogs like the OP's don't support comments. I'm not likely to revisit them. (The blurb on the OP's main page is ironic ... rather than obsessing over the smallest details I see obsession over esthetics to the detriment of functionality.)
Re: What are OKLCH colors?
#108There is a youtuber (Gneiss Name) making educational content through the medium of Minecraft. He's made one on OKLab as well: https://youtu.be/nJlZT5AE9zY
Re: What are OKLCH colors?
#109Earlier quoted context omitted.
Agreed. The hue changes completely from blue to cyan. If that's a correct implementation of OKLCH, then it's not something I would ever touch. Something seems to be deeply wrong with however they're calculating hue. HSL/HSV have issues with perceptual lightness . But not with hues. The hue is constant and doesn't need any correction depending on saturation or lightness.
I think you do usually want to rotate the hue a bit when changing the lightness though. It’s a difficult thing to get right and one of the reasons the tailwind builtin colour palettes are so useful.
I looked into it a bit more, and it turns out it's a result of OKLCH easily producing colors out of gamut, and then choosing to sacrifice hue accuracy for better saturation accuracy.
That's a fundamental design flaw if you ask me. Changing hue is completely unacceptable in my book.
Re: What are OKLCH colors?
#110> The way gradients work in OKLCH is pretty different compared to sRGB. In sRGB, gradients are calculated in red, green, and blue values, which often leads to muddy midpoints and uneven brightness. I always understood those “muddy midpoints” as a failure to properly gamma correct the interpolation between two (s)RGB colors. Is that happening here, or is the mud coming from something else?