Color and Color Spaces in CSS

Basic

CSS color is a value system, not just a collection of familiar swatches. The Color specifications define how CSS represents colors, how those colors are converted between supported spaces, how alpha participates in a color, and how colors are interpolated and gamut-mapped. This lesson is the primary owner for those color concepts.

This lesson deliberately does not become a background, border, shadow, compositing, accessibility-guideline, or user-preference lesson. Background and border painting belong to Backgrounds and Borders; detailed compositing and blending belong to the Masking, Clipping, Compositing, and Blending owner; user color preferences belong to Color Adjustment and responsive media-query work.

A color is a value, not a decoration

The color value can be used anywhere a property accepts <color>. The same value can describe text, a border, a background, or another color-bearing property. The property decides what is painted; the Color module defines the color value itself.

1
2
3

.title { color: rebeccapurple; }
.badge { border-color: rgb(80 120 220); }
.note { background-color: oklch(82% 0.08 85); }

Do not confuse the property with the color. color is a CSS property. rebeccapurple, rgb(...), and oklch(...) are color values.

?

Named and hexadecimal colors

Named colors are predefined keywords. Hexadecimal notation represents sRGB channel values compactly, with three-, four-, six-, or eight-digit forms. An eight-digit form includes an alpha component.

1
2
3
4

.a { color: navy; }
.b { color: #369; }
.c { color: #336699; }
.d { color: #336699cc; }

Hex notation is useful when you want a compact sRGB representation. It is not a separate color space from sRGB; it is another syntax for specifying sRGB components.

?

rgb() describes sRGB channels

The modern rgb() syntax accepts numeric or percentage channel values and an optional alpha after a slash. The space-separated form is the current syntax used throughout the Color specifications.

1
2
3

.accent { color: rgb(30 120 220); }
.soft { color: rgb(30 120 220 / 70%); }
.percent { color: rgb(12% 47% 86%); }

?

hsl() changes how you reason about sRGB colors

hsl() expresses an sRGB color using hue, saturation, and lightness. It is a different coordinate system for the same sRGB color model, not a claim that every equal lightness number looks equally bright to human observers.

1
2

.warm { color: hsl(25 80% 45%); }
.cool { color: hsl(210 80% 45%); }

HSL is useful when you want to reason about hue, saturation, and lightness. Its lightness value should not be treated as a perceptual-lightness guarantee.

?

Wide-gamut and perceptual spaces

CSS Color 4 adds color spaces beyond the narrow sRGB gamut, including Display-P3 and the Lab/LCH and OKLab/OKLCH families. These spaces let CSS represent colors and reason about them in ways that are not limited to sRGB coordinates.

1
2
3
4
5

.p3 { color: color(display-p3 0.9 0.2 0.1); }
.lab { color: lab(60% 70 50); }
.lch { color: lch(60% 80 40); }
.ok { color: oklab(65% 0.12 0.08); }
.oklch { color: oklch(65% 0.15 40); }

?

Lightness is not the same thing in every space

A percentage called lightness does not carry one universal meaning across CSS color spaces. HSL lightness is defined within HSL; Lab and OKLab have their own lightness dimensions. Compare values within their model instead of assuming that 50% in every function means the same visual result.

?

Alpha is part of a color value

Many CSS color functions accept an optional alpha component. Alpha expresses how much of the color contributes through transparency; it does not create a second color space. The exact visible result also depends on what the color is composited with, which belongs to the compositing model.

1
2

.overlay { background: rgb(20 40 80 / 0.6); }
.badge { color: oklch(70% 0.12 70 / 80%); }

?

Current color can be inherited

The currentColor keyword resolves to the element’s computed color value. It is useful when an outline, border, icon, or other color-bearing property should follow the text color without repeating the same literal color.

1
2

.link { color: oklch(55% 0.16 250); border: 2px solid currentColor; }
.icon { color: inherit; fill: currentColor; }

?

System colors are semantic color values

CSS also defines system color keywords such as Canvas and CanvasText. These represent user-agent or platform semantic colors rather than author-chosen RGB coordinates. They are useful when the intent is to participate in the user agent’s color conventions.

1
2

body { background: Canvas; color: CanvasText; }
button { color: ButtonText; background: ButtonFace; }

?

Interpolation can happen in a chosen color space

CSS Color defines interpolation rules for colors. The interpolation color space matters: a transition between two colors can follow different paths when interpolated in sRGB, Lab, OKLab, or another supported space. Hue interpolation also has defined methods in polar spaces.

?

Gamut mapping keeps requested colors usable

A color space can describe colors that a particular output gamut cannot reproduce. CSS Color defines gamut mapping so an out-of-gamut color can be mapped toward a displayable result. This is different from simply clipping every channel independently.

1
2

.wide { color: oklch(70% 0.35 40); }
.p3 { color: color(display-p3 1 0.2 0.05); }

When a color is outside the target gamut, the browser may need to map it. Do not assume that the serialized CSS value and the final displayed color are identical numeric coordinates.

?

Color 5 adds newer color tools

CSS Color 5 extends the color model with features including color modification functions, custom color spaces, contrast-color(), light-dark(), and device-cmyk(). These features are current Working Draft material, so treat them as developing rather than as interchangeable with the stable fundamentals.

1
2
3

.tone { color: color-mix(in oklch, red 30%, blue); }
.auto { color: light-dark(#222, #eee); }
.contrast { color: contrast-color(oklch(70% 0.2 40)); }

For curriculum purposes, learn the stable Color 4 model first. Use Color 5 features when you need them, and label their specification status clearly because the draft can change.

?

Color is not the same as color adjustment

A page’s preferred light or dark scheme, forced colors, and print color adjustment are defined by CSS Color Adjustment and media-query specifications. They are related to color, but they are not the core color-value model taught here. This boundary keeps the Color lesson focused and prevents repetition later.

1
2

:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) { /* user preference */ }

Likewise, contrast requirements from accessibility guidelines are not replaced by choosing a particular color function. A color space can help you reason about colors, but accessibility conformance remains its own standards problem.

A practical color-debugging method

When a color looks wrong, first identify the property and exact color value. Then identify the color space. Check alpha and what is behind the color. If the color is wide-gamut or otherwise outside the output gamut, consider gamut mapping. Finally check whether another mechanism—such as user color adjustment—is affecting the result.

?

The important ownership boundaries

Color owns the representation and processing of CSS colors. Values & Units owns general value grammar and units. Backgrounds and Borders owns where backgrounds and borders are painted. The Masking, Clipping, Compositing, and Blending lesson owns detailed compositing and blend modes. Color Adjustment and Media Queries own user preferences such as preferred schemes and forced colors. Keep these mechanisms connected in examples without making them competing lesson owners.

Stable versus developing color features

CSS Color Level 4 is a current CSSWG Editor’s Draft dated 30 September 2026. Color Level 5 is separate current draft work. The curriculum therefore keeps the Color 4 model as the foundation while labeling newer Color 5 capabilities as developing instead of presenting them as frozen fundamentals.

Quick review

You should now be able to distinguish color values from the properties that use them, choose an appropriate color notation, recognize the difference between sRGB and newer color spaces, reason about alpha and currentColor, understand interpolation and gamut mapping at a conceptual level, and keep Color 5 and Color Adjustment features in their proper ownership boundaries.