OKLCH: Moving Past RGB for Defining Colors! 🐠

Meet OKLCH, the one color format to rule all other color formats. Find out what makes it so effective.

If we look at the types of color formats we use, the RGB color format has been popular in digital scenarios for many decades. It has universal support across our various screens, programming languages, and tools:

Any technical implementation being relevant for decades is quite a feat, especially for one revolving around color. RGB isn’t an exception.

Taking a few steps back, the biggest improvement with colors came in the quality of our screens. Modern displays support far more vibrant colors with brighter whites and darker blacks. Whenever you run into a TV or monitor or screen advertising HDR (or Dolby Vision) or Display P3, they are all friendly ways of saying that this is an advanced display capable of displaying more colors than ever before. The problem was that RGB and the 16,777,216 colors one could define with it couldn’t be used to display these more vibrant colors.

The following visual from Apple’s developer documentation highlights RGB’s limitation here:

Notice that the left half of the image is represented using the Display P3 color format and appears with really vivid colors. The right half of the image is represented using the RGB color format and appears a bit muted.

Beyond just RGB’s raw inability to represent more colors, it also falls short of common expectations we as developers have:

• Device dependent. The same color can look very different across different computer monitors, printers, and cameras.

• Limited perceptual uniformity. Equal numerical changes in RGB values do not correspond to equal visual changes in color. Small changes in RGB values can result in significant visual differences in some regions of the color space. This can make color manipulation a huge pain.

• Limited control over color attributes. It is challenging to independently control attributes like alpha, lightness, chroma, and hue in a way that makes sense.

• Color space conversions. Do you want to switch between RGB and other color values? Pfft! When working with RGB color spaces, converting between different color spaces (e.g., LCH, sRGB, Adobe RGB, ProPhoto RGB) will introduce color shifts and discrepancies.

For the longest time, we didn’t have a choice. There were convoluted workarounds. Newer color formats were introduced that addressed some (not all) of the shortcomings, like the HSL format, but none hit the mark appropriately. That is, until recently with the introduction of the OKLCH color format, which is part of the CSS Color Level 4 changes.

Meet OKLCH

The OKLCH (and related LCH) color format represents colors in a way that is more visually uniform compared to other color spaces like RGB or HSL. As with most color formats, each letter in the name stands for something. I have no idea what the OK stands for (maybe literally OK as in Okay?), but the LCH stands for Lightness (L), Chroma (C), and Hue (H) where:

• L (Lightness) represents the brightness or luminance of the color and ranges from 0 (completely black) to 100 (completely white). It indicates how light or dark the color appears.

• C (Chroma) represents the saturation or intensity of the color. It measures how far a color is from a neutral gray of the same lightness. Higher values of C indicate more vivid and saturated colors, while lower values approach gray.

• H (Hue) represents the type of color, such as red, green, blue, etc. It is measured in degrees around a color wheel, typically with red at 0 degrees, green at 120 degrees, and blue at 240 degrees. Hue tells you the dominant color in the mix:

The way to define a OKLCH color in CSS looks as follows:

We specify the oklch function and provide the values for lightness, chroma, and hue. There is an optional alpha value we can specify as well, but I didn’t show it in the above snippet. Now, all of these numbers may seem a bit arcane initially, but a number of great tools exist to make using OKLCH as easy as RGB. My favorite such tool is this awesome OKLCH color picker:

This picker allows us to visualize the RGB and OKLCH color spaces at the same time, so when we pick a color that is only available in the OKLCH color space, the fallback RGB value is displayed as well. This means we can easily accommodate the few browsers out there that don’t support the OKLCH format:

In this snippet, we specify the RGB version of the color first, followed by the oklch version. If the browser doesn’t support OKLCH, the second line will be silently ignored, with only the RGB version being active.

Conclusion

Despite being fairly new, browser support for the modern color formats like OKLCH turns out to be, very VERY good. With the fallback approach described above, you and I shouldn’t have any difficulty giving our users the ability to view vivid colors in a more natural, friendly way. To go deeper into the OKLCH format, the OKLCH in CSS article is a visually impressive and informative read.

If you want to reach out to me, reply to this newsletter, ping me on Twitter / X, or go to the forums like the good old days.

Cheers,
Kirupa 😁