CSS Color Models

CSS Color Models

CSS provides several ways to describe color, from familiar RGB values to perceptual color models such as Lab, LCH, Oklab, and OKLCH. Each model represents color using a different set of components or coordinates.

Understanding these models can help you choose colors, create smoother gradients, work with wide-gamut displays, and select a color format that is appropriate for a particular design task.

Color Models & Color Spaces

A color model describes a method for representing colors using components or coordinates. RGB uses red, green, and blue components, while HSL uses hue, saturation, and lightness.

A color space provides a defined interpretation and range of colors within a model. For example, sRGB, Display P3, A98 RGB, ProPhoto RGB, and Rec. 2020 are RGB-based color spaces with different color characteristics and gamuts.

RGB & sRGB

RGB represents colors by combining red, green, and blue components. CSS hexadecimal colors, named colors, and the rgb() function normally represent colors in the sRGB color space.

Each RGB component describes the contribution of one primary color. Combining the three components at different intensities produces other colors.

.example {
  color: rgb(0 136 204);
}

RGB is especially useful when working directly with red, green, and blue channel values or when matching colors from existing digital artwork.

HSL

HSL represents an sRGB color using hue, saturation, and lightness. Hue identifies the color around a circular hue scale, saturation controls the color intensity, and lightness controls how light or dark the color appears.

.example {
  color: hsl(200deg 100% 40%);
}

HSL can be convenient when adjusting colors because its components correspond to familiar concepts such as hue and lightness.

HWB

HWB represents an sRGB color using hue, whiteness, and blackness. Hue selects the base color, while whiteness and blackness control how much white or black is mixed with it.

.example {
  color: hwb(200deg 0% 20%);
}

Increasing whiteness moves the color toward white, while increasing blackness moves it toward black.

Lab

Lab represents color using lightness and two opponent color axes. The L component represents lightness, the a axis extends between green and red, and the b axis extends between blue and yellow.

.example {
  color: lab(60% 20 30);
}

Unlike sRGB-based color models, Lab is designed around human color perception and can represent colors outside the sRGB gamut.

LCH

LCH is a cylindrical representation of CIE Lab. Instead of the a and b axes, it represents color using lightness, chroma, and hue.

.example {
  color: lch(60% 50 40deg);
}

Chroma describes the distance from the neutral lightness axis, while hue describes the angle around that axis.

Oklab

Oklab is a perceptual color space that uses lightness and two opponent color axes. Like Lab, it uses rectangular coordinates, but its calculations were designed to improve perceptual uniformity.

.example {
  color: oklab(60% 0.1 0.1);
}

Oklab is useful for operations such as color interpolation where visually consistent changes between colors are important.

OKLCH

OKLCH is the cylindrical form of Oklab. It describes colors using lightness, chroma, and hue, making it easier to adjust those characteristics independently.

.example {
  color: oklch(60% 0.15 240deg);
}

Because OKLCH is based on Oklab, changes in lightness and chroma generally correspond more closely to perceived visual changes than comparable adjustments in HSL.

Wide-gamut Color Spaces

The color() function allows CSS to specify colors in predefined color spaces. This includes RGB spaces capable of representing colors beyond the traditional sRGB gamut.

The diagram above is a simplified comparison intended to illustrate that color spaces can cover different ranges of color. It is not a chromaticity diagram or a precise measurement of the boundaries of each gamut.

.example {
  color: color(display-p3 0 0.6 1);
}

The appearance of a wide-gamut color depends on the capabilities of the browser, operating system, and display.

Alpha Transparency

Alpha is not a separate color model. It is an additional component that controls the opacity of a color. An alpha value of 0 or 0% is fully transparent, while 1 or 100% is fully opaque.

.example {
  color: rgb(0 136 204 / 50%);
  background-color: oklch(70% 0.15 220deg / 0.75);
}

Modern CSS color functions commonly place the alpha component after a forward slash.

Choosing a Color Model

There is no single color model that is best for every task. RGB is useful when working directly with screen color channels, while HSL and HWB provide intuitive controls for adjusting sRGB colors. Lab and LCH provide perceptual and device-independent representations, while Oklab and OKLCH are useful when perceptually consistent color adjustments and interpolation are important.

The color() function provides access to predefined color spaces such as Display P3 when a design needs colors outside the sRGB gamut.