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

51–60 of 189 posts

Re: What are OKLCH colors?

#51

Post by hackrmn »

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…

> can anyone explain the modern trend of not including publishing dates in blog articles?

In such cases, I usually try to see if the `Last-Modified` header served with the HTML document over HTTP, can be useful, but I conclude that often the same people who don't bother with dating their content -- you'd think they'd understand where the word _blog_ comes from, as in "[web]-log" where timestamps are paramount -- these same people don't know or care how HTTP works. Hint: the `Last-Modified` is the last modification time of the _resource_, in this case the actual HTML document. Just because your "backend" re-rendered the content because you didn't bother with setting up your server caching correctly, doesn't mean you should pretend it's a brand new content every day (which https://jakub.kr/components/oklch-colors does, unfortunately, so you won't know the timestamp from HTTP).

Re: What are OKLCH colors?

#52

Post by ximm »

robin_reala wrote: post #15
rollcat wrote: post #10

Wherever you're working with colors and text/emblems, please also consider contrast and legibility: https://apcacontrast.com/ >

While the above site is great for measuring with a modern contrast algorithm (it’s the current algorithm for the yet-to-be-released WCAG 3 accessibility standards), it’s worth bearing in mind that the WCAG 2 algorithm is somewhat different, and a legal requirement in many markets / industries. You can check your colours against that with a tool like https://www.siegemedia.com/contrast-ratio , although there are many…

Any reference to APCA has been removed from the WCAG 3 drafts in 2023 (see https://github.com/w3c/silver/commit/d5b364de1004d76caa7ddc4...).

I am not sure what the status is.

Re: What are OKLCH colors?

#55

Post by Geenkaas »

I tried working with it but had to give it up for practical purposes. Whereas the focus with HSL is on the Lightness part and the Saturation is made to fit, OKHCL does it differently. It pushes the Chroma part to it's technical limits and abuses the Hue to make it fit, but we just do not understand Chroma intuitively. I am waiting for OKHSL where the adjustments will bu much smaller and do not lead to absurd changes in intent. I already had a discussion about it somewhere else (https://www.reddit.com/r/css/comments/1jv5f0r/hue_is_an_issu...)

Re: What are OKLCH colors?

#56

Post by tzury »

Quote:

    colors are much more accurate in terms of 
    how humans perceive them and it makes 
    working with them much easier
This is an aim, which I am not sure fully addressed. Think of the reason why can't I get oklch or any other method of color definition in HTML to produce the "gold color" as we humans think of it.

The fundamental reason you can't get a truly convincing "gold" color using a single value in oklch, rgb, or any other color definition is because gold is a material, not a color.

What our brain perceives as "gold" is not a single, flat hue. It's a complex interplay of light, reflection, and texture.

Point is, even with sophisticated CSS involved with linear gradient it is still a challenge

See demo at https://jsfiddle.net/oyw9fjda/

---

    
    .flat-gold {
      width: 200px;
      height: 200px;
      /* Using Oklch for a perceptually uniform yellow */
      background: oklch(85% 0.11 85);
    }

    .gradient-gold {
      width: 200px;
      height: 200px;
      background: linear-gradient(
        135deg,
        oklch(60% 0.1 65),   /* Dark, desaturated shadow (brownish) */
        oklch(85% 0.11 85) 45%, /* Rich mid-tone gold */
        oklch(98% 0.1 90) 50%, /* Sharp, bright highlight (almost white-yellow) */
        oklch(85% 0.11 85) 55%, /* Back to the mid-tone */
        oklch(70% 0.1 75)       /* Softer shadow on the other side */
      );
    }

    .conic-gold {
      width: 200px;
      height: 200px;
      border-radius: 50%; /* Often looks best on a circle */
      background: conic-gradient(
        from 90deg,
        #B38728, /* Darker Start */
        #FEE9A0, /* Bright Highlight */
        #D4AF37, /* Mid-tone */
        #FEE9A0, /* Another Highlight */
        #B38728  /* Darker End */
      );
    }

    .premium-gold {
      width: 200px;
      height: 200px;
      background-color: #B38728; /* Fallback color */
      background-image:
        /* Layer 1: Sharp highlight on top */
        linear-gradient(
          175deg,
          rgba(255, 253, 240, 0.6) 0%,
          rgba(255, 215, 0, 0.2) 40%,
          rgba(136, 96, 0, 0.5) 90%
        ),
        /* Layer 2: Base metallic gradient */
        linear-gradient(
          105deg,
          transparent 35%,
          #FEE9A0 48%,
          #D4AF37 52%,
          transparent 65%
        );
      border: 2px solid oklch(60% 0.1 65);
      box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
    }

Re: What are OKLCH colors?

#57

Post by Diggsey »

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…

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

Re: What are OKLCH colors?

#58

Post by robin_reala »

ximm wrote: post #52
robin_reala wrote: post #15

Earlier quoted context omitted.

While the above site is great for measuring with a modern contrast algorithm (it’s the current algorithm for the yet-to-be-released WCAG 3 accessibility standards), it’s worth bearing in mind that the WCAG 2 algorithm is somewhat different, and a legal requirement in many markets / industries. You can check your colours against that with a tool like https://www.siegemedia.com/contrast-ratio , although there are many…

Any reference to APCA has been removed from the WCAG 3 drafts in 2023 (see https://github.com/w3c/silver/commit/d5b364de1004d76caa7ddc4... ). I am not sure what the status is.

Oh, interesting, I’d missed that. Good info, thanks!

Re: What are OKLCH colors?

#59

Post by fidotron »

> 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 perceptual intensity has value, but some of the claims here as to the benefits are exaggerated.

Re: What are OKLCH colors?

#60

Post by ksec »

chrismorgan wrote: post #43
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 #a95e…

Sort of off topic questions, do we have any upcoming colour space beyond BT2020, now that we soon have monitor that reach 100% BT2020. I did some search and it doesn't seems to be any.
Post reply on HN