L*a*b* color picker

Red/Green/Blue: // ()
RGB Hue/Saturation/Lightness: //
Lab Lightness/Chroma/Hue: //

About the tool

Let’s say you need to select a color palette with colors of different hue, but of similar lightness. What do you do?

Well, you could grab the nearest color wheel and select your colors there, but some color wheels have both purple and yellow on them -- colors of wildly different lightness. What do you do then?

What if you could measure how light a color looks relative to other colors, so you could find colors of similar lightness? And what if you could also measure how different a hue feels relative to other hues, so you could find colors which stand out the most, even though their lightness is the same?

Turns out that such measurements have been made, and they resulted in the construction of perceptually uniform color spaces: from the old CIE L*a*b* [1], to newer IPT [2], CAM16-UCS, and Oklab [3] (among others). For example, in CIE L*a*b* the colors of similar lightness all have the same L* value, and the Euclidean distance between two (a*, b*) coordinates is roughly proportional to how different those two hues feel.

So, how should you select a color palette? You should choose the lightness level you need, and then select points on a L*a*b* slice, as distant from each other as possible. The lightness can then be adjusted to get lighter or darker versions of the same color, if needed.

Above is a tool to do this, specifically using Oklab.

Note that the tool assumes that your monitor is properly calibrated to the sRGB color space, and its background is a room well lit with daylight. This may or may not be an accurate assumption.

References

  1. https://en.wikipedia.org/wiki/CIE_Lab

  2. https://scholarworks.rit.edu/theses/2858/

  3. https://bottosson.github.io/posts/oklab/