Reference · Color spaces

Color spaces A map

What each space is for, how much color it holds, and how they connect, on one page. Each one links to the Learn article that explains it and the converter that turns it into another.

Spaces
9
Learn articles
15
Converters
18
  1. 01sRGB
  2. 02Linear sRGB
  3. 03HSL and HWB
  4. 04Display P3
  5. 05Rec. 2020
  6. 06Adobe RGB and ProPhoto RGB
  7. 07CIE XYZ
  8. 08CIELAB and LCH
  9. 09Oklab and OKLCH

At a glance

Every space, side by side

The white point and transfer function are those of CSS Color 4's predefined spaces.

The color spaces compared (table)
SpaceKindWhiteGamutTransferEven to the eyeIn CSS
sRGB RGB space D65 sRGB sRGB curve, close to gamma 2.2 No #rrggbb · rgb() · color(srgb r g b)
Linear sRGB RGB space D65 sRGB None (linear) No color(srgb-linear r g b)
HSL and HWB sRGB, rearranged D65 sRGB sRGB curve No hsl() · hwb()
Display P3 Wide RGB space D65 Display P3 sRGB curve No color(display-p3 r g b)
Rec. 2020 Wide RGB space D65 Rec. 2020 BT.2020 curve No color(rec2020 r g b)
Adobe RGB and ProPhoto RGB Working RGB spaces D65 · D50 Adobe RGB · ProPhoto Gamma 563/256 · gamma 1.8 No color(a98-rgb r g b) · color(prophoto-rgb r g b)
CIE XYZ Reference space D65 · D50 Every color None (linear) No color(xyz-d65 x y z) · color(xyz-d50 x y z)
CIELAB and LCH Perceptual space D50 Every color Cube root, built in Roughly; hue drifts in the blues lab() · lch()
Oklab and OKLCH Perceptual space D65 Every color Cube root, built in Closer, by design oklab() · oklch()

Gamuts

Side by side: how much color each one holds

The same three primaries, at the edge of each space, and the area each gamut covers.

Your screen shows about sRGB, so the three swatches in each row look nearly the same. On a Display P3 screen the middle ones are more vivid. Your screen covers Display P3: the middle swatches are more vivid than the sRGB ones, and the Rec. 2020 ones are shown as near as it can. Your screen covers Rec. 2020: each column is more vivid than the one before.

The strongest red, green and blue of each space (table)
PrimarysRGBDisplay P3Rec. 2020
Red color(srgb 1 0 0)Chroma 0.258 color(display-p3 1 0 0)Chroma 0.299 color(rec2020 1 0 0)Chroma 0.365
Green color(srgb 0 1 0)Chroma 0.295 color(display-p3 0 1 0)Chroma 0.369 color(rec2020 0 1 0)Chroma 0.468
Blue color(srgb 0 0 1)Chroma 0.313 color(display-p3 0 0 1)Chroma 0.323 color(rec2020 0 0 1)Chroma 0.383

Chroma is OKLCH's: how far a color is from gray. Each swatch is painted with the value under it; a browser without wide-color support paints its sRGB fallback instead.

46048052054056058060062070000.10.20.30.40.50.60.70.80.10.20.30.40.50.60.70.80.9
The CIE 1931 chromaticity diagram: the horseshoe holds every color of light the eye can see, and each triangle the colors an RGB space can make, by hue and saturation. The dot is the D65 white.
How much each gamut covers (table)
GamutArea in xy, against sRGBArea in u′v′, against sRGBShare of visible colors, in u′v′
sRGB1.00×1.00×33.3%
Display P31.36×1.26×41.8%
Adobe RGB (1998)1.35×1.17×38.8%
Rec. 20201.89×1.72×57.4%

These are areas on a flat diagram, with lightness left out. The 1976 u′v′ diagram spaces colors more evenly than 1931 xy, so its figures are the fairer comparison. How much a gamut adds in three dimensions is a different number: Gamut Volume: How Much Color a Wide Gamut Actually Adds

The spaces

One card each: what it is, where to read, what to convert

The values are the site's gold, #D3AF37, in each space; copy any of them.

Working RGB spaces

Adobe RGB and ProPhoto RGB

Photography and print working spaces; ProPhoto is wide enough to hold colors no screen shows.

White
D65 · D50
Gamut
Adobe RGB · ProPhoto
Transfer
Gamma 563/256 · gamma 1.8

The site's gold, written in it

  • Adobe RGB (1998)color(a98-rgb 0.78545 0.68035 0.26584)
  • ProPhoto RGBcolor(prophoto-rgb 0.67408 0.63343 0.26964)

Read

Convert

Reference space

CIE XYZ

The reference every other space is defined against, from the CIE standard observer: every conversion here passes through it.

White
D65 · D50
Gamut
Every color
Transfer
None (linear)

The site's gold, written in it

  • CIE XYZ (D65)color(xyz-d65 0.42882 0.44786 0.1)
  • CIE XYZ (D50)color(xyz-d50 0.45463 0.45457 0.07797)

Read

Convert

Perceptual space

Oklab and OKLCH

A newer perceptual space, designed to keep hue and lightness more even than CIELAB: the one to pick and adjust colors in.

White
D65
Gamut
Every color
Transfer
Cube root, built in

The site's gold, written in it

  • OKLaboklab(76.55% -0.00375 0.13842)
  • OKLCHoklch(76.55% 0.13847 91.55)

Read

Convert

Conversions

How a color gets from one space to another

Every route runs through linear light and, for most, CIE XYZ. These are the steps the site's converters take.

Conversion routes (table)
From and toRouteTry it
HEX OKLCHHex digits8-bit channelssRGB channels, 0 to 1Linear lightOKLabOKLCHHEX and OKLCH
HEX Display P3Hex digits8-bit channelssRGB channels, 0 to 1Linear lightCIE XYZ, D65Linear Display P3Display P3HEX and Display P3
Display P3 OKLCHDisplay P3Linear Display P3CIE XYZ, D65Linear lightOKLabOKLCHOpen it in the converter
HEX LabHex digits8-bit channelssRGB channels, 0 to 1Linear lightCIE XYZ, D65CIE XYZ, D50CIELABHEX and Lab
Lab LCHCIELABLCHLab and LCH
OKLab OKLCHOKLabOKLCHOKLab and OKLCH
Rec. 2020 Display P3Rec. 2020Linear Rec. 2020CIE XYZ, D65Linear Display P3Display P3Open it in the converter

Choosing

Which space for which job

Which space for which job (table)
JobSpaceWhyMore
Storing and sharing a colorsRGB hexEvery tool, file and browser reads it.HEX and RGB
Picking and adjusting interface colorsOKLCHLightness and chroma change the way they look, so scales and themes stay even.HEX and OKLCH
Showing more vivid color where the screen canDisplay P3, with an sRGB fallbackScreens that cover P3 show it; others show the fallback.Wide color in CSS
Measuring how different two colors lookCIELAB, with ΔE 2000The standard color-difference formula is defined on it.ΔE Metrics from CIE76 to CIEDE2000 and ΔEITP
Mixing colors and drawing gradientsOklab, or linear sRGB for lightBlends stay bright through the middle instead of passing through gray.Color Gradients and Interpolation
Defining one space in terms of anotherCIE XYZEvery space here is defined against it.CIE XYZ Explained
PrintCMYK, through an ICC profileInk depends on the press and the paper, so no single formula is right.CMYK and the Four-Color Printing Process

In CSS

Wide color, with a fallback

Two ways to use a color outside sRGB. A browser skips a declaration it cannot read, so the line before it stays.

One declaration, in OKLCH

/* A green that Display P3 screens can show and sRGB screens cannot. */
.accent {
  color: #00ba64;  /* older browsers: the nearest sRGB color */
  color: oklch(69.28% 0.23895 153.13);  /* the full color, fitted to the screen by the browser */
}

Only on screens that cover P3

.accent { color: #00ba64; }

@media (color-gamut: p3) {
  .accent { color: color(display-p3 0.1 0.75 0.35); }
}

The fallback, then the full color: on a P3 screen the second is more vivid. Color in CSS: Modern Color in the Browser

Read more

The Learn articles behind this map

Each space is explained in full in the Learn library; these are the articles, by topic.

The reference: CIE colorimetry

RGB spaces and screens

Models and perceptual spaces

In practice

Sources

Where this comes from

Every value here is computed by the site's color code, which is tested against the CSS Color 4 examples.