The CSS color spaces and functions developers actually choose between — sRGB, Display-P3 and wide gamut, HSL and HSV, OKLCH and OKLab — what each one models, its gamut and clipping behavior, real syntax examples, and when to prefer it.
Every CSS color is a coordinate in a color space, and the space decides how the numbers behave: sRGB clamps channel by channel, HSL bends the same gamut into a readable cylinder, and OKLCH keeps lightness perceptually even across hues. Author in sRGB forms for compatibility, step up to display-p3 on wide-gamut panels, and generate palettes in OKLCH so tints and shades stay balanced.
The device RGB space every default CSS color lives in — about 35% of the visible gamut, with channels that clamp individually when out of range.
color(srgb 0.04 0.41 0.85)
The compatibility floor: every browser, file format, and design tool speaks it.
sRGB as red, green, and blue channels, each 0-255 or 0%-100%; out-of-range channels clamp per channel.
color: rgb(9 105 218);
Exact channel control with slash alpha; supported everywhere.
Hex notation for the same sRGB channels; 3-, 4-, 6-, and 8-digit forms, with the 8-digit form carrying alpha.
color: #0969da;
Design handoff and codebases — the same color as rgb(9 105 218).
148 CSS keywords that resolve to fixed sRGB values, plus currentcolor and the system colors.
color: rebeccapurple;
Readable prototypes; currentcolor for icons that track text.
sRGB with the gamma curve removed — raw linear-light values for blending and lighting math.
color(srgb-linear 0.003 0.14 0.7)
Shaders, canvas compositing, and color science, not authored UI values.
Display-P3 & wide gamut
The wide-gamut profile behind modern Apple and HDR panels — roughly 45% of visible color versus sRGB's 35%.
color(display-p3 1 0 0)
Vivid reds, greens, and cyans sRGB cannot express; Baseline since 2023.
Adobe RGB (1998): wider greens than sRGB, common in print-adjacent ICC profiles.
color(a98-rgb 0.49 1 0.26)
Matching Adobe-tool colors; UI work targets display-p3 instead.
Kodak's ultra-wide photo gamut — so wide that part of it encodes imaginary colors no physical light can produce.
color(prophoto-rgb 0.71 0.33 0.06)
RAW and photo-editing pipelines only.
ITU-R BT.2020, the UHD/HDR video gamut — about 75% of CIE; consumer displays cover only slices of it.
color(rec2020 0 1 0)
HDR video assets and future-proofing, not present-day UI.
CIE XYZ, the device-independent space every color conversion passes through; xyz aliases xyz-d65.
color(xyz 0.2 0.32 0.95)
Conversion glue and color science; rarely hand-authored.
Reports the display's gamut tier: srgb, p3, or rec2020.
@media (color-gamut: p3)
Gate wide-gamut upgrades behind the display, with an sRGB base style.
HSL & HSV
Cylindrical sRGB: hue angle plus saturation and lightness percentages. Same gamut and same clipping as rgb().
color: hsl(258 100% 50%);
Single-hue tweaks that humans can read; lightness is not perceptual.
Hue mixed with whiteness and blackness amounts — tints and shades as plain percentages.
color: hwb(258 10% 20%);
Reading a color as 'this hue, softened this much'; all modern browsers.
Hue, saturation, value — the model behind Photoshop, Figma, and VS Code pickers. Not a CSS function.
HSV(258, 100%, 85%)
Translate picker readouts to hsl(); HSV(258, 100%, 85%) is hsl(258 100% 42.5%).
The pre-2018 comma syntax; hsla() is its alpha alias.
hsl(258, 100%, 50%)
Recognize it in old code; write space syntax with / alpha instead.
Modern hsl() with slash-separated alpha, as a percent or a number.
hsl(258 100% 50% / 40%)
Translucent overlays and hover states without extra elements.
OKLCH & OKLab
Perceptual lightness (0-1), chroma, and hue. Constant L keeps perceived brightness even across hues; excess chroma gamut-maps down instead of clipping.
color: oklch(0.68 0.19 260);
Palettes and design systems — the modern default. Baseline 2023.
OKLCH in Cartesian form: lightness plus a (green-red) and b (blue-yellow) axes.
color: oklab(0.68 -0.03 -0.19);
Color-distance math and interpolation; oklch() reads better for authored values.
CIELAB in polar form, D50 — the perceptual model before Oklab; hue lines drift and yellows read too light.
color: lch(52.2% 72.2 50);
Legacy perceptual syntax; prefer oklch() for new color work.
CIE L*a*b* with a D50 white point — the print and ICC world's reference space.
color: lab(52.2% 40.1 60);
Interop with print and design-tool values.
Blends two colors in a chosen space; the space picks the path between them.
color-mix(in oklch, red, blue)
Derived states — hovers, tints, borders. Baseline 2023.
Relative color syntax: convert a source color into OKLCH and rebuild its channels with calc().
oklch(from var(--brand) calc(l + 0.1) c h)
Perceptual lighten/darken of any theme color. Chrome 119+, Safari 18+, Firefox 128+.