⬅ Back home

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

All posts

Case: Improving task management and note taking for personal use
Contextual Use Scenarios: your favorite UX design driver
Some notes about dark themes
Cito Custom Properties
Cito Theme Controller
Perceived lightness
Atrophy
Strategic misrepresentation
Wrong problem