Question 1

What is a color space?

Accepted Answer

A coordinate system for color: axes, ranges, and a rule tying the numbers to measurable light. Human vision is trichromatic, with three types of cone cells (S, M, L), so three coordinates are the minimum to describe any color the eye can see. The same orange is rgb(255 128 0) , oklch(0.732 0.186 53) and XYZ [49, 36.7, 4.5] . A palette is a handful of chosen colors; a space is a way to write down any color at all.

Question 2

Color model or color space – what's the difference?

Accepted Answer

A color model is a shape for the numbers: RGB says three primaries, HSL says hue, saturation and lightness, CMYK says four inks. A color space ties a model to measurable light – which primaries, which white, which curve – so each set of numbers names exactly one color. rgb(255 0 0) is a different red in sRGB , Display P3 and Adobe RGB : one model, three spaces. Everyday usage calls both spaces – so does CSS's color-mix(in hsl, …) , and so does this catalog. A model without an anchor of its own borrows one: HSL and HSV here reshape sRGB, as in CSS.

Question 3

Which space should I actually use?

Accepted Answer

It depends on the task: storing and sharing images – sRGB , the web's default; designing palettes and gradients – OKLCH , where equal steps look equal; math on light (blending, blurring, 3D) – linear-light RGB ; shooting and grading video – your camera's log space, delivered in Rec. 709 or Rec. 2100 ; measuring how different two colors look – CIELAB or DIN99o . To see every space sorted by task, group the catalog by purpose .

Question 4

What should I use instead of HSL?

Accepted Answer

OKLCH . It keeps the same three controls – hue, chroma, lightness – but its lightness is trustworthy: in HSL , yellow at L=50 emits about 13 times the light of blue at L=50, so equal L doesn't mean equal brightness. In OKLCH it does. CSS supports oklch() natively.

Question 5

How do I convert hex to OKLCH?

Accepted Answer

Type or paste it into the color field at the top, say #ff8000 . Every space on the page shows that color at once; in OKLCH it reads 0.732, 0.186, 53, which CSS writes as oklch(0.732 0.186 53) . Each dossier's css tab gives the copyable form, and in code it's space.rgb.oklch(255, 128, 0) .

Question 6

Why do my gradients turn muddy in the middle?

Accepted Answer

Because they're computed in gamma-encoded sRGB, where averaging two colors' numbers produces darker, duller light than actually mixing their light would. Interpolating in OKLab avoids this; in CSS that's linear-gradient(in oklab, red, blue) . Every dossier's interpolate row draws the same blend through two spaces side by side, so you can see the difference before choosing.

Question 7

How do I convert S-Log3 or another camera log to Rec. 709?

Accepted Answer

Open your camera's log space, such as S-Log3 , LogC4 or Apple Log . In its conversion LUT block, choose Rec. 709 and your editor: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg and others. Your browser writes the .cube file. It is a technical conversion with no tone mapping: highlights above diffuse white clip, and the look is yours to add.

Question 8

What does “out of gamut” mean?

Accepted Answer

A color one space can describe but another – or your screen – can't show. A vivid Display P3 green doesn't exist in sRGB: convert it, and the numbers fall outside the valid range. The atlas keeps this visible: a ⚠ by the current color marks it outside the Limit you pick, Alt held over a plane or strip says which wider gamut a color there needs (P3, Rec. 2020), and out-of-range stretches ghost over a checkerboard.

Question 9

Why does print look duller than the screen?

Accepted Answer

A screen emits light; paper reflects what its inks don't absorb. Ink on paper reaches fewer vivid colors – saturated RGB blues, greens and reds fall outside it – so they print duller. Prepress converts through an ICC profile made for the press and paper, such as FOGRA39 for European coated stock or GRACoL in the US. This catalog's CMYK is the plain formula CSS uses for device-cmyk() without a profile – right for the numbers, not a proof of the print.

Question 10

Which color space should I export photos in?

Accepted Answer

For the web and for sharing, sRGB : browsers and phones assume it when a file carries no profile. Display P3 keeps more of a vivid scene on Apple and many Android screens, as long as the profile stays embedded. Send Adobe RGB when a print lab asks for it. Keep ProPhoto RGB for 16-bit editing: its gamut is so wide that 8-bit files band.

Question 11

Are conversions exact? Do round trips lose data?

Accepted Answer

Conversions are closed formulas, not lookup approximations, and round trips return within floating-point noise. The few exceptions are documented where they occur: OSA-UCS has no closed inverse, and atlas systems like Munsell interpolate between published grades. Output in rgb is never clamped: a color outside sRGB comes back below 0 or past 255, so clamp only when you display it. They are also checked: every space links the paper or spec it implements, values are tested against colorjs.io wherever the two overlap, and the camera logs against the Academy's official ACES transforms. formula-verification.md records what was checked against what – including a few places where the published papers themselves had errors. If the numbers differ from another library's, compare ranges: this one keeps each space's conventional ranges – RGB 0–255, Lab lightness 0–100, hue 0–360 – where many flatten everything to 0–1. Every card shows its ranges; in code they're space.oklch.range .

Question 12

Which of these can CSS write?

Accepted Answer

Natively rgb() , hsl() , hwb() , lab() , lch() , oklab() , oklch() , plus color() for Display P3, Adobe RGB, ProPhoto, linear sRGB and XYZ (D65 and D50). CSS's rec2020 is a pure 2.4 gamma, not the BT.2020 curve of this catalog's Rec. 2020 – the same numbers would name a different color. Each dossier's css tab writes the current color in copyable form; spaces CSS lacks ship as ICC profiles or LUTs instead.

Question 13

How do colors look to color-blind people?

Accepted Answer

Open View and pick a Vision : red-blind ( protanopia ), green-blind ( deuteranopia ) or blue-blind ( tritanopia ). The catalog redraws as that eye sees it, so you can check that the colors of a palette stay apart. About 1 in 12 men have a color vision deficiency, by the NEI's count .

Question 14

Where's Pantone, NCS, RAL?

Accepted Answer

Those are licensed products: their colors are defined by data the owners sell, not by published formulas – so there's no open math to implement, and redistributing their tables wouldn't be legal. Close relatives whose math is public are here: Munsell (its 1943 renotation is public record) and RAL Design (defined directly in CIELAB). Any system whose math was ever published belongs here; suggest one that's missing .

Tool	Spaces	Camera logs	Luma–chroma	sRGB	Toolkit	Size	Speed	Targets
color-space	205	31	16	0–255	`parse` `mix` `ΔE` `contrast` `CVD`	62 kB		JS, WASM, GL, LUT, ICC, OCIO, MCP, Figma, VS Code, CLI, web
culori	30	–	1	0–1	`parse` `mix` `gamut` `ΔE` `contrast` `CVD`	23 kB		JS
colorjs.io	51	–	–	0–1	`parse` `mix` `gamut` `ΔE` `contrast`	34 kB		JS, web
chroma-js	11	–	–	0–255	`parse` `mix` `ΔE` `contrast` `palettes`	17 kB		JS
@texel/color	16	–	–	0–1	`parse` `gamut` `ΔE`	9 kB		JS
colour-science	128	24	6	0–1	`ΔE` `CVD`	–	–	Python, LUT
ColorAide	77	–	–	0–1	`parse` `mix` `gamut` `ΔE` `contrast` `CVD` `palettes`	–	–	Python
colorspace (R)	9	–	–	0–1	`mix` `contrast` `CVD` `palettes`	–	–	R, web
OpenColorIO	57	11	–	0–1	`gamut`	–	–	C++, Python, GL, LUT, ICC
Bruce Lindbloom	22	–	–	0–1, 0–255	`ΔE`	–	–	web
oklch.com	9	–	–	0–255	`parse` `gamut`	–	–	web

An open atlas of Color Spaces

Display & web32

Cylindrical11

Perceptual65

Colorimetry & research25

Video23

Camera58

Print7

Usage

JavaScript

WebAssembly

Shaders

Video LUTs

ICC profiles

MCP server

Figma plugin

VS Code extension

Alternatives