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

41–50 of 189 posts

Re: What are OKLCH colors?

#41

Post by chrismorgan »

shrx wrote: post #36
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…

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).

It’s squashing the range of the colours down to simulate it.

Re: What are OKLCH colors?

#42

Post by seanwilson »

robin_reala wrote: post #38
seanwilson wrote: post #32

Earlier quoted context omitted.

You can pick colors that pass both APCA and WCAG contrast checks though so it's not a problem to use APCA recommendations now. I find APCA is a little stricter than WCAG for light themes, and APCA is much stricter than WCAG for dark themes, to the point where you really shouldn't use WCAG for dark themes. So most of the time APCA is giving you stricter contrast that easily pass WCAG also. I keep seeing mentions that…

If your colours have enough contrast to pass them both then of course that’s fine! I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally.

> I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally.

Yeah I understand, would you agree this is fairly rare when using APCA though?

I've had the opposite where the brand guide was suggesting we use a light on dark combo that passed WCAG2, yet it failed APCA, and worst of all clearly had poor contrast just by looking at it. Yet, some people will still go with it because WCAG2 gave it the okay haha.

Re: What are OKLCH colors?

#43

Post by chrismorgan »

Aissen wrote: post #40

On the comparison between Color spaces, it's weird, my monitor from 2008 does show a difference between the Display-P3 and the sRGB purple colors, yet I didn't think it'd have such a big color range. Is there some color conversion at the browser or OS-level? (my distro/desktop enables colormgr by default).

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 #a95eff (oklch(0.6447 0.2297 301.67)) which is CSS’s fallback.

But purple is also pretty much the worst choice for such a demo—P3 adds the least to sRGB around there, so the difference will be smallest. A better choice is red or green.

So a better pair would be oklch(0.65 0.2977284 28) on the right (a bright red at the very edge of the P3 gamut, well outside sRGB) and #f00 on the left (the sRGB value CSS will map it to if out of gamut).

Re: What are OKLCH colors?

#45

Post by raincole »

tovej wrote: post #5
promiseofbeans wrote: post #3

I've not touched oklch, but I've played with oklab gradients a fair amount. How do they (oklch & oklab) compare for different uses?

oklch uses the oklab color space.

That's quite misleading. The parent commenter was asking about gradient (interpolation between colors). Gradients look completely different in oklch and oklab.

Re: What are OKLCH colors?

#46

Post by robin_reala »

seanwilson wrote: post #42
robin_reala wrote: post #38

Earlier quoted context omitted.

If your colours have enough contrast to pass them both then of course that’s fine! I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally.

> I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally. Yeah I understand, would you agree this is fairly rare when using APCA though? I've had the opposite where the brand g…

Rare, yes. Checking with both is definitely recommended!

Re: What are OKLCH colors?

#47

Post by seanwilson »

boronine wrote: post #28
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/

Hi Alexei, thanks for your work on HSLuv! I love the simplicity of it, where you can use HSLuv as mostly a drop-in replacement for HSL which most designers are familiar with.

I keep seeing new tutorials on designing accessible palettes that still use HSL, where the WCAG2 contrast breaks and goes all over the place as you vary the hue and saturation. HSLuv makes life so much easier here and lets you focus on exploring colors that you know will pass, using a familiar looking color picker.

Re: What are OKLCH colors?

#48

Post by seanwilson »

robin_reala wrote: post #46
seanwilson wrote: post #42

Earlier quoted context omitted.

> I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally. Yeah I understand, would you agree this is fairly rare when using APCA though? I've had the opposite where the brand g…

Rare, yes. Checking with both is definitely recommended!

Maybe you've seen this but there's also https://github.com/Myndex/bridge-pca that does the "this color pair passes both APCA and WCAG2?" check in one pass.

Re: What are OKLCH colors?

#49

Post by tovej »

raincole wrote: post #45
tovej wrote: post #5

Earlier quoted context omitted.

oklch uses the oklab color space.

That's quite misleading. The parent commenter was asking about gradient (interpolation between colors). Gradients look completely different in oklch and oklab.

Well yes, it's a different coorsinate system, so gradients would look different. It is still the same color space, but I agree I could have worded that better.
Post reply on HN