Pick a Colour
Spectrum & Hue
Color Wheel
HSL Sliders
RGB Sliders
Preview
#3B82F6
Colour Space Values
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 92.4%, 59.8%)
HSV
hsv(217, 76%, 96.5%)
HWB
hwb(217 23.1% 3.5%)
CIE XYZ
-
L*a*b*
-
LCH
-
OKLab
-
OKLCH
-
Luminance
-
CSS Name
—
Nearest CSS
—
Luminance Class
—
Warmth
—
Dominant Channel
—
WCAG Contrast Ratios
vs Black - -
vs White - -
CVD Simulation (Color Vision Deficiency)
- Protanopia
- Deuteranopia
- Tritanopia
- Achromat.
Colour Harmonies
Complementary · Analogous · Triadic · Split-Complementary · Tetradic
Tints & Shades (10 steps)
Gamut Graph (L* vs C*)
CIE L*a*b* lightness (vertical) vs chroma (horizontal). Current colour plotted.
Actions & Palette
Palette Builder
No swatches yet. Click “Add to palette” to start building.
Export Palette

JSON copies the full palette array. CSS copies :root custom properties. CSV downloads a file.

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

Standard RGB colour space — defined by ITU-R BT.709 primaries, D65 white point, and a specific non-linear gamma (piecewise: linear below 0.0031308, x1/2.4 above). The default colour space for web content, CSS, HTML, and Canvas 2D.

All colour values in this tool are sRGB unless otherwise noted. Conversions to CIE XYZ use the standard 3×3 matrix.

CIE 15:2004 — Colorimetry

Defines the CIE 1931 standard observer, illuminant SPDs, XYZ colour space, and CIELAB (L*a*b*). L*a*b* is the reference colour space for perceptual uniformity and ΔE calculations.

WCAG 2.2 — Contrast Requirements

1.4.3 Contrast (Minimum) — AA: Contrast ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text (≥18pt or ≥14pt bold).

1.4.6 Contrast (Enhanced) — AAA: ≥ 7:1 for normal text, ≥ 4.5:1 for large text.

Relative luminance formula: L = 0.2126R + 0.7152G + 0.0722B (linear sRGB). Contrast ratio = (Llighter + 0.05) / (Ldarker + 0.05).

OKLab & OKLCH (Ottosson 2020)

Björn Ottosson's perceptually uniform colour space using an LMS-based model optimised for hue linearity and lightness uniformity. Adopted by CSS Color Level 4 for oklab() and oklch() functions.

OKLab addresses well-known problems in CIELAB (blue-purple hue non-linearity, lightness prediction for saturated colours).

CIEDE2000 — Colour Difference

CIE 142-2001: CIEDE2000 (ΔE00) is the current recommended colour-difference formula. Includes corrections for lightness, chroma, hue, and a rotation term for the blue region.

Guideline: ΔE00 <1 imperceptible, 1–2 expert-only, 2–5 noticeable, 5–10 large, >10 very large.

CVD — Color Vision Deficiency Standards

Colour vision deficiency (CVD) simulation uses the Brettel, Viénot & Mollon (1997) model for dichromatic vision — projecting sRGB to the confusion plane for protanopia, deuteranopia, and tritanopia. Achromatopsia uses luminance-only conversion.

~8% of males and ~0.5% of females have some form of CVD. Designing for CVD accessibility requires testing contrast and distinguishability under simulated conditions.

CSS Color Level 4

W3C specification extending CSS colour notation to include hsl(), hwb(), lab(), lch(), oklab(), oklch(), and color() with named colour spaces (display-p3, rec2020, etc.).

EyeDropper API (WICG)

Web Incubator CG proposal (shipped in Chromium 95+). new EyeDropper().open() returns a promise resolving to {sRGBHex} — the colour under the cursor, sampled from the entire screen.

Formulas & Mathematics
sRGB ↔ CIE XYZ (D65)
sRGB Inverse Gamma (companding → linear):
if Csrgb ≤ 0.04045: Clin = Csrgb / 12.92
else: Clin = ((Csrgb + 0.055) / 1.055)2.4

Linear RGB → XYZ (D65):
|X| |0.4124564 0.3575761 0.1804375| |Rlin|
|Y| = |0.2126729 0.7151522 0.0721750| |Glin|
|Z| |0.0193339 0.1191920 0.9503041| |Blin|

XYZ → Linear RGB (D65):
|Rlin| | 3.2404542 −1.5371385 −0.4985314| |X|
|Glin| = |−0.9692660 1.8760108 0.0415560| |Y|
|Blin| | 0.0556434 −0.2040259 1.0572252| |Z|

sRGB Gamma (linear → companding):
if Clin ≤ 0.0031308: Csrgb = 12.92 × Clin
else: Csrgb = 1.055 × Clin(1/2.4) − 0.055
XYZ → CIELAB (CIE 15:2004)
f(t) = t1/3   if t > (6/29)3 = 0.008856
f(t) = (29/6)2×t/3 + 4/29   otherwise

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

D65 reference: Xn=0.95047, Yn=1.00000, Zn=1.08883

LCH (cylindrical):
C* = √(a*2 + b*2)
h = atan2(b*, a*) [0–360°]
OKLab (Ottosson 2020)
Linear sRGB → LMS (intermediate):
l = 0.4122214708R + 0.5363325363G + 0.0514459929B
m = 0.2119034982R + 0.6806995451G + 0.1073969566B
s = 0.0883024619R + 0.2817188376G + 0.6299787005B

Cube root:
l′ = l1/3, m′ = m1/3, s′ = s1/3

LMS → OKLab:
L = 0.2104542553l′ + 0.7936177850m′ − 0.0040720468s′
a = 1.9779984951l′ − 2.4285922050m′ + 0.4505937099s′
b = 0.0259040371l′ + 0.7827717662m′ − 0.8086757660s′

OKLCH:
C = √(a2 + b2), h = atan2(b, a)
Colour Difference Metrics
CIE76 (ΔE*ab):
ΔE = √[(ΔL*)2 + (Δa*)2 + (Δb*)2]

CIEDE2000 (ΔE00):
G = 0.5[1 − √(C̄7/(C̄7+257))]
a′i = ai(1+G)
C′i = √(a′i2 + bi2)
ΔH′ = 2√(C′1C′2) sin(Δh′/2)
SL = 1 + 0.015(L̄′−50)2/√(20+(L̄′−50)2)
SC = 1 + 0.045C̄′
SH = 1 + 0.015C̄′T
RT = −sin(2ΔΘ)RC
ΔE00 = √[(ΔL′/SL)2 + (ΔC′/SC)2 + (ΔH′/SH)2 + RT(ΔC′/SC)(ΔH′/SH)]
Colour Harmonies (HSL Hue Rotation)
Complementary: h + 180°
Analogous: h ± 30°
Triadic: h + 120°, h + 240°
Split-complementary: h + 150°, h + 210°
Tetradic (square): h + 90°, h + 180°, h + 270°

All operations performed in HSL space with S and L preserved.
Hue wraps modulo 360°.
CVD Simulation Matrices (Brettel et al. 1997)
All matrices operate on linear sRGB.

Protanopia:
| 0.152286 1.052583 −0.204868 |
| 0.114503 0.786281 0.099216 |
|−0.003882 −0.048116 1.051998 |

Deuteranopia:
| 0.367322 0.860646 −0.227968 |
| 0.280085 0.672501 0.047413 |
|−0.011820 0.042940 0.968881 |

Tritanopia:
| 1.255528 −0.076749 −0.178779 |
|−0.078411 0.930809 0.147602 |
| 0.004733 0.691367 0.303900 |

Achromatopsia: L = 0.2126R + 0.7152G + 0.0722B (greyscale)
References & Citations

Colour Space Standards

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

[2] CIE 15:2004 — Colorimetry, 3rd Edition. Standard observer, illuminants, CIELAB.

[3] ITU-R BT.709-6 (2015) — HDTV colour primaries and transfer function.

Perceptual Colour Models

[4] Ottosson, B. (2020) — A perceptual color space for image processing (OKLab).

[5] CIE 142:2001 — Improvement to industrial colour-difference evaluation (CIEDE2000).

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

Accessibility & CVD

[7] W3C WCAG 2.2 (2023) — Web Content Accessibility Guidelines, contrast requirements.

[8] Brettel, H., Viénot, F. & Mollon, J.D. (1997) — Computerized simulation of color appearance for dichromats. JOSA A, 14(10), 2647–2655.

[9] Viénot, F., Brettel, H. & Mollon, J.D. (1999) — Digital video colourimaps for checking the legibility of displays by dichromats.

CSS & Web APIs

[10] W3C CSS Color Level 4 — oklab(), oklch(), color(), hwb() notations.

[11] WICG EyeDropper API — Screen-wide colour sampling (Chromium 95+).

[12] W3C Async Clipboard API — navigator.clipboard.write().

General Resources

[13] Lindbloom, B. — brucelindbloom.com — Colour mathematics and matrices.

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

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

About this tool

This tool provides 10+ colour-space breakdowns (HEX, RGB, HSL, HSV, HWB, CIE XYZ, L*a*b*, LCH, OKLab, OKLCH), WCAG contrast, CVD simulation, 5 harmony types, tints & shades, gamut graph, palette builder, batch ΔE, and bootstrap CIs — entirely client-side (zero network). Not a substitute for calibrated measurement or ICC profile software.

Research & Visualization
Bootstrap ΔE Distribution
Click Run Bootstrap to compute ΔE confidence intervals.
Batch ΔE Analysis

Enter one HEX per line (max 50). Computes ΔE00 against the current colour.

Click Run Batch to analyse colours.
Research backend: 10+ colour spaces · WCAG contrast · CVD simulation · 5 harmony types · tints & shades · gamut graph · CIEDE2000 batch ΔE · bootstrap CIs · palette builder. All computation on-device.