CSS Color Functions Playground

Explore color-mix(), oklch(), oklab(), wide gamut colors, gamut mapping, and gradient interpolation

color-mix() Interactive Mixer

CSS Color 5

color-mix(in <color-space>, <color1> <p1>, <color2> <p2>) mixes two colors in a given color space. The color space affects the interpolation path.

Color 1
Color 2
Color Space
Result
Mix spectrum (0% to 100%)

oklch() Color Picker

Perceptually Uniform

oklch(L C H) — Lightness (0-1), Chroma (0-0.4), Hue (0-360). Unlike HSL, equal lightness values produce visually equal brightness across all hues.

Color Preview
Hue Wheel at current L/C
Chroma Ramp at current L/H
Perceptual Uniformity: Same L across hues
All swatches above have the same lightness (0.7) and chroma (0.15) but different hues. In oklch, they should appear equally bright.

oklab() Color Space Explorer

oklab(L a b) — Lightness (0-1), a-axis green-red (-0.4 to 0.4), b-axis blue-yellow (-0.4 to 0.4). The Cartesian counterpart of oklch.

Color Preview
a-b plane at current L

Wide Gamut Colors

The color() function allows specifying colors in wide gamut color spaces like display-p3 and rec2020. These spaces contain colors that sRGB cannot represent.

sRGB Red
color(srgb 1 0 0)
Display P3 Red
color(display-p3 1 0 0)
Rec2020 Red
color(rec2020 1 0 0)
sRGB Green
color(srgb 0 1 0)
P3 Green
color(display-p3 0 1 0)
Rec2020 Green
color(rec2020 0 1 0)
sRGB Cyan
color(srgb 0 1 1)
P3 Cyan
color(display-p3 0 1 1)
Rec2020 Cyan
color(rec2020 0 1 1)
P3 gamut check: Checking...
/* Feature detection for wide gamut */ @media (color-gamut: p3) { .vibrant { color: color(display-p3 1 0.2 0); } } /* Safe fallback pattern */ .accent { color: rgb(255, 50, 0); /* sRGB fallback */ color: color(display-p3 1 0.2 0); /* P3 if supported */ }

Gamut Mapping Visualization

When a color is outside a display's gamut, the browser must map it to the closest representable color. This process is called gamut mapping. Different strategies produce different results.

Out-of-gamut P3 colors mapped to sRGB
Original (P3)
Mapped to sRGB (browser handles)
/* CSS gamut mapping is automatic. When the display can't show a color, the browser maps it to the closest representable color. The CSS Color Level 4 spec defines the algorithm: 1. If in gamut → use as-is 2. If out of gamut → reduce chroma in oklch while keeping lightness and hue 3. This preserves perceived hue and brightness */

Color Space Comparison

Different color spaces have different gamuts (ranges of representable colors). Here's how they compare.

Gamut Size Comparison
sRGB
~35% of visible
Display P3
~50% of visible
Rec. 2020
~75% of visible
Red interpolation: sRGB vs oklch
sRGB interpolation (muddy middle)
oklch interpolation (vivid middle)
oklab interpolation
hsl interpolation

Gradient Interpolation

CSS gradients can interpolate in different color spaces using in <color-space>. This dramatically affects the visual result, especially for complementary colors.

Color 1
Color 2

Hue Interpolation Methods

For polar color spaces (oklch, hsl, hwb, lch), you can control the hue interpolation direction: shorter, longer, increasing, decreasing.

/* Hue interpolation keywords */ background: linear-gradient(in oklch shorter hue, red, blue); background: linear-gradient(in oklch longer hue, red, blue); background: linear-gradient(in oklch increasing hue, red, blue); background: linear-gradient(in oklch decreasing hue, red, blue);