Color picking Oklch for mortals – Hugo Daniel

-->

Skip to main content

Complicated things

Some people really like complicated things, either because it makes them feel smart(er) or because it can be used as a flex for skill (or a masqueraded impression of skill), or because whatever l33tz0r reason.

Oklch is one such thing, it is complicated (at least for me), and screw it i'm fine with good old #hexcodes and coder colors everywhere. But the design community in social networks and other loud mediums embraced Oklch like it was the last coca-cola in the desert, if you are not using it you are outdated and do not have enough skillz.

To get a feel of how mind bending Oklch is, go ahead and play around with the (official?) Oklch color picker in https://oklch.com/ and then get back here if you are still in the mood.

Truth is there's actually something useful here in Oklch, and in this post I'll try a top-down approach to make it evident.

ELI5 Oklch

I am a passionate color picker creator, and I happily went down this Oklch rabbit hole, reading specs and trying to understand the matricial nature of colors in technical blog posts. A couple of years have passed, those ideas have matured, and here we go again.

Perceptual is key here, it means if you set the Lightness to 60% in Oklch, the subsequent colors you chose will all look perceptually 60% bright to a human being regardless of what color you pick.

This is of course limited by our ability to see colors in dark situations or in very bright situations, the amount of colors we can perceive changes drastically in different lighting scenarios, and this is what Oklch exposes to us.

The perception aspect of picking colors.

WTF is Chroma?

In this perceptual scenario where you can see different amounts of colors in different lighting values I like to think of chroma as the "amount of color".

If you like to be a bit more technical, then think of it as the amount of color if you remove the grayscale from it. How much color is left if compared to white, gray or black?

This varies with your monitor, some monitors can display more colors than others, Apple supports a large amount of colors, others support a bit less and others way more. If you are a developer you can check the range available in browsers using this media query.

When we are in perception land the term "chroma" is used, and in our perception "the amount of color" (chroma) is 0 when the Lightness is full back (we can't see colors in pitch black), and also the amount of color is 0 when the Lightness is full white (we can't see colors in full max lightness), then for the values in the middle of black and white the amount of color we can see varies, in a perfect lighting scenario we can see the maximum amount of color possible.

Chroma also varies with the color itself (hue), our eyes are amazingly well trained to see a lot of greens in some lighting scenarios, so we have a lot of chroma to chose from in greens when the light is good.

In the land of sight the three-eyed man is king

That's what LCH stands for: Lightness (how much light?), Chroma (how much color?), Hue (how many colors?) we can see at each of these values.

The "Ok" is just a technical feature that comes from the base work Oklch sits on top of (Oklab color space as the base for this representation). Essentially it means things are perceptually uniform, so we can move any one of the L,C,H components while the other two actually hold steady, even as we drift across the range.

Enhancing the classic color picker

Coming from a coder perspective, the thing that attracts me the most is not in exposing all of the Oklch features all at once, but instead on how to enhance and blend them in a familiar color picker.

The classic color picker

A hue wheel and a triangle:

In the classical hex color scenario I'm a huge fan of the triangle as a picker tool because it tells the story of how we go from the fully saturated color (in the right cusp of the triangle) up to either white (top left) or black (bottom left) using its edges, and in the body of the triangle all the values in between.

It logically splits nicely the amount of shades and tints we have for each color.

Unfortunately these logic parts don't always hold when we deal with the human eye and its curves and discontinuities that naturally arise from biological perception.

Next up I am going to cram Oklch into this canonical color picker, in an attempt to expose the perception axis that comes with the former while also retaining the familiarity of the latter.

Adaptations

I don't want to bring in everything at once, the idea is to keep the spirit of the color picker but with slight changes that are useful when dealing with the new set of tools that Oklch gives us.

Hue wheel

The amount of colors we see is not the same for all colors, and it varies with the lighting, to make this stand out, I am adapting the color wheel that typically represents the hue to also show the amount of...