←back to thread

855 points tontonius | 1 comments | | HN request time: 0s | source
Show context
twhb ◴[] No.45011306[source]
Great post!

Also check out oklch.com, I found it useful for building an intuition. Some stumbling blocks are that hues aren’t the same as HSL hues, and max chroma is different depending on hue and lightness. This isn’t a bug, but a reflection of human eyes and computer screens; the alternative, as in HSL, is a consistent max but inconsistent meaning.

Another very cool thing about CSS’s OKLCH is it’s a formula, so you can write things like oklch(from var(--accent) calc(l + .1) c h). Do note, though, that you’ll need either some color theory or fiddling to figure out your formulas, my programmer’s intuition told me lies like “a shadow is just a lightness change, not a hue change”.

Also, OKLCH gradients aren’t objectively best, they’re consistently colorful. When used with similar hues, not like the article’s example, they can look very nice, but it’s not realistic; if your goal is how light mixes, then you actually want XYZ. More: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value....

Also, fun fact: the “ok” is actually just the word “ok”. The implication being that LCH was not OK, it had some bugs.

replies(2): >>45012624 #>>45014508 #
1. masklinn ◴[] No.45012624[source]
> Another very cool thing about CSS’s OKLCH is it’s a formula

While it’s more useful for a perceptual color space, relative colors are supported for all CSS color spaces e.g.

    background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));