Import HEX List
Role Assignment
OKLCH Perceptual Colour Space
Björn Ottosson, 2020 — OKLCH is the cylindrical form of
OKLab, a
perceptually uniform colour space. L (lightness 0–1), C (chroma 0–0.4+), H
(hue
0°–360°) produce near-constant perceptual steps. Adopted by CSS Color
Level 4
(oklch()). The palette visualizer uses OKLCH for all
internal analysis:
hue wheel, lightness/chroma charts, sorting, equalisation, and balance.
WCAG 2.x Contrast Requirements
WCAG 2.2 — W3C Recommendation (2023) — SC 1.4.3 (Level AA) requires 4.5:1 for normal text and 3:1 for large text. SC 1.4.6 (Level AAA) raises to 7:1 / 4.5:1. Contrast ratio = (L1 + 0.05) / (L2 + 0.05). The visualizer computes an n×n contrast grid and heatmap for every swatch pair.
APCA (Accessible Perceptual Contrast Algorithm)
Somers, A. (2022) — APCA W3 / Silver draft — Polarity-aware lightness contrast metric (Lc) that better predicts readability. |Lc| ≥ 60 ≈ WCAG AA, ≥ 75 ≈ AAA. The contrast grid reports both WCAG CR and APCA Lc.
CIEDE2000 (ΔE₀₀)
Sharma, Wu & Dalal, 2005 — Complete ΔE₀₀ formula with lightness, chroma, hue weighting plus rotation term for the blue region. ΔE < 1 is imperceptible; 1–2 just noticeable; > 5 clearly different. Used to measure palette distinguishability.
Colour Vision Deficiency (CVD) Simulation
Brettel, Viénot & Mollon, 1997 — Half-plane projection matrices for protanopia, deuteranopia, and tritanopia based on cone-fundamentals. ~8% of males and ~0.5% of females have some CVD. The CVD grid shows your palette as perceived by each dichromat type.
CIE 1931 xy Chromaticity
CIE 15:2004 — x = X/(X+Y+Z), y = Y/(X+Y+Z). The gamut canvas plots each palette swatch in CIE xy coordinates against the spectral locus horseshoe and sRGB triangle, showing where colours sit relative to human-visible and display-reproducible gamuts.
Hex Parsing from Arbitrary Text
The visualizer uses regex-based extraction (#[0-9A-Fa-f]{3,8}) to pull
valid hex codes from any pasted text: CSS files, JSON design tokens, Tailwind configs,
Figma exports,
or plain lists. 3-digit shorthand (#FFF) is expanded to 6-digit. Duplicates are removed;
order is
preserved.
OKLab from Linear sRGB
m = 0.2119034982 R + 0.6806995451 G + 0.1073969566 B
s = 0.0883024619 R + 0.2817188376 G + 0.6299787005 B
l′ = cbrt(l), m′ = cbrt(m), s′ = cbrt(s)
L = 0.2104542553 l′ + 0.7936177850 m′ − 0.0040720468 s′
a = 1.9779984951 l′ − 2.4285922050 m′ + 0.4505937099 s′
b = 0.0259040371 l′ + 0.7827717662 m′ − 0.8086757660 s′
OKLCH from OKLab
C = sqrt(a² + b²)
H = atan2(b, a) × 180 / π (mod 360)
sRGB Relative Luminance
C_lin = ((C′ + 0.055) / 1.055)^2.4 otherwise
Y = 0.2126 R_lin + 0.7152 G_lin + 0.0722 B_lin
WCAG 2.x Contrast Ratio
where L1 = max(Y_fg, Y_bg), L2 = min(Y_fg, Y_bg)
Range: 1:1 (identical) to 21:1 (black/white)
APCA Lightness Contrast (Lc)
Dark text on light: S_apc = Y_b^0.56 − Y_s^0.57, L_c = S_apc × 1.14
Light text on dark: S_apc = Y_b^0.65 − Y_s^0.62, L_c = S_apc × 1.14
Clamp: if |L_c| < 0.1 then L_c = 0
CIEDE2000 (ΔE₀₀)
S_L = 1 + 0.015 (L̄′ − 50)² / sqrt(20 + (L̄′ − 50)²)
S_C = 1 + 0.045 C̄′
S_H = 1 + 0.015 C̄′ T
Brettel CVD Projection
2. Project onto half-plane for dichromat type:
if dot(LMS, separator) ≥ 0: LMS′ = M1 × LMS
else: LMS′ = M2 × LMS
3. LMS′ → sRGB
CIE 1931 xy from XYZ
y = Y / (X + Y + Z)
sRGB → XYZ via IEC 61966-2-1 matrix (D65 whitepoint)
OKLCH Tints & Shades
Shade: L′ = L × (1 − s) (s ∈ [0.1, 0.9])
Chroma and Hue preserved, gamut-mapped to sRGB.
Contrast Heatmap Computation
Cell colour: green (CR ≥ 7), yellow (CR ≥ 4.5), orange (CR ≥ 3), red (CR < 3).
Diagonal is always 1:1 (same colour).
Perceptual Colour Spaces
[2] CIE 15:2004 — Colorimetry (3rd Edition).
[3] CSS Color Level 4 — W3C (2024). oklch(), gamut mapping, interpolation.
Accessibility & Contrast
[5] Somers, A. (2022) — APCA Contrast Calculator — W3C Silver / WCAG 3 draft.
[6] ISO 9241-171:2008 — Ergonomics of human-system interaction.
Colour Vision Deficiency
[8] Viénot, F., Brettel, H. & Mollon, J.D. (1999) — “Digital video colourmaps for checking the legibility of displays by dichromats.”
Color Difference
[10] CIE 142:2001 — Improvement to industrial colour-difference evaluation.
General Resources
[12] Lindbloom, B. — brucelindbloom.com.
[13] IEC 61966-2-1:1999 — sRGB colour space specification.
About this tool
This tool parses hex codes from arbitrary text and analyses the resulting palette with OKLCH hue wheel, lightness/chroma charts, CIE 1931 xy gamut canvas, n×n contrast heatmap, Brettel CVD simulation, WCAG/APCA contrast grid, tints & shades, role-assignment preview, and multi-format export — entirely client-side (zero network). Not a substitute for calibrated colour measurement.
Spectral locus (horseshoe), sRGB gamut triangle, and each palette swatch plotted in CIE xy coordinates. D65 whitepoint marked.
Palette swatches on the OKLCH polar hue wheel. Radial distance = chroma; angular position = hue. Shows angular distribution and chroma balance.
n×n matrix of pairwise WCAG contrast ratios rendered as a colour-coded heatmap. Green ≥ 7:1 (AAA), yellow ≥ 4.5:1 (AA), orange ≥ 3:1 (large text), red < 3:1 (fail).