This article mentions a notable limitation of the HSL colour model:
> Perceived brightness is not at all uniform at equal starting points, it depends on the hue, as well as the saturation.
…but it doesn't mention an (under-discussed) solution available: using a better colour model. OKLCH uses similarly understandable coordinates, "chroma" being roughly the same concept as "saturation", but is designed to avoid just this kind of problem. That is, if you change the "hue" coordinate, you can reasonably expect the perceived lightness and chroma of the resulting colour not to change. Where such a colour does not exist, e.g. a blue with the same lightness and chroma as #FFFF00 yellow, it's simply out of gamut.
There's a colour picker web app[0] that shows the boundaries of the space along with smaller spaces like sRGB, and it's helpful for getting a feel for it. It also links to a post[1] laying out the reasons to use OKLCH in web projects (it's now supported by all three major engines), and the post[2] introducing OKLAB (same space, different coordinate system) is heavy on technical details.
Thank you for sharing. I've published a small case-study[0] working with OKLCH with Angular Material which is a large UI library for the Angular framework.
Edit: What I find particulary difficult with OKLCH is sharing it across projects (think Android, iOS, and Web). I have tried figuring out solutions in Style Dictionary where I could generate colors and manually convert them to Hex or HSL for other platforms but the solution needs a fair amount of complexity that I am not willing to work with.
This is great. I keep making attempts trying to understand CIELAB and similar, with perceived brightness as my main concern. OKLAB looks like it’s exactly what I need.
oklch.com is an absolutely fantastic resource, thank you for sharing it.
I was able to see how limited our devices are when it comes to high chroma colors and I was only able to select purple. We are fooling ourselves and our users if we keep using HSL and think it’s acceptable.
Nice that it tells you that some colour is not available in your current gamut but it is in e.g P3... which reminded me that my monitor is P3-able but I forgot to set the proper profile!
I realized belatedly that it's pretty easy to memorize by heart the RGB hex codes of the most common colors by deriving them from basic color theory. For example, what's the hex code for yellow? Well yellow is the complementary color of blue, and so hex(yellow) is just the ones' complement of hex(blue)=#0000FF, i.e, #FFFF00
Likewise, cyan is the complementary color of red, so hex(cyan) is the ones' complement of hex(red)=#FF0000, i.e. #00FFFF. This hex code also makes clear that cyan is produced by mixing equal amounts of green and blue light.
what about azure? azure is when you take cyan and and 'de-emphasize' its green component. So you just halve the green part of its hex code, to get #0080FF. If you instead halve the blue part, you get #00FF80 (spring green)
likewise, orange is when you take yellow (#FFFF00) and halve its green component, so: #FF8000.
And so on. Not every common color can be derived in this way, but you can go very far.
Realistically you do not want to use super-pure colors like this for everything. It's the visual equivalent of shouting everything at the top of your lungs. Pull back from those FFs and give yourself some room for nuance.
Apologies if this sounds completely defeatist, but wouldn’t it be better to just mostly get rid of colors in product design? That is, yes, you absolutely want to use color for branding and recognizability, but given the fact that widely deployed color models and accessibility metrics do not completely reflect the reality of human color perception, using them to convey information is just not worth the trouble.
Again, there are exceptions to everything, but WCAG 2.1 says UIs shouldn’t fully rely on color to convey information (please correct me if I am wrong), the same goes for icons.
I can see how other sectors and industries will treat this differently (think color bands on resistors or topographical maps), but for me, creating a SaaS product with a focus on accessibility, I have almost completely given up on this topic.
Charts, statistics and so on are way easier to make accessible when using good old HTML tables.
The increase in product quality is marginal when optimizing for color.
Such wealth of knowledge, hidden beneath the dark patterns of Medium. Sad, I'm the target audience but as soon as I saw the Medium nag screen, I'm out.
I'm a colour blind graphics programmer in game development. It's definitely been seen more as a weird quirk than an issue at work and people have no problem helping when I ask for clarification about something colour coded.
I've had a pair of Enchroma glasses for at least 3-4 years, and I was just at the eye doctor preparing to get another pair. They've been quite a help, especially while reading plots prepared by folks who aren't familiar with color blindness.
I’ve been tested for a similar product, these things have been around in various forms for many years now. The results were I was too hopeless a case for any real benefit.
I’m also skeptical, as a colorblind man, when the “before” and “after” photos on that website look different. So it’s already marketing hokum.
And it’s apparently still a disability that it’s 100% acceptable to laugh at, which is getting to be a rather short list.
I also thought this would have to do with various deficiencies in color perception. I suppose the tips could still be useful, but not quite the same thing!
> Perceived brightness is not at all uniform at equal starting points, it depends on the hue, as well as the saturation.
…but it doesn't mention an (under-discussed) solution available: using a better colour model. OKLCH uses similarly understandable coordinates, "chroma" being roughly the same concept as "saturation", but is designed to avoid just this kind of problem. That is, if you change the "hue" coordinate, you can reasonably expect the perceived lightness and chroma of the resulting colour not to change. Where such a colour does not exist, e.g. a blue with the same lightness and chroma as #FFFF00 yellow, it's simply out of gamut.
There's a colour picker web app[0] that shows the boundaries of the space along with smaller spaces like sRGB, and it's helpful for getting a feel for it. It also links to a post[1] laying out the reasons to use OKLCH in web projects (it's now supported by all three major engines), and the post[2] introducing OKLAB (same space, different coordinate system) is heavy on technical details.
[0]: https://oklch.com/
[1]: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
[2]: https://bottosson.github.io/posts/oklab/