color-space

162 spaces

Display & web19

Cylindrical9

Perceptual – modern12

Perceptual – CIE classic15

HDR & wide gamut11

Colorimetry & vision16

Video & broadcast15

Film & camera37

Appearance models15

Print & physical7

Specialty & research6

162 coordinate systems.

Web, print, photography, film, broadcast, art, science, and history. Canonical conversions, channels, gamut shapes, provenance, cited references, known limits. Convert any space to any other: rgb to oklch, slog3 to rec709, cct-duv to rgb.

  • Reference-tested
  • Conventional ranges
  • Public domain
import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.25, 180)  // any of 162 × 161 pairs

space.oklch.name    // 'oklch'
space.oklch.range   // [[0,1], [0,0.4], [0,360]]

// one space only – tree-shaken, 0.4-1.5 kB
import oklch from 'color-space/oklch.js'
oklch.rgb(0.65, 0.25, 180)
What is a color space?

A coordinate system for color: axes, ranges, and a rule tying the numbers to measurable light. The same orange is rgb(255 128 0), oklch(0.732 0.186 53) and XYZ [49, 36.7, 4.5] – the same color, written three ways. A palette is a handful of chosen colors; a space is a way to write down any color at all.

Which space should I actually use?

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.

The purpose grouping in the filter shelves the catalog the same way.

What should I use instead of HSL?

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

Why do my gradients turn muddy in the middle?

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. Every dossier's interpolate row draws the same blend through two spaces side by side, so you can see the difference before choosing.

What does “out of gamut” mean?

A color one space can describe but another – or your screen – can't show. A vivid Display P3 green simply doesn't exist in sRGB: convert it, and the numbers fall outside the valid range. The atlas keeps this visible: the pill next to the current color names the tightest standard gamut that holds it, and out-of-range stretches ghost over a checkerboard.

Why 162 spaces – isn't one enough?

Because each one fixed a real limitation of an earlier one, and the older ones are still in use. XYZ made color measurable (1931), Lab made differences comparable (1976), OKLab made screen steps look even (2020) – and along the way, broadcast, print and camera makers each needed encodings of their own. Grouping the catalog by era (in the filter) walks through the whole story.

Aren't most of these spaces dead?

Many are retired from daily use, but they still do quiet, real work. Archives still decode NTSC tapes; Cineon still opens the film scans of the '90s; PhotoYCC still holds family albums burned to PhotoCD. Reading old pictures takes the original math, and keeping that math available is part of what a reference is for. The history filter gathers them by era.

Where's Pantone, NCS, RAL?

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). The rule of thumb: if the math was ever published, it belongs in the collection.

Are conversions exact? Do round trips lose data?

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, atlas systems like Munsell interpolate between published grades, and rgb output clamps to the sRGB gamut – route through XYZ or linear RGB when you need values outside it.

Which of these can CSS write?

Natively rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), plus color() for Display P3, Adobe RGB, ProPhoto, Rec. 2020, linear sRGB and XYZ. Each dossier's css tab writes the current color in copyable form; spaces CSS lacks ship as ICC profiles or LUTs instead.

What are the 37 camera log spaces for?

A log curve packs a sensor's wide dynamic range into a small recordable code range, so highlights and shadows both survive. Every vendor ships its own: ARRI LogC4, Sony S-Log3, RED Log3G10. Footage is graded in log or through ACES, then delivered in Rec. 709 or Rec. 2100. Each log dossier exports the conversion as a .cube LUT your editor loads.

What makes a space HDR?

Its transfer function budgets code values for luminance far beyond a standard display's white. PQ addresses absolute levels up to 10,000 nits; HLG stays compatible with SDR broadcast; Rec. 2100 carries both. ICtCp and Jzazbz are their perceptual companions for grading and difference work.

Why do the numbers differ from other libraries?

Same colors, different conventions. This library keeps each space's conventional ranges – RGB 0–255, Lab lightness 0–100, hue 0–360 – where most libraries flatten everything to 0–1. Every card shows its ranges; in code they're space.oklch.range.

Why should I trust these formulas?

You don't have to take them on faith – everything here is set up to be checked:

  • every space links the paper or spec it implements;
  • values are tested against colorjs.io, an independent implementation, wherever the two overlap;
  • camera-log conversions are compared 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 turned out to have errors.

Why does red + green make yellow on screens, but mud in paint?

Screens add light: red and green light sum to yellow, which is how every RGB space works. Paint subtracts it: each pigment absorbs part of the spectrum, and mixing multiplies the losses, so the result darkens toward brown. Each arithmetic gets its own shelf here – additive RGB on one, subtractive CMYK and the painters' RYB on the other.

Where are viridis and the other colormaps?

They're close cousins, not quite color spaces. A colormap like viridis is a one-dimensional path drawn through a color space, made for painting data – so it lives one level above a conversion library. The connection is real, though: viridis was designed inside CAM02-UCS, chosen so its steps look even, and that space is here. To design your own, a straight line through OKLab is a good start.

Copied