← Tools
Input Colour
Accepts HEX, rgb(), hsl(), hsv(), hwb(), oklab(), oklch(), lab(), lch(), color(space r g b), or CSS named colours.
From → To Conversion
Colour Preview
Input
Output
Gamut Status
sRGB: — P3: — Rec.2020: —
Colour Preview
Luminance & Contrast
Rel. Luminance
vs White
vs Black
Colour Difference (vs D65 White)
ΔE76
ΔE00
ΔEOK
All 18 Colour Space Values
Click any copy button to copy that value.
HEX
sRGB (0-255)
sRGB (0-1)
Linear sRGB
HSL
HSV
HWB
XYZ (D65)
XYZ (D50)
Lab (D50)
LCH (D50)
Lab (D65)
LCH (D65)
OKLab
OKLCH
Display P3
Adobe RGB
Rec. 2020
CIE 1931 Chromaticity Diagram
Spectral locus (grey), sRGB gamut triangle (gold dashed), D65 white point, input colour plotted at (x,y).
Gamut Comparison
Colour Harmonies
Tints & Shades
All Spaces Overview (Canvas)
Actions, Options & Export
Output Options
Gamut Mapping
When enabled, the converted result will be gamut-mapped before display.
Export

CSV includes all 18 space values. JSON includes full computed data. CSS exports custom properties for hex, rgb, hsl, oklab, oklch, and P3.

CAM16 Viewing Conditions

CAM16-UCS assumes an average surround, Yb=20, LA=64 cd/m², F=1.0, c=0.69, Nc=1.0. Adjust in code if your viewing conditions differ. ProPhoto RGB uses D50 illuminant; values are adapted via Bradford.

Standards & Guidelines
sRGB (IEC 61966-2-1:1999)

sRGB is the standard RGB colour space for the web, CSS, and most consumer displays. It uses the D65 illuminant and a piecewise transfer function (gamma ≈ 2.2). All CSS hex, rgb(), and hsl() values operate in sRGB.

Primaries: R(0.64, 0.33), G(0.30, 0.60), B(0.15, 0.06). White point: D65 (0.3127, 0.3290).

Display P3 (DCI-P3 with D65)

Display P3 extends sRGB by approximately 25% in gamut volume, primarily in greens and reds. Used by Apple displays, modern OLED panels, and HDR content. Supported in CSS via color(display-p3 r g b).

Rec. 2020 / BT.2020

ITU-R BT.2020 defines the colour space for UHD/4K/8K television. It covers approximately 75.8% of the CIE 1931 diagram — far wider than sRGB (35.9%) or P3 (45.5%). Supported in CSS via color(rec2020 r g b).

CIE 15:2004 — CIELAB & LCH

CIELAB (L*a*b*) is a perceptually uniform colour space defined by the CIE. L* = lightness (0-100), a* = green-red, b* = blue-yellow. CIE LCH is the cylindrical form: L* (lightness), C* (chroma), h (hue angle).

In CSS, lab() and lch() use D50 illuminant. This tool computes both D50 and D65 variants.

OKLab & OKLCH (Björn Ottosson, 2020)

OKLab improves on CIELAB with better perceptual uniformity, especially for hue linearity and lightness prediction. OKLCH is its cylindrical form. Both are used in CSS Color Level 4: oklab() and oklch().

OKLab routes through LMS cone space with optimised 3×3 matrices, producing uniform hue interpolation ideal for gradients and UI colour generation.

Adobe RGB 1998

Developed by Adobe Systems for print/photography workflows. Wider gamut than sRGB, especially in cyan-green region. Uses D65 white point and gamma 563/256 (≈ 2.2).

ProPhoto RGB (ROMM RGB)

Extremely wide gamut covering 91.2% of CIE 1931 — used in archival photography and ICC workflows. Uses D50 illuminant and gamma 1.8. Contains imaginary colours beyond human perception.

CIEDE2000 — Colour Difference

CIE 142-2001 defines ΔE00 with lightness, chroma, hue, and rotation corrections. ΔE00 <1 imperceptible, 1-2 expert-level, 2-5 noticeable, 5-10 large, >10 very large.

This tool also computes ΔE*76 (Euclidean in L*a*b*) and ΔEOK (OKLab Euclidean) for comparison.

CSS Color Level 4 / Level 5

CSS Color Level 4 introduces lab(), lch(), oklab(), oklch(), color(display-p3 ...), color(rec2020 ...), and hwb(). Level 5 adds relative colour syntax and colour functions.

All CSS-compatible outputs from this tool follow the Level 4 specification.

Formulas & Mathematics
sRGB Transfer Function
Encode (linear → sRGB):
if Clin ≤ 0.0031308:  Csrgb = 12.92 × Clin
else:  Csrgb = 1.055 × Clin1/2.4 − 0.055

Decode (sRGB → linear):
if Csrgb ≤ 0.04045:  Clin = Csrgb / 12.92
else:  Clin = ((Csrgb + 0.055) / 1.055)2.4
sRGB → XYZ Matrices
| 0.4124564  0.3575761  0.1804375 |
| 0.2126729  0.7151522  0.0721750 |
| 0.0193339  0.1191920  0.9503041 |

XYZ → sRGB (inverse):
|  3.2404542 −1.5371385 −0.4985314 |
| −0.9692660  1.8760108  0.0415560 |
|  0.0556434 −0.2040259  1.0572252 |

Bradford D65 → D50:
| 1.0479298  0.0229468 −0.0501922 |
| 0.0296278  0.9904344 −0.0170738 |
| −0.0092430  0.0150436  0.7521316 |
XYZ → CIELAB
f(t) = t1/3   if t > (6/29)3 ≈ 0.008856
f(t) = (903.3 × t + 16) / 116   otherwise

L* = 116 × f(Y/Yn) − 16
a* = 500 × [f(X/Xn) − f(Y/Yn)]
b* = 200 × [f(Y/Yn) − f(Z/Zn)]

D65: Xn=0.95047, Yn=1.00000, Zn=1.08883
D50: Xn=0.96422, Yn=1.00000, Zn=0.82521

LCH (cylindrical): C* = √(a*² + b*²), h = atan2(b*, a*)
OKLab (Ottosson 2020)
Step 1: Linear sRGB → LMS (M1):
| 0.8189330  0.3618667 −0.1288597 |
| 0.0329845  0.9293119  0.0361456 |
| 0.0482003  0.2643663  0.6338517 |

Step 2: Cube root: l′=∛l, m′=∛m, s′=∛s

Step 3: LMS′ → OKLab (M2):
| 0.2104543  0.7936178 −0.0040720 |
| 1.9779985 −2.4285922  0.4505937 |
| 0.0259040  0.7827718 −0.8086758 |

OKLCH: C = √(a² + b²), h = atan2(b, a)
Colour Difference Metrics
ΔE*76: √[(ΔL*)² + (Δa*)² + (Δb*)²]

CIEDE2000 (ΔE00):
Full formula with G, SL, SC, SH, T, RT.
ΔE00 = √[(ΔL′/SL)² + (ΔC′/SC)² + (ΔH′/SH)² + RT(ΔC′/SC)(ΔH′/SH)]

ΔEOK: √[(ΔL)² + (Δa)² + (Δb)²] in OKLab space
Euclidean distance in OKLab; simpler and often better-correlated with perception than ΔE76.
Gamut Mapping Methods
Clip (per-channel):
Each channel clamped to [0, 1]. Fast but can shift hue/chroma.

OKLCH Chroma Reduction:
Binary search in OKLCH: reduce chroma until the result is in [0,1]. Preserves lightness and hue; preferred for perceptual mapping.

In-gamut test:
XYZ → target space via inverse matrix → check all channels ∈ [−ε, 1+ε]
References & Citations

Colour Space Standards

[1] IEC 61966-2-1:1999 — Default RGB colour space — sRGB.

[2] ITU-R BT.709-6 (2015) — Parameter values for the HDTV standards.

[3] ISO 22028-3:2012 — Extended colour encodings for digital image storage (Display P3).

[4] ITU-R BT.2020-2 (2015) — Parameter values for ultra-high definition television.

[5] ISO 22028-2:2013 (ROMM RGB) — Reference output medium metric RGB colour space.

[6] Adobe Systems (1998) — Adobe RGB Colour Space.

OKLab & Perceptual Colour

[7] Ottosson, B. (2020) — A perceptual color space for image processing. bottosson.github.io/posts/oklab/.

[8] Ottosson, B. (2021) — OK, OKLCH. bottosson.github.io/posts/oklch/.

CIE Colorimetry

[9] CIE 15:2004 — Colorimetry (3rd Edition). Standard observer, illuminants, chromaticity.

[10] Smith, T. & Guild, J. (1931) — The C.I.E. colorimetric standards and their use.

[11] Sharma, G., Wu, W. & Dalal, E.N. (2005) — The CIEDE2000 Color-Difference Formula. Color Research & Application, 30(1), 21-30.

CSS Color Level 4

[12] W3C — CSS Color Module Level 4. www.w3.org/TR/css-color-4/.

[13] W3C — CSS Color Module Level 5 (Draft). www.w3.org/TR/css-color-5/.

General Resources

[14] Lindbloom, B. — brucelindbloom.com — Comprehensive colour mathematics and matrices.

[15] Poynton, C.A. (2012) — Digital Video and HD: Algorithms and Interfaces (2nd ed.).

[16] Fairchild, M.D. (2013) — Color Appearance Models (3rd ed.). Wiley.

About this tool

This tool implements 18 colour spaces (HEX, sRGB, Linear sRGB, HSL, HSV, HWB, XYZ D65/D50, Lab D50/D65, LCH D50/D65, OKLab, OKLCH, Display P3, Adobe RGB, ProPhoto RGB, Rec. 2020) with gamut mapping (clip & OKLCH chroma reduction), CIE 1931 chromaticity diagram, ΔE76/ΔE00/ΔEOK colour difference, colour harmonies, tints & shades, batch conversion, and bootstrap CI — entirely client-side (zero network). Not a substitute for calibrated ICC profile software.

Research & Visualization
Batch Conversion

Enter one colour per line (HEX, rgb(), hsl(), oklab(), oklch(), or CSS named). Results show all 18 space values for each colour.

Bootstrap Confidence Intervals

Bootstrap resampling of ΔE00 against random colours. Returns 95% CI for the mean ΔE00 from the input colour.

Research backend: 18 colour spaces · Gamut mapping · CIE 1931 chromaticity · ΔE76 · ΔE00 · ΔEOK · Colour harmonies · Tints & shades · Batch conversion · Bootstrap CI. All computation on-device.