OKLCH - A new choice for better web design

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

There's a new color space called OKLCH, and major frameworks like Tailwind CSS have already started to adopt it, and modern browsers are supporting it. in this article, we'll explain what OKLCH is, how it differs from existing color spaces, and why it came about.

evolution of color models

Limitations of the RGB color model

The RGB color model is the most widely used in computer graphics and on the web because it was designed to match the way computer displays work. it uses a combination of values (0-255) from the three channels of red, green, and blue to represent colors, but it has limitations, including

unintuitive color manipulation: It's hard to predict what color you'll get by looking at RGB values. for example, try to guess what color rgb(128, 57, 198)is!
non-linear brightness: In RGB, brightness is calculated as an average or weighted average of the three channels, which doesn't match human visual perception. for example, pure blue (rgb(0, 0, 255)) and pure green (rgb(0, 255, 0)) have the same sum of RGB values, but the human perception is that green is much brighter.
gradient issues: Gradients between RGB colors often have unwanted gray or muddy colors in the middle. This is especially true for gradients between complementary colors (e.g., red to blue).
css
```
background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%);
```
limited color gamut: Limited to the sRGB color gamut, unable to take advantage of the wider color gamut (such as P3) that modern displays are capable of expressing.

Limitations of the HSL color model

While HSL (Hue, Saturation, Lightness) is a more intuitive color model than RGB, it still has some limitations.

lack of perceptual uniformity: The brightness (L) of HSL does not match human visual perception as well as RGB. for example, using the same brightness (L) value for different colors (H) can result in different visible brightnesses.
saturation imbalance: The effect of saturation (S) varies depending on the brightness (L). in very dark or very light colors, the change in saturation is barely noticeable.
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, suffers from the same problem as RGB, where the middle colors in a gradient appear washed out.
limited color gamut: HSL also works within the sRGB color gamut, so it can't represent colors from a wider color gamut.

evolution of color spaces: LAB, LCH, and Oklab

to overcome these limitations, new color space models have been developed over time. to explain the differences in more detail, we'd have to get into the math, which we won't do 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 numbers are green, positive numbers are red
b: Blue-yellow axis, negative numbers are blue, positive numbers are yellow

LCH (CIELCh)

LCH is a conversion of the LAB color space to a polar coordinate system. where 'L' is the same brightness value as LAB, 'C' is saturation (Chroma, distance between the a and b axes), and 'H' is hue (angle between the a and b axes). LCH allows for intuitive manipulation of color and saturation while maintaining the perceptual uniformity of LAB.

however, both CIE LAB and LCH have their limitations. they suffer from distortion 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 as LAB (L, a, b), but the way it converts colors is different.

according to the developers, the prefix Ok is because this color model does OK things...

What is OKLCH?

OKLCH is a color space designed to represent colors more closely to human visual perception. It is a conversion of Oklab to a polar coordinate system that allows for intuitive manipulation of hue (H) and saturation (C) while retaining all the benefits of Oklab. it can be thought of as a combination of the best of CIELCh and Oklab.

Components of OKLCH

L (Lightness)
- represents the brightness of the color, from 0 (black) to 1 (white) or 0% to 100%
- it is geared towards human visual perception, so that a change in value actually feels like the same level of brightness change to our eyes.
C (Chroma, Saturation/Intensity of Color)
- represents the vibrancy or intensity of the color.
- a value of 0 is completely gray (achromatic), and higher values result in more vivid colors.
- the maximum value varies depending on the color gamut of the display (sRGB, P3, etc.), and is typically 0.37 or less.
H (Hue, Color)
- indicates the type of color, expressed in degrees from 0 to 360 degrees.
- it is expressed as red (0/360), yellow (90), green (140), blue (220), violet (320), and so on, going around the angle once.
A (Alpha, Transparency)
- optionally, / can be followed by to specify a transparency from 0 to 1 or 0% to 100%.

these components work independently of each other. changing one value does not affect the other. this is one of the main drawbacks of traditional color models like RGB or HSL.

Using OKLCH in CSS

css

/* 기본 구문 */
color: oklch(L C H);
color: oklch(L C H / A);

/* 밝은 파랑 */
color: oklch(0.7 0.2 240);

/* 투명한 노랑 */
color: oklch(60% 0.25 90 / 80%);

/* 매우 선명한 빨강 (P3 색 영역) */
color: oklch(0.6 0.34 30);

/* 회색 계열 (채도 0) */
color: oklch(0.5 0 0);  /* 중간 회색 */
color: oklch(0.8 0 0);  /* 밝은 회색 */
color: oklch(0.2 0 0);  /* 어두운 회색 */

L values can be expressed as decimals (0-1) or percentages (0%-100%).
C values are typically expressed as decimals, with values of 0.37 or less being safe for most displays.
H values are expressed as degrees from 0 to 360, where the units (deg) can be omitted.

Advantages of OKLCH

perceptual uniformity: OKLCH is designed so that changes in values feel visually uniform. for example, a brightness value of 10% makes all colors feel similarly bright.

RGB
OKLCH
intuitive color manipulation: In OKLCH, you can adjust brightness, saturation, and hue independently. this makes creating color palettes and accessible design 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 the wide color gamut of modern displays like P3. you can really see the difference on the latest mobile devices or high-end displays.
consistent gradients: With OKLCH, gradients between colors are smooth and natural. this greatly reduces the muddiness and color banding in the middle colors that is common with traditional RGB or HSL.

RGB
OKLCH
improved accessibility: colors can be adjusted while keeping the brightness (L) value constant, which is beneficial for accessible designs where brightness contrast is important. this makes it easier to create color combinations that meet WCAG accessibility standards.

use cases

creating color palettes

By adjusting OKLCH's L, C, and H values at regular intervals, you can automatically generate intuitive and consistent color palettes.

css

/* 동일한 밝기와 채도를 유지하면서 색상만 변경 */
--primary: oklch(65% 0.2 240);  /* 파랑 */
--accent1: oklch(65% 0.2 30);   /* 빨강 */
--accent2: oklch(65% 0.2 120);  /* 초록 */

/* 동일한 색상과 채도를 유지하면서 밝기 단계 생성 */
--primary-100: oklch(90% 0.2 240);  /* 매우 밝은 파랑 */
--primary-500: oklch(65% 0.2 240);  /* 중간 파랑 */
--primary-900: oklch(30% 0.2 240);  /* 어두운 파랑 */

Tailwind CSS v4

In v4, Tailwind CSS upgraded the entire default color palette from RGB to OKLCH. this is to provide more vibrant and rich colors, especially on displays that support the P3 color gamut.

the bottom line

OKLCH is a color space tailored to the human eye that overcomes the limitations of traditional color models and makes working with color more intuitive and predictable. With its wide gamut support, smooth gradients, and improved accessibility, it's a new color space that modern web design and UI/UX should consider adopting.