Back

Perceived lightness

A while ago I started to work on an idea of having a tool that would generate color schemes with equal perceived lightness out of the base color given. I figured out the required functions to check the perceived lightness, tested the available libraries for converting colors, and ...well, didn't get further than that.

It's not long since the last time I was researching for this topic, yet I still missed this brilliant site: https://oklch.com/

Such a nice tool. It is not 100% what I am looking for, but so much so that I will ditch my own idea for now. I still want to have the scales defined and I'd like to have some additional semi-automated assistance there.

Also the accompanied articles are worth of checking:

In addition, I also missed the whole spec about Oklab and Oklch and the discussion around it. For instance this: https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/

The crazy part is that it already works for latest browser versions! For some projects I might need to consider something like https://lightningcss.dev/ to handle target browsers that are not supported.

For design and design system color definitions this new approach is a no-brainer.

Update: 37 signals posted a reference use of oklch: Modern CSS patterns in Campfire.