[Note] CSS Color Options: Why is OKLCH better ?

TLDR;

Use OKLCH over HSL/HSV/RGB/HEX because:

• Readable and Predictable: OKLCH is human-readable and offers predictable results for color transformations, unlike RGB or hex.

• Perceptual Lightness: OKLCH provides consistent perceived lightness, unlike HSL, which improves color modifications and accessibility.

• Palette Generation: Designers can define formulas to automatically generate color palettes, simplifying design systems.

Why is OKLCH better than other colors ?

Readable and Predictable (OKLCH vs HEX, RGB, OKLAB)

Comparing to other color options such as RGB and Hexadecimal, OKLCH, HSL (and OKLAB, HSV) is much more readable and predictable by the human brain if you are familiar with the cylindrical color model, hence making it convenient for color modification.

You can easily visualize the following cylindrical model in your brain and easily identify which component to change if you want a variant of the existing color. (for instance, to reduce the lightness of oklch(0.7 0.5 0.0) to 50% of the original, it will be oklch(0.5 * 50% 0.5 0.0))

(Read More on: OKLCH vs. RGB/Hex section of this blog post: OKLCH in CSS: why we moved from RGB and HSL)

And personally speaking I much prefer the OKLCH polar coordinate comparing to the cartesian coordinates by OKLAB, but you may have different preference…

Perceptual Lightness (OKLCH vs HSV, HSL)

Firstly, because perceptually speaking, HSL (HSV) is not visually uniform (deformed color space), if we keep the saturation and lightness/value value fixed and only changing the hue, to the human eye, the different colors from red to blue do not look uniformly distributed!

Below is a comparison between HSL and OKLCH (similar outcomes will apply to the comparison between HSL/HSV and OKLAB/OKLCH as well)

The problem of HSL can lead to problems such as shown below: changing only the “HUE” component of the button will lead to a contrast issue because the perceptual lightness of the “green vs purple” of the same lightness and saturation is different in HSV. As a result of the deformed color space, HSL (HSV) is bad for color modifications and color palette generation.

(If you are interested in the color science math behind this, you can check out this post: Björn Ottosson - OKLAB, and also check out OKLCH vs. HSL section of this blog post: OKLCH in CSS: why we moved from RGB and HSL)

Palette Generation (OKLCH vs HSL, HSV)

With the CSS Color 5, you can take one color, and change the individual component of the color format.

1
2
3
4
5
6
7
8

/* Original Accent Color*/
:root { --accent: oklch(0.7 0.14 113); }

/* Red variant of accent color, only changing the HUE, keeping LIGHTNESS and CHROMA unchanged */
.error { background: oklch(from var(--accent) l c 15);}

/* 10% lighter version, only changing the LIGHTENSS, keeping HUE and CHROMA unchanged */
.button:hover {background: oklch(from var(--accent) calc(l + 0.1) c h);}

(As previously stated in the “Perceptual Lightness” section, though HSL can also be benefited from this feature, the outcome is less predictable due to its deformed color space, hence many teams have asked the community to avoid HSL for design system palette generation)

You can use the folowing tool to generate/test your color palette:

(OKLCH Color Palette Generator / Contrast Testing: https://huetone.ardov.me)

(OKLCH Color Picker & Converter: https://oklch.com)

No Unexpected Hue Shift (OKLCH vs LCH)

I’m no color scientist so I’ll use the words from the blog post by Andrey:

LCH is a good format on top of the CIE LAB (Lab) space that was created to solve all the problems of HSL and RGB. It can encode P3 colors and, in most cases, produces predictable color modification results.

But LCH has one painful bug: an unexpected hue shift on chroma and lightness changes in blue colors (between hue values of 270 and 330).

All Color Options Available

(as of when this post is written)

Here’s a summary of color options available in CSS, including their advantages and the specified color models:

• Named Colors:

  • Quick and easy (to remember) for basic usage.

• Hexadecimal:

  • Compact representation;

  • Widely recognized in web design.

• RGB:

  • Direct control over color components;

  • familiar to many developers.

• HSL / HSV:

  • Intuitive for color manipulation based on human perception.

  • The difference between HSL and HSV can be found on this image found on Wikipedia: Fig. 1. HSL (a–d) and HSV (e–h).

• OKLAB/OKLCH:

  • Intuitive for users familiar with cylindrical color spaces, human readable;
  • maintains perceptual/visual uniformity
  • OKLAB,OKLCH are the perceptually/visually uniform version of LAB,LCH. The difference between LAB and LCH can be found at this image: Color Science Explained: Lab and LCH Color - Kwality Labels Inc)

• CSS Color Level 4 (Alpha / Opacity):

  • Modern syntax allows for easy handling of transparency, enhancing flexibility in design.

Below are their syntax and examples of usages:

Reference

• Björn Ottosson - OKLAB

• OKLCH in CSS: why we moved from RGB and HSL

• Tools

  • OKLCH Color Palette Generator / Contrast Testing: https://huetone.ardov.me

  • OKLCH Color Picker & Converter: https://oklch.com