OKLCH - A New Choice for Better Web Design

This post has been translated by DeepL . Please let us know if there are any mistranslations!

A new color space called OKLCH has emerged. Major frameworks like Tailwind CSS have already started adopting it, and modern browsers are supporting it. In this article, let's explore what OKLCH is, how it differs from existing color space methods, and why it was developed.

Evolution of Color Models

Limitations of the RGB Color Model

The RGB color model is designed to match how computer displays work and is the most widely used method in computer graphics and the web. It represents colors by combining values (0-255) from three channels: red, green, and blue. However, it has the following limitations:

Non-intuitive color manipulation: It's difficult to predict what color will result from RGB values. For example, try to guess what color rgb(128, 57, 198) represents!
Non-linear brightness: In RGB, brightness is calculated as the average or weighted average of the three channels, which doesn't align with human visual perception. For instance, pure blue (rgb(0, 0, 255)) and pure green (rgb(0, 255, 0)) have the same sum of RGB values, but green appears much brighter to humans.
Gradient issues: Gradients between RGB colors often show unwanted gray or dull colors in the middle. This problem is particularly noticeable in gradients between complementary colors (e.g., red→blue).
css
```
background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%);
```
Limited color gamut: It's confined to the sRGB color gamut, unable to utilize the wider color gamuts (like P3) that modern displays can represent.

Limitations of the HSL Color Model

HSL (Hue, Saturation, Lightness) is a more intuitive color model than RGB, but it still has several limitations:

Lack of perceptual uniformity: Like RGB, HSL's lightness (L) doesn't align with human visual perception. For example, different hues (H) with the same lightness (L) value may appear to have different brightness to the eye.
Saturation imbalance: The effect of saturation (S) varies depending on lightness (L). Saturation changes are barely noticeable in very dark or very light colors.
HSL - Blue (Hue: 240°)
Lightness: 10%
S=0%
S=50%
S=100%
Lightness: 50%
S=0%
S=50%
S=100%
Lightness: 90%
S=0%
S=50%
S=100%
Persistent gradient issues: HSL, like RGB, has the problem of dull middle colors in gradients.
Limited color gamut: HSL also operates within the sRGB color gamut, so it can't represent colors from wider color gamuts.

Evolution of Color Spaces: LAB, LCH, Oklab

New color space models have been continuously developed to overcome these limitations. To explain the detailed differences would require mathematical discussion, which I'll skip here.

LAB

CIE LAB (or CIELAB) is a color space developed by the International Commission on Illumination (CIE) in 1976. LAB is designed to match human visual perception and consists of three axes:

L: Lightness, 0 (black) to 100 (white)
a: Green-red axis, negative values for green, positive for red
b: Blue-yellow axis, negative values for blue, positive for yellow

LCH (CIELCh)

LCH is a transformation of the LAB color space into polar coordinates. Here, 'L' is the same lightness value as in LAB, 'C' is chroma (the distance from the a and b axes), and 'H' is hue (the angle of the a and b axes). LCH maintains the perceptual uniformity of LAB while allowing intuitive manipulation of color and chroma.

However, CIE LAB and LCH also have limitations. There's a distortion phenomenon in the blue region.

Oklab Color Space

Oklab is a new color space developed by Björn Ottosson in 2020, designed to overcome the limitations of CIE LAB. Oklab has the same structure (L, a, b) as LAB but uses a different color transformation method.

The developer says the "Ok" prefix is attached because this color model does an OK job...

What is OKLCH?

OKLCH is a color space designed to represent colors more closely to human visual perception. It's a transformation of Oklab into polar coordinates, maintaining all the advantages of Oklab while allowing intuitive manipulation of hue (H) and chroma (C). It can be seen as a combination of the advantages of CIELCh and Oklab.

Components of OKLCH

L (Lightness)
- Represents the brightness of a color, from 0 (black) to 1 (white) or 0% to 100%
- Aligned with human visual perception, so changes in value are perceived as equal levels of brightness change to our eyes
C (Chroma, saturation/color intensity)
- Represents the vividness or intensity of a color
- 0 is completely gray (achromatic), and higher values result in more vivid colors
- The maximum value varies depending on the display's color gamut (sRGB, P3, etc.), generally below 0.37
H (Hue)
- Represents the type of color, expressed as an angle from 0 to 360 degrees
- Red (0/360), yellow (90), green (140), blue (220), purple (320), etc., represented as angles around a full circle
A (Alpha, transparency)
- Optionally, transparency can be specified after a / as a value from 0 to 1 or 0% to 100%

These components operate independently of each other. Changing one value doesn't affect the others. This is one of the characteristics that solves a major drawback of existing color models like RGB or HSL.

Using OKLCH in CSS

css

/* Basic syntax */
color: oklch(L C H);
color: oklch(L C H / A);

/* Bright blue */
color: oklch(0.7 0.2 240);

/* Transparent yellow */
color: oklch(60% 0.25 90 / 80%);

/* Very vivid red (P3 color gamut) */
color: oklch(0.6 0.34 30);

/* Grayscale (chroma 0) */
color: oklch(0.5 0 0);  /* Medium gray */
color: oklch(0.8 0 0);  /* Light gray */
color: oklch(0.2 0 0);  /* Dark gray */

L values can be expressed as decimals (0~1) or percentages (0%~100%)
C values are generally expressed as decimals, with values below 0.37 safely represented on most displays
H values are expressed as angles from 0 to 360, and the unit (deg) can be omitted

Advantages of OKLCH

Perceptual uniformity: OKLCH is designed so that changes in values are perceived uniformly visually. For example, a 10% change in lightness feels like a similar level of brightness across all colors.

RGB
OKLCH
Intuitive color manipulation: In OKLCH, lightness, chroma, and hue can be adjusted independently. This makes creating color palettes or designing for accessibility much easier and more predictable.

HSL
0%
20%
40%
60%
80%
100%
OKLCH
0
0.05
0.1
0.15
0.2
0.25
Wide color gamut support: OKLCH supports not only sRGB but also wider color gamuts like P3 found in modern displays. The difference can be clearly felt on the latest mobile devices or high-end displays.
Consistent gradients: Using OKLCH, gradients between colors appear smooth and natural. It greatly reduces the dullness of middle colors or color banding issues commonly found in RGB or HSL.

RGB
OKLCH
Enhanced accessibility: Colors can be adjusted while maintaining consistent lightness (L) values, which is advantageous for accessibility design where luminance contrast is important. This makes it easier to create color combinations that meet WCAG accessibility standards.

Use Cases

Color Palette Generation

By adjusting the L, C, and H values of OKLCH at regular intervals, intuitive and consistent color palettes can be automatically generated.

css

/* Changing only the hue while maintaining the same lightness and chroma */
--primary: oklch(65% 0.2 240);  /* Blue */
--accent1: oklch(65% 0.2 30);   /* Red */
--accent2: oklch(65% 0.2 120);  /* Green */

/* Creating lightness steps while maintaining the same hue and chroma */
--primary-100: oklch(90% 0.2 240);  /* Very light blue */
--primary-500: oklch(65% 0.2 240);  /* Medium blue */
--primary-900: oklch(30% 0.2 240);  /* Dark blue */

Tailwind CSS v4

Tailwind CSS has upgraded its entire default color palette from RGB to OKLCH in version 4. This is particularly to provide more vibrant and rich colors on displays that support the P3 color gamut.

Conclusion

OKLCH is a color space tailored to human vision, overcoming the limitations of existing color models and enabling more intuitive and predictable color work. With various advantages such as wide color gamut support, smooth gradients, and enhanced accessibility, it's a new color space that should be adopted in modern web design and UI/UX fields.