Oklch in CSS: why we moved from RGB and HSL (2024)

The color picker these folks made is pretty good: <a href="https:&#x2F;&#x2F;oklch.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;oklch.com&#x2F;</a>

One reason to use oklch is - a better way for the automatic choice of palette.<p>For example, the page background and the text color can be adapted to match colors from a photo.<p>I am using oklch for the automatic choice of the background color on ClickHouse SQL UI: <a href="https:&#x2F;&#x2F;play.clickhouse.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;play.clickhouse.com&#x2F;</a> - when you run a query, the background automatically adapts for it.

Until users can&#x27;t modify the way images are displayed on the monitor (by adjusting settings on the monitor or in the operating system), and until all monitors are properly calibrated, this seems like an incomplete solution to the issues that arrise when representing color on a computer.<p>Imagine a design team and web development team both at the top of their game, ensuring perfect color matching to their manufactured product and trademarked logo using state-of-the-art tooling and technologies, including those in the linked post. I&#x27;d be surprised if a single consumer monitor correctly match the color on the website those teams created.<p>Even further, I suspect most web designers don&#x27;t even use calibrated monitors.<p>Maybe this would be useful for a design-centric service website?

&gt; Unlike rgb() or hex (#ca0000), OKLCH is human readable. You can quickly and easily know which color an OKLCH value represents simply by looking at the numbers. OKLCH works like HSL, but it encodes lightness better than HSL.<p>I don&#x27;t know about you, but I am much better at decoding separate RGB values (as in, including hex) than I am at decoding a single chroma value. What am I supposed to do with a chroma value, try to imagine a chart to place it on? Memorize the values of each color on the spectrum? I&#x27;m not saying it&#x27;s unreasonable to expect somebody to be able to learn this, but in my opinion it&#x27;s not very fair to say LCH is somehow <i>automatically</i> more readable than RGB.

&gt; I believe that format should meet the following criteria:<p>List doesn&#x27;t include &quot;the same color should look the same on all renderers&#x2F;browsers&quot;. One of the problems with CYMK (intended for print, not screen) is that screens render in RGB and each browser has it&#x27;s own algorithm for how to convert from CYMK to RGB. So if you have an image in CYMK and use that on the web, it looks different on different browsers. And people complain and then you need to explain to them &quot;convert it to RGB and use that, because this isn&#x27;t a problem with the site it&#x27;s a problem with the encoding not being meant for the site&quot;.

I&#x27;ve been using HSL for the last year or so but have definitely ran into the weird color modification issues the article mentions. I&#x27;ve always just dealt with it, but to reduce friction in something that has happened to me multiple times - consider me intrigued.<p>My only complaint for usability has nothing to do with oklch but at the time of writing it does not appear that vscode displays the colorblocks or selector for oklch, which just adds another tiny bit of a painpoint for me.<p>Either way, going to be using it in my current side project!

This is one of those &quot;do we really need to do this&quot; type of things. If you go and play with an OKLCH tool like this one, you&#x27;ll notice that the differences in the OKLCH vs RGB&#x2F;hex color are imperceptible: <a href="https:&#x2F;&#x2F;oklch.com&#x2F;#65.88,0.2097,41.29,100" rel="nofollow">https:&#x2F;&#x2F;oklch.com&#x2F;#65.88,0.2097,41.29,100</a>.