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

181–189 of 189 posts

Re: What are OKLCH colors?

#181

Post by vanderZwan »

kevin_thibedeau wrote: post #104
vanderZwan wrote: post #20

Aside 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…

SEO to protect old content from being demoted. It is annoying.

I'm surprised they don't punish undated articles then

Re: What are OKLCH colors?

#182

Post by shrx »

the_af wrote: post #92
shrx wrote: post #36

Earlier quoted context omitted.

I don't get it, why am I seeing the "out of gamut" colors if my sRGB monitor is unable to display them? Would the charts look different on a P3 monitor? edit: Also, you mentioned the colors "beyond the ranges of human perception" but I don't think there is any such limitation here, the bottleneck is the hardware (computer monitors).

I don't understand why HN sometimes responds aggressively to an honest, puzzled question. It's as if being wrong (or confused) was a sin here, sometimes. I thought yours was an honest question that warrants an answer (which thankfully Chris answered).

It was an honest question, thank you.

Re: What are OKLCH colors?

#183

Post by anotheryou »

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…

RGB is just allways worst OKLCH usually pretty, which is all I want from gradients most of the time.

I had claude build me a comparison (not sure why 2x the same HSL one) https://i.imgur.com/uziQibR.png

Also super hard in RGB: https://jsfiddle.net/nhgvzm5p/2/ it's just a 2 color OKLCH gradient:

    oklch(0 0.07 279) 66%,
    oklch(0.98 0.09 276) 99%

Re: What are OKLCH colors?

#184

Post by anotheryou »

anotheryou wrote: post #183
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…

RGB is just allways worst OKLCH usually pretty, which is all I want from gradients most of the time. I had claude build me a comparison (not sure why 2x the same HSL one) https://i.imgur.com/uziQibR.png Also super hard in RGB: https://jsfiddle.net/nhgvzm5p/2/ it's just a 2 color OKLCH gradient: oklch(0 0.07 279) 66%, oklch(0.98 0.09 276) 99%

my biggest problems with OKLCH:

- how to easily add "warmth". you can't just add red+green - no good tools for it (e.g. a nice gradient picker ui that lets me specify if I want to allow running out of bounds of teh color space and clip a few colors at max saturation)

Re: What are OKLCH colors?

#185

Post by chrismorgan »

anotheryou wrote: post #183
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…

RGB is just allways worst OKLCH usually pretty, which is all I want from gradients most of the time. I had claude build me a comparison (not sure why 2x the same HSL one) https://i.imgur.com/uziQibR.png Also super hard in RGB: https://jsfiddle.net/nhgvzm5p/2/ it's just a 2 color OKLCH gradient: oklch(0 0.07 279) 66%, oklch(0.98 0.09 276) 99%

That gradient looks terrible, very bad colour banding, because you’re starting and ending at points that are way out of gamut, and the technique used to bring it in isn’t smooth. For a gradient like that, you probably want at least five points.

That is the biggest problem with these colour spaces: the edges are unclear, and overflowing them has bad effects.

Re: What are OKLCH colors?

#186

Post by DemocracyFTW2 »

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 not just another color; I don't know about English but in German you have 'bunte' and 'unbunte' colors; 'unbunte' colors are white, black, and the grays in between

Re: What are OKLCH colors?

#187

Post by anotheryou »

chrismorgan wrote: post #185
anotheryou wrote: post #183

Earlier quoted context omitted.

RGB is just allways worst OKLCH usually pretty, which is all I want from gradients most of the time. I had claude build me a comparison (not sure why 2x the same HSL one) https://i.imgur.com/uziQibR.png Also super hard in RGB: https://jsfiddle.net/nhgvzm5p/2/ it's just a 2 color OKLCH gradient: oklch(0 0.07 279) 66%, oklch(0.98 0.09 276) 99%

That gradient looks terrible, very bad colour banding, because you’re starting and ending at points that are way out of gamut, and the technique used to bring it in isn’t smooth. For a gradient like that, you probably want at least five points. That is the biggest problem with these colour spaces: the edges are unclear, and overflowing them has bad effects.

you think I can get the same OKLCH style colors but without banding?

if I sample 5 colors and throw them in as rgb?

the 3 color rgb one has very similar banding

Re: What are OKLCH colors?

#188

Post by deadvoid »

jesus fuck the whole discussion here is ptsd inducing... you need at least color accurate monitoring (including $25-30K calibrated monitor if you want to discuss rec2020-beyond) before judging if the output color looks "correct", and as correct here includes perceptually uniformity, then your monitor is crucial since light emitting technologies in the market are wildly varied.

this is _especially_ vital if you're not from color science & color correction industry, because that means you have no prior experience(s) with many problems & implications faced in the last 30 years of say, film post-production, which might have seen or solved some of these newly experienced "problems", which might've been caused by hardware choice(s) for example.

Re: What are OKLCH colors?

#189

Post by animal531 »

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…

>During its beta period, Tailwind v4 tried shifting from sRGB to Oklch for gradient interpolation; by release, they’d decided Oklab was a safer default.

I recently implemented both, first I started with OKLab which turned out really well, the gradients you get from it are amazing and the usual color sets (analogous etc.) produce really pleasing sets.

However I quickly ran into the main problem with it, which is that fiddling with its Lightness, Chroma and Hue dials doesn't produce human understandable results. For example sometimes changing L or C induces a color shift, or for some given values changing L only gives midrange values that doesn't go up or down all the way.

I then implemented OKLCH on top of that, which was the way I assumed everyone was doing it. Just have it act as the controller for the human layer, then convert to OKLab for creating gradients etc. The article doesn't really go into it, but having OKLCH as the frontend controller fixes the LCH sliders such that they produce values that make sense to us humans, while still having the superior OKLab setup in the back.

Post reply on HN