12 ms·

What are OKLCH colors?

859 points by tontonius 1y ago

jedimastert 1y ago
For historical "neat" factor, here's the original blog post that introduced the color space: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
CIAOBENGA 1y ago
Awesome Post
promiseofbeans 1y ago
I've not touched oklch, but I've played with oklab gradients a fair amount. How do they (oklch & oklab) compare for different uses?
- tovej 1y ago
  oklch uses the oklab color space.
  - cluckindan 1y ago
    The oklch color space is polar: it’s a cylindrical transformation of the oklab cartesian color space.
  - raincole 1y ago
    That's quite misleading. The parent commenter was asking about gradient (interpolation between colors). Gradients look completely different in oklch and oklab.
    - tovej 1y ago
      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.
tovej 1y ago
Really happy about oklch. You do have to learn the hue numbers, but once you do, everything is more intuitive.
tiedemann 1y ago
Seems nice. But how to pronounce it?
- idle_zealot 1y ago
  Like "okay lock" I would guess.
- rollcat 1y ago
  That's one reason to prefer Oklab ;)
- Etheryte 1y ago
  With great difficulty.
- BrenBarn 1y ago
  "Oh, clutch"?
- thiht 1y ago
  o k l c h
chrismorgan 1y ago
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: linear-gradient(in oklch longer hue, #f0f, #0f0) The gradient shown (in either case) is a good example of a way that perceptual colour spaces are really bad to work in: practically the entire way round the edge of the circle, it’s outside sRGB, in fact way outside of the colours humans can perceive. Perceptual colour spaces are really bad at handling the edges of gamuts, where slightly perturbing the values take you out of gamut. Accordingly, there are algorithms defined (yes, plural: not every application has agreed on the technique to use) to drag the colour back in-gamut, but it sacrifices the perceptual uniformity. The red in that gradient is way darker than the rest of it. When you’re looking for better gradients, if you’re caring about perceptual uniformity (which frequently you shouldn’t, perceptual colour spaces are being massively overapplied), you should probably default to interpolating in Oklab instead, which takes a straight line from one side of the circle to the other—yes, through grey, if necessary. linear-gradient(in oklab, #f0f, #0f0) And in this case, that gets you about as decent a magenta-to-lime gradient as you can hope for, not going via red and yellow, and not exhibiting the inappropriate darkening of sRGB interpolation (… though if I were hand-tuning such a gradient, I’d actually go a bit darker than Oklab does). 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.
- ta8645 1y ago
  Very interesting. Is this just a limitation of our current hardware? How much of this problem would still exist if everyone had a wider gamut monitor, say full DCI-P3? That still doesn't cover the full gamut of Oklch, but would it make the problem practically disappear?
  - chrismorgan 1y ago
    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 https://oklch.com/#0.7017,0.3225,328.36,100 and https://oklch.com/#0.86644,0.294827,142.4953,100 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 and magenta (in either direction). The red direction is probably the easier to reason about: there’s just no such colour as a light, bright red. You can have bright or light, but not both. (Its 3D view can also be useful to visualise these things: you’re building a straight-line bridge between two peaks, and there’s a chasm in between.)
JohnKemeny 1y ago
OKLCH: a color model based on OKLab (a perceptually uniform color space) where you control Lightness, Chroma (saturation), and Hue. "OK" because "it does an ok job" according to its creater Björn Ottosson.
- pavlov 1y ago
  He’s Swedish, so I bet OK is actually short for “Ottossons kulör” but he’s just being modest.
  - xg15 1y ago
    In the spirit of "Oll Korrekt", "Otto's Kolors"? How do you pronounce it, btw? "Oklich"? "okay L.C.H."?
    - pavlov 1y ago
      Lich is an old word for a corpse (or in D&D mythology an undead magician). An okay lich is like a chill corpse, maybe?
      - xg15 1y ago
        Was more thinking of a single word like "Oxford", but that works as well!
    - vicarrion 1y ago
      Ok Lunch :) https://dillonshook.com/how-do-you-pronounce-oklch/ https://dillonshook.com/how-do-you-pronounce-oklch/
rollcat 1y ago
Wherever you're working with colors and text/emblems, please also consider contrast and legibility: <https://apcacontrast.com/ https://apcacontrast.com/>
- robin_reala 1y ago
  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 https://www.siegemedia.com/contrast-ratio, although there are many more.
  - seanwilson 1y ago
    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 APCA will let you finally use e.g. white on orange, or white on vibrant blue that pass APCA but fail on WCAG, but my feeling is there's not a lot of examples like this and most of these pairings only have okay contrast anyway, not great contrast, so it's not ideal to be stuck with WCAG's false negatives but not that big of a deal.
    - robin_reala 1y ago
      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.
      - 1y ago
skylurk 1y ago
In the chromaticity diagram, is my Display-P3 screen mapping everything outside the triangle back into the triangle?
- jonnybarnes 1y ago
  Yes, the diagram is a representation. Kind off like drawing 3D shapes on a 2D surface.
lieblingautor 1y ago
seems like a great idea, this will make working with colors so much easier
mattdesl 1y ago
Nice post. OKLCH is quite handy but for writing colors in CSS I hope eventually we’ll get some form of OKHSL/OKHSV[1] so users don’t need to worry about gamut boundaries. [1] https://bottosson.github.io/posts/colorpicker/ https://bottosson.github.io/posts/colorpicker/
vanderZwan 1y ago
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 that sentence will get dated quicker than you think. The main site does mention a date, but limits it to "August 2025" so this seems like a conscious choice and I just don't get it. [0] https://jakub.kr/ https://jakub.kr/
- hackrmn 1y ago
  > 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 https://jakub.kr/components/oklch-colors does, unfortunately, so you won't know the timestamp from HTTP).
  - necovek 1y ago
    I would imagine this is rather to whatever "blog engine" is used instead of the conscious choice of the author (even if they knew what they desire and what would qork better, it might not be their priority).
- kevin_thibedeau 1y ago
  SEO to protect old content from being demoted. It is annoying.
  - 1y ago
seanwilson 1y ago
> 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 automatic palette generator projects where the shades of each color are generated with OKLCH by only varying the lightness value on some chosen base color. The problem I find is if you look at popular open source palettes, the way the hand-crafted hue and saturation values vary across the shades for different hues isn't that predictable (the curve of the hue/saturation values over shades aren't straight lines or typical easing curves). Hawking my own tool (using HSLuv with RGB for now), but you can load and compare the hue and saturation curves as they vary over shades of a color using example palettes from Tailwind 3, USWDS and IBM Carbon, plus tweak each shade to your liking: https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvciI6eyJiYXNlIjp7ImdyYXkiOnsiNTAiOnsidmFsdWUiOiIjZjlmYWZiIn0sIjEwMCI6eyJ2YWx1ZSI6IiNmM2Y0ZjYifSwiMjAwIjp7InZhbHVlIjoiI2U1ZTdlYiJ9LCIzMDAiOnsidmFsdWUiOiIjZDFkNWRiIn0sIjQwMCI6eyJ2YWx1ZSI6IiM5Y2EzYWYifSwiNTAwIjp7InZhbHVlIjoiIzZiNzI4MCJ9LCI2MDAiOnsidmFsdWUiOiIjNGI1NTYzIn0sIjcwMCI6eyJ2YWx1ZSI6IiMzNzQxNTEifSwiODAwIjp7InZhbHVlIjoiIzFmMjkzNyJ9LCI5MDAiOnsidmFsdWUiOiIjMTExODI3In0sIjk1MCI6eyJ2YWx1ZSI6IiMwMzA3MTIifX0sInJlZCI6eyI1MCI6eyJ2YWx1ZSI6IiNmZWYyZjIifSwiMTAwIjp7InZhbHVlIjoiI2ZlZTJlMiJ9LCIyMDAiOnsidmFsdWUiOiIjZmVjYWNhIn0sIjMwMCI6eyJ2YWx1ZSI6IiNmY2E1YTUifSwiNDAwIjp7InZhbHVlIjoiI2Y4NzE3MSJ9LCI1MDAiOnsidmFsdWUiOiIjZWY0NDQ0In0sIjYwMCI6eyJ2YWx1ZSI6IiNkYzI2MjYifSwiNzAwIjp7InZhbHVlIjoiI2I5MWMxYyJ9LCI4MDAiOnsidmFsdWUiOiIjOTkxYjFiIn0sIjkwMCI6eyJ2YWx1ZSI6IiM3ZjFkMWQifSwiOTUwIjp7InZhbHVlIjoiIzQ1MGEwYSJ9fSwib3JhbmdlIjp7IjUwIjp7InZhbHVlIjoiI2ZmZjdlZCJ9LCIxMDAiOnsidmFsdWUiOiIjZmZlZGQ1In0sIjIwMCI6eyJ2YWx1ZSI6IiNmZWQ3YWEifSwiMzAwIjp7InZhbHVlIjoiI2ZkYmE3NCJ9LCI0MDAiOnsidmFsdWUiOiIjZmI5MjNjIn0sIjUwMCI6eyJ2YWx1ZSI6IiNmOTczMTYifSwiNjAwIjp7InZhbHVlIjoiI2VhNTgwYyJ9LCI3MDAiOnsidmFsdWUiOiIjYzI0MTBjIn0sIjgwMCI6eyJ2YWx1ZSI6IiM5YTM0MTIifSwiOTAwIjp7InZhbHVlIjoiIzdjMmQxMiJ9LCI5NTAiOnsidmFsdWUiOiIjNDMxNDA3In19LCJ5ZWxsb3ciOnsiNTAiOnsidmFsdWUiOiIjZmVmY2U4In0sIjEwMCI6eyJ2YWx1ZSI6IiNmZWY5YzMifSwiMjAwIjp7InZhbHVlIjoiI2ZlZjA4YSJ9LCIzMDAiOnsidmFsdWUiOiIjZmRlMDQ3In0sIjQwMCI6eyJ2YWx1ZSI6IiNmYWNjMTUifSwiNTAwIjp7InZhbHVlIjoiI2VhYjMwOCJ9LCI2MDAiOnsidmFsdWUiOiIjY2E4YTA0In0sIjcwMCI6eyJ2YWx1ZSI6IiNhMTYyMDcifSwiODAwIjp7InZhbHVlIjoiIzg1NGQwZSJ9LCI5MDAiOnsidmFsdWUiOiIjNzEzZjEyIn0sIjk1MCI6eyJ2YWx1ZSI6IiM0MjIwMDYifX0sImdyZWVuIjp7IjUwIjp7InZhbHVlIjoiI2YwZmRmNCJ9LCIxMDAiOnsidmFsdWUiOiIjZGNmY2U3In0sIjIwMCI6eyJ2YWx1ZSI6IiNiYmY3ZDAifSwiMzAwIjp7InZhbHVlIjoiIzg2ZWZhYyJ9LCI0MDAiOnsidmFsdWUiOiIjNGFkZTgwIn0sIjUwMCI6eyJ2YWx1ZSI6IiMyMmM1NWUifSwiNjAwIjp7InZhbHVlIjoiIzE2YTM0YSJ9LCI3MDAiOnsidmFsdWUiOiIjMTU4MDNkIn0sIjgwMCI6eyJ2YWx1ZSI6IiMxNjY1MzQifSwiOTAwIjp7InZhbHVlIjoiIzE0NTMyZCJ9LCI5NTAiOnsidmFsdWUiOiIjMDUyZTE2In19LCJ0ZWFsIjp7IjUwIjp7InZhbHVlIjoiI2YwZmRmYSJ9LCIxMDAiOnsidmFsdWUiOiIjY2NmYmYxIn0sIjIwMCI6eyJ2YWx1ZSI6IiM5OWY2ZTQifSwiMzAwIjp7InZhbHVlIjoiIzVlZWFkNCJ9LCI0MDAiOnsidmFsdWUiOiIjMmRkNGJmIn0sIjUwMCI6eyJ2YWx1ZSI6IiMxNGI4YTYifSwiNjAwIjp7InZhbHVlIjoiIzBkOTQ4OCJ9LCI3MDAiOnsidmFsdWUiOiIjMGY3NjZlIn0sIjgwMCI6eyJ2YWx1ZSI6IiMxMTVlNTkifSwiOTAwIjp7InZhbHVlIjoiIzEzNGU0YSJ9LCI5NTAiOnsidmFsdWUiOiIjMDQyZjJlIn19LCJibHVlIjp7IjUwIjp7InZhbHVlIjoiI2VmZjZmZiJ9LCIxMDAiOnsidmFsdWUiOiIjZGJlYWZlIn0sIjIwMCI6eyJ2YWx1ZSI6IiNiZmRiZmUifSwiMzAwIjp7InZhbHVlIjoiIzkzYzVmZCJ9LCI0MDAiOnsidmFsdWUiOiIjNjBhNWZhIn0sIjUwMCI6eyJ2YWx1ZSI6IiMzYjgyZjYifSwiNjAwIjp7InZhbHVlIjoiIzI1NjNlYiJ9LCI3MDAiOnsidmFsdWUiOiIjMWQ0ZWQ4In0sIjgwMCI6eyJ2YWx1ZSI6IiMxZTQwYWYifSwiOTAwIjp7InZhbHVlIjoiIzFlM2E4YSJ9LCI5NTAiOnsidmFsdWUiOiIjMTcyNTU0In19LCJwdXJwbGUiOnsiNTAiOnsidmFsdWUiOiIjZmFmNWZmIn0sIjEwMCI6eyJ2YWx1ZSI6IiNmM2U4ZmYifSwiMjAwIjp7InZhbHVlIjoiI2U5ZDVmZiJ9LCIzMDAiOnsidmFsdWUiOiIjZDhiNGZlIn0sIjQwMCI6eyJ2YWx1ZSI6IiNjMDg0ZmMifSwiNTAwIjp7InZhbHVlIjoiI2E4NTVmNyJ9LCI2MDAiOnsidmFsdWUiOiIjOTMzM2VhIn0sIjcwMCI6eyJ2YWx1ZSI6IiM3ZTIyY2UifSwiODAwIjp7InZhbHVlIjoiIzZiMjFhOCJ9LCI5MDAiOnsidmFsdWUiOiIjNTgxYzg3In0sIjk1MCI6eyJ2YWx1ZSI6IiMzYjA3NjQifX19fX0%253D https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvci... So I think OKLCH is a nice starting base for palettes and a quick way to generate a color you need in CSS, but I think designers will always need to tweak the hue and saturation of each shade so it looks just right as there's no single right answer you could encode into the color space.
twhb 1y ago
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/color-mix 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.
- masklinn 1y ago
  > 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));
- disconcision 1y ago
  OKLCH plus relative colors let me seriously reduce the amount of hardcoded colors from my style sheet: https://github.com/hazelgrove/hazel/blob/dev/src/web/www/style/variables.css https://github.com/hazelgrove/hazel/blob/dev/src/web/www/sty...
TiredOfLife 1y ago
That gradient example is hilarious. With RGB you order green salad you get green salad. With OKLCH you order green salad you get beet soup.
- jibal 1y ago
  Yes ... see chrismorgan's comment on it up top.
roer 1y ago
There 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 https://youtu.be/nJlZT5AE9zY
- jedimastert 1y ago
  What an absolutely fascinating channel! Thanks for the link
teekert 1y ago
These IP addresses being released at some point, and making their way into something else is probably the reason I never got to fully run my mailserver from my basement. These companies are just massively giving IP addresses a bad reputation, messing them up for any other use and then abandoning them. I wonder what this would look like when plotted: AI (and other toxic crawling) companies slowly consuming the IPv4 address space? Ideally we'd forced them into some corner of the IPv6 space I guess. I mean robots.txt seems not to be of any help here.
- phgn 1y ago
  I think you commented on the wrong post :)
  - teekert 1y ago
    Oops,haha, you're right! Should have been https://news.ycombinator.com/item?id=45010183 https://news.ycombinator.com/item?id=45010183 Apologies! (I can't delete the post though, feel free to down-vote into oblivion)
JimDabell 1y ago
I found this to be a good article on the subject: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg... Along with their picker / converter here: https://oklch.com/ https://oklch.com/ Discussed on Hacker News here: https://news.ycombinator.com/item?id=43073819 https://news.ycombinator.com/item?id=43073819 (6 months ago, 30 comments)
Aissen 1y ago
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).
- chrismorgan 1y ago
  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).
  - ksec 1y ago
    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.
    - adrian_b 1y ago
      For any really bigger color space, you would have to use more than 3 primary colors, which would increase a lot the cost. Moving the monochromatic BT.2020 colors from 630 nm, 532 nm and 467 nm could get a little increase in color space coverage, but at the expense of a lower efficiency in power consumption to brightness conversion. 467 nm is not a very pure blue, but the sensitivity of the eye drops very quickly in the blue region, so a better blue would require much more power. Similarly, though not so pronounced, for a different green. Moreover, in the green region there is a gap, both for lasers and for LEDs, where the available devices have low efficiencies for converting electrical power to light, so changing the frequency of the primary green color would have to take that into account too. In conclusion, I believe that the BT.2020 (actually BT.2100) color space is close to the best that can be done in displays of reasonable price and energy efficiency. A true coverage of 100% of the BT.2100 color space can be realized only with laser projectors. Any display with LEDs or quantum dots will never have really monochromatic primary colors, though a coverage of significantly more than 90% of the BT.2100 color space is not too difficult. However, the advertised percentage of the color space may be misleading, because it varies depending on the kind of color space used for computations. A coverage percentage computed in OKlab would be more informative than a percentage computed in the XYZ color space.
dev_l1x_be 1y ago
I was wondering about this exact subject the other day when working on some web dev task. Now I know why this way is better.
oaiey 1y ago
Thanks for this post. Hackernews is sometimes awesome for learning opportunities like this. Never heard of the model, thankful for the article.
once_inc 1y ago
My mind immediately translated OKLCH into "Oklachroma".
Geenkaas 1y ago
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_issue_in_the_oklch_color_model/ https://www.reddit.com/r/css/comments/1jv5f0r/hue_is_an_issu...)
tzury 1y ago
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/ https://jsfiddle.net/oyw9fjda/ --- <style> .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); } </style> <div class="flat-gold"></div> <hr /> <div class="gradient-gold"></div> <hr /> <div class="conic-gold"></div> <hr /> <div class="premium-gold"></div>
fidotron 1y ago
> 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.
- rafram 1y ago
  There’s no green shift at all in that example on my display. Could your calibration be off?
  - fidotron 1y ago
    It's practically cyan, which is half way to green, not a lighter version of the blue to the left. This is on a MBP built in display. This totally has uses but it is not, as claimed, "there is no hue or saturation drift" given the hue has shifted so much.
  - jibal 1y ago
    There certainly is ... run a color picker over it.
    - rafram 1y ago
      I opened the macOS Digital Color Meter and set it to "native values" mode. The second-to-last OKLCH swatch has a green component of 202, and the last has a green component of 226. The corresponding values in the HSL swatches are 203 and 227. Basically no difference at all.
      - crazygringo 1y ago
        > The corresponding values in the HSL swatches are 203 and 227. That is a gigantic difference. Those are totally different hues. Which are, of course, exactly the difference we're seeing.
Daub 1y ago
Does anyone know how this is different to the Munsell color space, which is also perceptually uniform? Edit: I would imagine that the only way to definine a perceptually uniform color space is by tons of user testing. This is how Munsell developed his color space… specifically presenting test subjects with pairs of identical and near-identical color swatches and asking if they could tell the difference. In this way, pairwise comparisom of similararity became the bedrock of color perception science.
- DeusExMachina 1y ago
  My understanding is that it's the same with higher resolution.
- shinze 1y ago
  Oklch is open source and part of the web standard, Munsell colors probably needs a licence to be used ?
- itishappy 1y ago
  The Munsell color system isn't really intended for displays, rather it's a collection of pigments, similar to Pantone. The transforms can get a bit weird (for example, since the swatches are discrete, there's no defined way to get intermediate colors). Munsell's ideas, particularly the axes of hue, value, and chroma, have absolutely influenced modern color spaces and are very much on display in the OKLCH space.
letmeinhere 1y ago
How does oklch compare to CIELCh(uv)? I've been using that seemingly similar system to pick uniform colors.
- jedimastert 1y ago
  Here's the original post explaining the color space. The ideas are very similar, OKLAB used a different white point https://bottosson.github.io/posts/oklab/#what-about-existing-models%3F https://bottosson.github.io/posts/oklab/#what-about-existing...
djoldman 1y ago
Creator of OKLCH on OKLCH: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
adornKey 1y ago
The best axis for Lightness in my opinion is still the Gray-Scale (as used back in the day for black/white/grayscale TVs). The newer CIE colorspaces (CIECAM02 CIECAM16) seem to address the effect, that color-perception goes wild if you change background and illumination. Oklab seems to only make some fixed choice about how to include the chromatic part to lightness. I'm not so sure, how this definition of lightness is any better than grayscale (from 1931).
karmakaze 1y ago
Why is there no documented formula to convert to from this color space? A quick google and the best I could find is this Gist[0]. Searching for Oklab has a Wikipedia page[1]. [0] https://gist.github.com/dkaraush/65d19d61396f5f3cd8ba7d1b4b3c9432 https://gist.github.com/dkaraush/65d19d61396f5f3cd8ba7d1b4b3... [1] https://en.wikipedia.org/wiki/Oklab_color_space https://en.wikipedia.org/wiki/Oklab_color_space
- shrx 1y ago
  It looks to me that all the "magic" is in the matrices used for conversion between Oklab and sRGB. The final conversion between Oklab and Oklch is trivial, and is documented in your linked Wikipedia article.
- dwringer 1y ago
  OKLCh is the same space as OKLab, it's just polar coordinates versus rectangular coordinates.
MontagFTB 1y ago
> 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?
- kevin_thibedeau 1y ago
  Grays run along a diagonal axis of the RGB cube after stripping gamma off. A straight line through the cube will brush by it. This is enhanced when transitioning from a primary (green) to an opposite corner (magenta).
fcpguru 1y ago
some nice OKLCH resources: https://apps.apple.com/us/app/cone-color-picker-identifier/id1221305627 https://apps.apple.com/us/app/cone-color-picker-identifier/i... https://sindresorhus.com/system-color-picker https://sindresorhus.com/system-color-picker https://evilmartians.com/opensource/oklch-color-picker https://evilmartians.com/opensource/oklch-color-picker https://oklch.eerolehtinen.fi/ https://oklch.eerolehtinen.fi/ https://github.com/eero-lehtinen/oklch-color-picker https://github.com/eero-lehtinen/oklch-color-picker
snvzz 1y ago
HSV with extra steps?
deleted 1y ago
[deleted]
chrchr 1y ago
I added oklab to emacs's color module. I initially intended to use it to make better procedural themes, but I haven't gotten to that yet. In any case, emacs version 30 has color-oklab-to-xyz and color-xyz-to-oklab functions that work with the other functions in emacs's color module to convert to/from oklab colors.
gowld 1y ago
"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." The OKLCH lighter shade veers off into bright cyan! I don't see HSL getting grey on the dark side.
jrm4 1y ago
This is fantastic, can't wait to incorporate it into my web design classes stuff. Also, I do hope people begin to see the value of "designing toward intuition," I can't help but notice that efforts like these are exact opposite of what happened when (most of) the world forcibly converted to metric.
nairadithya 1y ago
Oklch is so cool, My website has a single hue colourscheme derived completely from the date so that every day is a new colour. https://adithyanair.com https://adithyanair.com
deadvoid 1y ago
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.

859 points by tontonius 1y ago

For historical "neat" factor, here's the original blog post that introduced the color space: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/

CIAOBENGA 1y ago

Awesome Post

promiseofbeans 1y ago

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

tovej 1y ago
oklch uses the oklab color space.
- cluckindan 1y ago
  The oklch color space is polar: it’s a cylindrical transformation of the oklab cartesian color space.
- raincole 1y ago
  That's quite misleading. The parent commenter was asking about gradient (interpolation between colors). Gradients look completely different in oklch and oklab.
  - tovej 1y ago
    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.

tovej 1y ago

Really happy about oklch. You do have to learn the hue numbers, but once you do, everything is more intuitive.

tiedemann 1y ago

Seems nice. But how to pronounce it?

idle_zealot 1y ago
Like "okay lock" I would guess.
rollcat 1y ago
That's one reason to prefer Oklab ;)
Etheryte 1y ago
With great difficulty.
BrenBarn 1y ago
"Oh, clutch"?
thiht 1y ago
o k l c h

chrismorgan 1y ago

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: linear-gradient(in oklch longer hue, #f0f, #0f0) The gradient shown (in either case) is a good example of a way that perceptual colour spaces are really bad to work in: practically the entire way round the edge of the circle, it’s outside sRGB, in fact way outside of the colours humans can perceive. Perceptual colour spaces are really bad at handling the edges of gamuts, where slightly perturbing the values take you out of gamut. Accordingly, there are algorithms defined (yes, plural: not every application has agreed on the technique to use) to drag the colour back in-gamut, but it sacrifices the perceptual uniformity. The red in that gradient is way darker than the rest of it. When you’re looking for better gradients, if you’re caring about perceptual uniformity (which frequently you shouldn’t, perceptual colour spaces are being massively overapplied), you should probably default to interpolating in Oklab instead, which takes a straight line from one side of the circle to the other—yes, through grey, if necessary. linear-gradient(in oklab, #f0f, #0f0) And in this case, that gets you about as decent a magenta-to-lime gradient as you can hope for, not going via red and yellow, and not exhibiting the inappropriate darkening of sRGB interpolation (… though if I were hand-tuning such a gradient, I’d actually go a bit darker than Oklab does). 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.

ta8645 1y ago
Very interesting. Is this just a limitation of our current hardware? How much of this problem would still exist if everyone had a wider gamut monitor, say full DCI-P3? That still doesn't cover the full gamut of Oklch, but would it make the problem practically disappear?
- chrismorgan 1y ago
  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 https://oklch.com/#0.7017,0.3225,328.36,100 and https://oklch.com/#0.86644,0.294827,142.4953,100 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 and magenta (in either direction). The red direction is probably the easier to reason about: there’s just no such colour as a light, bright red. You can have bright or light, but not both. (Its 3D view can also be useful to visualise these things: you’re building a straight-line bridge between two peaks, and there’s a chasm in between.)

JohnKemeny 1y ago

OKLCH: a color model based on OKLab (a perceptually uniform color space) where you control Lightness, Chroma (saturation), and Hue. "OK" because "it does an ok job" according to its creater Björn Ottosson.

pavlov 1y ago
He’s Swedish, so I bet OK is actually short for “Ottossons kulör” but he’s just being modest.
- xg15 1y ago
  In the spirit of "Oll Korrekt", "Otto's Kolors"? How do you pronounce it, btw? "Oklich"? "okay L.C.H."?
  - pavlov 1y ago
    Lich is an old word for a corpse (or in D&D mythology an undead magician). An okay lich is like a chill corpse, maybe?
    - xg15 1y ago
      Was more thinking of a single word like "Oxford", but that works as well!
  - vicarrion 1y ago
    Ok Lunch :) https://dillonshook.com/how-do-you-pronounce-oklch/ https://dillonshook.com/how-do-you-pronounce-oklch/

rollcat 1y ago

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

robin_reala 1y ago
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 https://www.siegemedia.com/contrast-ratio, although there are many more.
- seanwilson 1y ago
  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 APCA will let you finally use e.g. white on orange, or white on vibrant blue that pass APCA but fail on WCAG, but my feeling is there's not a lot of examples like this and most of these pairings only have okay contrast anyway, not great contrast, so it's not ideal to be stuck with WCAG's false negatives but not that big of a deal.
  - robin_reala 1y ago
    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.
    - 1y ago

skylurk 1y ago

In the chromaticity diagram, is my Display-P3 screen mapping everything outside the triangle back into the triangle?

jonnybarnes 1y ago
Yes, the diagram is a representation. Kind off like drawing 3D shapes on a 2D surface.

lieblingautor 1y ago

seems like a great idea, this will make working with colors so much easier

mattdesl 1y ago

Nice post. OKLCH is quite handy but for writing colors in CSS I hope eventually we’ll get some form of OKHSL/OKHSV[1] so users don’t need to worry about gamut boundaries. [1] https://bottosson.github.io/posts/colorpicker/ https://bottosson.github.io/posts/colorpicker/

vanderZwan 1y ago

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 that sentence will get dated quicker than you think. The main site does mention a date, but limits it to "August 2025" so this seems like a conscious choice and I just don't get it. [0] https://jakub.kr/ https://jakub.kr/

hackrmn 1y ago
> 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 https://jakub.kr/components/oklch-colors does, unfortunately, so you won't know the timestamp from HTTP).
- necovek 1y ago
  I would imagine this is rather to whatever "blog engine" is used instead of the conscious choice of the author (even if they knew what they desire and what would qork better, it might not be their priority).
kevin_thibedeau 1y ago
SEO to protect old content from being demoted. It is annoying.
- 1y ago

seanwilson 1y ago

> 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 automatic palette generator projects where the shades of each color are generated with OKLCH by only varying the lightness value on some chosen base color. The problem I find is if you look at popular open source palettes, the way the hand-crafted hue and saturation values vary across the shades for different hues isn't that predictable (the curve of the hue/saturation values over shades aren't straight lines or typical easing curves). Hawking my own tool (using HSLuv with RGB for now), but you can load and compare the hue and saturation curves as they vary over shades of a color using example palettes from Tailwind 3, USWDS and IBM Carbon, plus tweak each shade to your liking: https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvciI6eyJiYXNlIjp7ImdyYXkiOnsiNTAiOnsidmFsdWUiOiIjZjlmYWZiIn0sIjEwMCI6eyJ2YWx1ZSI6IiNmM2Y0ZjYifSwiMjAwIjp7InZhbHVlIjoiI2U1ZTdlYiJ9LCIzMDAiOnsidmFsdWUiOiIjZDFkNWRiIn0sIjQwMCI6eyJ2YWx1ZSI6IiM5Y2EzYWYifSwiNTAwIjp7InZhbHVlIjoiIzZiNzI4MCJ9LCI2MDAiOnsidmFsdWUiOiIjNGI1NTYzIn0sIjcwMCI6eyJ2YWx1ZSI6IiMzNzQxNTEifSwiODAwIjp7InZhbHVlIjoiIzFmMjkzNyJ9LCI5MDAiOnsidmFsdWUiOiIjMTExODI3In0sIjk1MCI6eyJ2YWx1ZSI6IiMwMzA3MTIifX0sInJlZCI6eyI1MCI6eyJ2YWx1ZSI6IiNmZWYyZjIifSwiMTAwIjp7InZhbHVlIjoiI2ZlZTJlMiJ9LCIyMDAiOnsidmFsdWUiOiIjZmVjYWNhIn0sIjMwMCI6eyJ2YWx1ZSI6IiNmY2E1YTUifSwiNDAwIjp7InZhbHVlIjoiI2Y4NzE3MSJ9LCI1MDAiOnsidmFsdWUiOiIjZWY0NDQ0In0sIjYwMCI6eyJ2YWx1ZSI6IiNkYzI2MjYifSwiNzAwIjp7InZhbHVlIjoiI2I5MWMxYyJ9LCI4MDAiOnsidmFsdWUiOiIjOTkxYjFiIn0sIjkwMCI6eyJ2YWx1ZSI6IiM3ZjFkMWQifSwiOTUwIjp7InZhbHVlIjoiIzQ1MGEwYSJ9fSwib3JhbmdlIjp7IjUwIjp7InZhbHVlIjoiI2ZmZjdlZCJ9LCIxMDAiOnsidmFsdWUiOiIjZmZlZGQ1In0sIjIwMCI6eyJ2YWx1ZSI6IiNmZWQ3YWEifSwiMzAwIjp7InZhbHVlIjoiI2ZkYmE3NCJ9LCI0MDAiOnsidmFsdWUiOiIjZmI5MjNjIn0sIjUwMCI6eyJ2YWx1ZSI6IiNmOTczMTYifSwiNjAwIjp7InZhbHVlIjoiI2VhNTgwYyJ9LCI3MDAiOnsidmFsdWUiOiIjYzI0MTBjIn0sIjgwMCI6eyJ2YWx1ZSI6IiM5YTM0MTIifSwiOTAwIjp7InZhbHVlIjoiIzdjMmQxMiJ9LCI5NTAiOnsidmFsdWUiOiIjNDMxNDA3In19LCJ5ZWxsb3ciOnsiNTAiOnsidmFsdWUiOiIjZmVmY2U4In0sIjEwMCI6eyJ2YWx1ZSI6IiNmZWY5YzMifSwiMjAwIjp7InZhbHVlIjoiI2ZlZjA4YSJ9LCIzMDAiOnsidmFsdWUiOiIjZmRlMDQ3In0sIjQwMCI6eyJ2YWx1ZSI6IiNmYWNjMTUifSwiNTAwIjp7InZhbHVlIjoiI2VhYjMwOCJ9LCI2MDAiOnsidmFsdWUiOiIjY2E4YTA0In0sIjcwMCI6eyJ2YWx1ZSI6IiNhMTYyMDcifSwiODAwIjp7InZhbHVlIjoiIzg1NGQwZSJ9LCI5MDAiOnsidmFsdWUiOiIjNzEzZjEyIn0sIjk1MCI6eyJ2YWx1ZSI6IiM0MjIwMDYifX0sImdyZWVuIjp7IjUwIjp7InZhbHVlIjoiI2YwZmRmNCJ9LCIxMDAiOnsidmFsdWUiOiIjZGNmY2U3In0sIjIwMCI6eyJ2YWx1ZSI6IiNiYmY3ZDAifSwiMzAwIjp7InZhbHVlIjoiIzg2ZWZhYyJ9LCI0MDAiOnsidmFsdWUiOiIjNGFkZTgwIn0sIjUwMCI6eyJ2YWx1ZSI6IiMyMmM1NWUifSwiNjAwIjp7InZhbHVlIjoiIzE2YTM0YSJ9LCI3MDAiOnsidmFsdWUiOiIjMTU4MDNkIn0sIjgwMCI6eyJ2YWx1ZSI6IiMxNjY1MzQifSwiOTAwIjp7InZhbHVlIjoiIzE0NTMyZCJ9LCI5NTAiOnsidmFsdWUiOiIjMDUyZTE2In19LCJ0ZWFsIjp7IjUwIjp7InZhbHVlIjoiI2YwZmRmYSJ9LCIxMDAiOnsidmFsdWUiOiIjY2NmYmYxIn0sIjIwMCI6eyJ2YWx1ZSI6IiM5OWY2ZTQifSwiMzAwIjp7InZhbHVlIjoiIzVlZWFkNCJ9LCI0MDAiOnsidmFsdWUiOiIjMmRkNGJmIn0sIjUwMCI6eyJ2YWx1ZSI6IiMxNGI4YTYifSwiNjAwIjp7InZhbHVlIjoiIzBkOTQ4OCJ9LCI3MDAiOnsidmFsdWUiOiIjMGY3NjZlIn0sIjgwMCI6eyJ2YWx1ZSI6IiMxMTVlNTkifSwiOTAwIjp7InZhbHVlIjoiIzEzNGU0YSJ9LCI5NTAiOnsidmFsdWUiOiIjMDQyZjJlIn19LCJibHVlIjp7IjUwIjp7InZhbHVlIjoiI2VmZjZmZiJ9LCIxMDAiOnsidmFsdWUiOiIjZGJlYWZlIn0sIjIwMCI6eyJ2YWx1ZSI6IiNiZmRiZmUifSwiMzAwIjp7InZhbHVlIjoiIzkzYzVmZCJ9LCI0MDAiOnsidmFsdWUiOiIjNjBhNWZhIn0sIjUwMCI6eyJ2YWx1ZSI6IiMzYjgyZjYifSwiNjAwIjp7InZhbHVlIjoiIzI1NjNlYiJ9LCI3MDAiOnsidmFsdWUiOiIjMWQ0ZWQ4In0sIjgwMCI6eyJ2YWx1ZSI6IiMxZTQwYWYifSwiOTAwIjp7InZhbHVlIjoiIzFlM2E4YSJ9LCI5NTAiOnsidmFsdWUiOiIjMTcyNTU0In19LCJwdXJwbGUiOnsiNTAiOnsidmFsdWUiOiIjZmFmNWZmIn0sIjEwMCI6eyJ2YWx1ZSI6IiNmM2U4ZmYifSwiMjAwIjp7InZhbHVlIjoiI2U5ZDVmZiJ9LCIzMDAiOnsidmFsdWUiOiIjZDhiNGZlIn0sIjQwMCI6eyJ2YWx1ZSI6IiNjMDg0ZmMifSwiNTAwIjp7InZhbHVlIjoiI2E4NTVmNyJ9LCI2MDAiOnsidmFsdWUiOiIjOTMzM2VhIn0sIjcwMCI6eyJ2YWx1ZSI6IiM3ZTIyY2UifSwiODAwIjp7InZhbHVlIjoiIzZiMjFhOCJ9LCI5MDAiOnsidmFsdWUiOiIjNTgxYzg3In0sIjk1MCI6eyJ2YWx1ZSI6IiMzYjA3NjQifX19fX0%253D https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvci... So I think OKLCH is a nice starting base for palettes and a quick way to generate a color you need in CSS, but I think designers will always need to tweak the hue and saturation of each shade so it looks just right as there's no single right answer you could encode into the color space.

twhb 1y ago

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/color-mix 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.

masklinn 1y ago
> 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));
disconcision 1y ago
OKLCH plus relative colors let me seriously reduce the amount of hardcoded colors from my style sheet: https://github.com/hazelgrove/hazel/blob/dev/src/web/www/style/variables.css https://github.com/hazelgrove/hazel/blob/dev/src/web/www/sty...

TiredOfLife 1y ago

That gradient example is hilarious. With RGB you order green salad you get green salad. With OKLCH you order green salad you get beet soup.

jibal 1y ago
Yes ... see chrismorgan's comment on it up top.

roer 1y ago

There 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 https://youtu.be/nJlZT5AE9zY

jedimastert 1y ago
What an absolutely fascinating channel! Thanks for the link

teekert 1y ago

These IP addresses being released at some point, and making their way into something else is probably the reason I never got to fully run my mailserver from my basement. These companies are just massively giving IP addresses a bad reputation, messing them up for any other use and then abandoning them. I wonder what this would look like when plotted: AI (and other toxic crawling) companies slowly consuming the IPv4 address space? Ideally we'd forced them into some corner of the IPv6 space I guess. I mean robots.txt seems not to be of any help here.

phgn 1y ago
I think you commented on the wrong post :)
- teekert 1y ago
  Oops,haha, you're right! Should have been https://news.ycombinator.com/item?id=45010183 https://news.ycombinator.com/item?id=45010183 Apologies! (I can't delete the post though, feel free to down-vote into oblivion)

JimDabell 1y ago

I found this to be a good article on the subject: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg... Along with their picker / converter here: https://oklch.com/ https://oklch.com/ Discussed on Hacker News here: https://news.ycombinator.com/item?id=43073819 https://news.ycombinator.com/item?id=43073819 (6 months ago, 30 comments)

Aissen 1y ago

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

chrismorgan 1y ago
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).
- ksec 1y ago
  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.
  - adrian_b 1y ago
    For any really bigger color space, you would have to use more than 3 primary colors, which would increase a lot the cost. Moving the monochromatic BT.2020 colors from 630 nm, 532 nm and 467 nm could get a little increase in color space coverage, but at the expense of a lower efficiency in power consumption to brightness conversion. 467 nm is not a very pure blue, but the sensitivity of the eye drops very quickly in the blue region, so a better blue would require much more power. Similarly, though not so pronounced, for a different green. Moreover, in the green region there is a gap, both for lasers and for LEDs, where the available devices have low efficiencies for converting electrical power to light, so changing the frequency of the primary green color would have to take that into account too. In conclusion, I believe that the BT.2020 (actually BT.2100) color space is close to the best that can be done in displays of reasonable price and energy efficiency. A true coverage of 100% of the BT.2100 color space can be realized only with laser projectors. Any display with LEDs or quantum dots will never have really monochromatic primary colors, though a coverage of significantly more than 90% of the BT.2100 color space is not too difficult. However, the advertised percentage of the color space may be misleading, because it varies depending on the kind of color space used for computations. A coverage percentage computed in OKlab would be more informative than a percentage computed in the XYZ color space.

dev_l1x_be 1y ago

I was wondering about this exact subject the other day when working on some web dev task. Now I know why this way is better.

oaiey 1y ago

Thanks for this post. Hackernews is sometimes awesome for learning opportunities like this. Never heard of the model, thankful for the article.

once_inc 1y ago

My mind immediately translated OKLCH into "Oklachroma".

Geenkaas 1y ago

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_issue_in_the_oklch_color_model/ https://www.reddit.com/r/css/comments/1jv5f0r/hue_is_an_issu...)

tzury 1y ago

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/ https://jsfiddle.net/oyw9fjda/ --- <style> .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); } </style> <div class="flat-gold"></div> <hr /> <div class="gradient-gold"></div> <hr /> <div class="conic-gold"></div> <hr /> <div class="premium-gold"></div>

fidotron 1y ago

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

rafram 1y ago
There’s no green shift at all in that example on my display. Could your calibration be off?
- fidotron 1y ago
  It's practically cyan, which is half way to green, not a lighter version of the blue to the left. This is on a MBP built in display. This totally has uses but it is not, as claimed, "there is no hue or saturation drift" given the hue has shifted so much.
- jibal 1y ago
  There certainly is ... run a color picker over it.
  - rafram 1y ago
    I opened the macOS Digital Color Meter and set it to "native values" mode. The second-to-last OKLCH swatch has a green component of 202, and the last has a green component of 226. The corresponding values in the HSL swatches are 203 and 227. Basically no difference at all.
    - crazygringo 1y ago
      > The corresponding values in the HSL swatches are 203 and 227. That is a gigantic difference. Those are totally different hues. Which are, of course, exactly the difference we're seeing.

Daub 1y ago

Does anyone know how this is different to the Munsell color space, which is also perceptually uniform? Edit: I would imagine that the only way to definine a perceptually uniform color space is by tons of user testing. This is how Munsell developed his color space… specifically presenting test subjects with pairs of identical and near-identical color swatches and asking if they could tell the difference. In this way, pairwise comparisom of similararity became the bedrock of color perception science.

DeusExMachina 1y ago
My understanding is that it's the same with higher resolution.
shinze 1y ago
Oklch is open source and part of the web standard, Munsell colors probably needs a licence to be used ?
itishappy 1y ago
The Munsell color system isn't really intended for displays, rather it's a collection of pigments, similar to Pantone. The transforms can get a bit weird (for example, since the swatches are discrete, there's no defined way to get intermediate colors). Munsell's ideas, particularly the axes of hue, value, and chroma, have absolutely influenced modern color spaces and are very much on display in the OKLCH space.

letmeinhere 1y ago

How does oklch compare to CIELCh(uv)? I've been using that seemingly similar system to pick uniform colors.

jedimastert 1y ago
Here's the original post explaining the color space. The ideas are very similar, OKLAB used a different white point https://bottosson.github.io/posts/oklab/#what-about-existing-models%3F https://bottosson.github.io/posts/oklab/#what-about-existing...

djoldman 1y ago

Creator of OKLCH on OKLCH: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/

adornKey 1y ago

The best axis for Lightness in my opinion is still the Gray-Scale (as used back in the day for black/white/grayscale TVs). The newer CIE colorspaces (CIECAM02 CIECAM16) seem to address the effect, that color-perception goes wild if you change background and illumination. Oklab seems to only make some fixed choice about how to include the chromatic part to lightness. I'm not so sure, how this definition of lightness is any better than grayscale (from 1931).

karmakaze 1y ago

Why is there no documented formula to convert to from this color space? A quick google and the best I could find is this Gist[0]. Searching for Oklab has a Wikipedia page[1]. [0] https://gist.github.com/dkaraush/65d19d61396f5f3cd8ba7d1b4b3c9432 https://gist.github.com/dkaraush/65d19d61396f5f3cd8ba7d1b4b3... [1] https://en.wikipedia.org/wiki/Oklab_color_space https://en.wikipedia.org/wiki/Oklab_color_space

shrx 1y ago
It looks to me that all the "magic" is in the matrices used for conversion between Oklab and sRGB. The final conversion between Oklab and Oklch is trivial, and is documented in your linked Wikipedia article.
dwringer 1y ago
OKLCh is the same space as OKLab, it's just polar coordinates versus rectangular coordinates.

MontagFTB 1y ago

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

kevin_thibedeau 1y ago
Grays run along a diagonal axis of the RGB cube after stripping gamma off. A straight line through the cube will brush by it. This is enhanced when transitioning from a primary (green) to an opposite corner (magenta).

fcpguru 1y ago

some nice OKLCH resources: https://apps.apple.com/us/app/cone-color-picker-identifier/id1221305627 https://apps.apple.com/us/app/cone-color-picker-identifier/i... https://sindresorhus.com/system-color-picker https://sindresorhus.com/system-color-picker https://evilmartians.com/opensource/oklch-color-picker https://evilmartians.com/opensource/oklch-color-picker https://oklch.eerolehtinen.fi/ https://oklch.eerolehtinen.fi/ https://github.com/eero-lehtinen/oklch-color-picker https://github.com/eero-lehtinen/oklch-color-picker

snvzz 1y ago

HSV with extra steps?

deleted 1y ago

[deleted]

chrchr 1y ago

I added oklab to emacs's color module. I initially intended to use it to make better procedural themes, but I haven't gotten to that yet. In any case, emacs version 30 has color-oklab-to-xyz and color-xyz-to-oklab functions that work with the other functions in emacs's color module to convert to/from oklab colors.

gowld 1y ago

"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." The OKLCH lighter shade veers off into bright cyan! I don't see HSL getting grey on the dark side.

jrm4 1y ago

This is fantastic, can't wait to incorporate it into my web design classes stuff. Also, I do hope people begin to see the value of "designing toward intuition," I can't help but notice that efforts like these are exact opposite of what happened when (most of) the world forcibly converted to metric.

nairadithya 1y ago

Oklch is so cool, My website has a single hue colourscheme derived completely from the date so that every day is a new colour. https://adithyanair.com https://adithyanair.com

deadvoid 1y ago

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.