Hue mapped around circumference (0°–360°), saturation radially (center = 0%). Harmony markers plotted at computed positions.
Pick a color to generate swatches.
| HEX | RGB | HSL | L*a*b* | OKLCh |
|---|
Brettel/Viénot dichromacy. Evaluates whether swatches remain distinguishable under each deficiency type.
HSL Color Model (Joblove & Greenberg 1978)
The HSL (Hue, Saturation, Lightness) cylinder model maps colour into three intuitive dimensions. Hue (0°–360°) corresponds to spectral position, Saturation (0–100%) to vividness, Lightness (0–100%) to brightness. The model is widely used in CSS, design tools, and harmony generators because hue rotation has a clear geometric meaning.
Limitation: HSL is not perceptually uniform — equal hue steps do not appear equally different. Yellow/green and blue-purple compress perceptually.
Itten’s Color Theory (1961)
Johannes Itten identified 7 colour contrasts: hue, value, saturation, simultaneous, warm/cool, complementary, and quantity. His 12-hue RYB circle underpins traditional art/design harmony. Complementary colours sit opposite; triadic colours form an equilateral triangle. These geometric relationships form the basis for all standard harmony schemes used in this tool.
Munsell Colour System (1905)
Albert Munsell defined colour in Hue, Value (lightness), and Chroma (saturation). Munsell spacing is perceptually uniform, unlike HSL. Equal chroma on the Munsell sphere produces visually equidistant colours. The system remains a reference for perceptual uniformity evaluation in modern colour science.
OKLab & OKLCh (Ottosson 2020)
OKLab is a perceptually-uniform colour space designed for image processing. OKLCh (polar form) provides hue rotation that produces more balanced complements and triads than HSL. This tool computes OKLCh-based harmony in the Research tab for comparison.
CIEDE2000 — Colour Difference
CIEDE2000 (ΔE₀₀) quantifies perceived colour difference with corrections for lightness, chroma, and hue non-uniformities. The Research tab uses this metric to evaluate pairwise distinguishability of harmony swatches.
ΔE₀₀ 1–2 — barely perceptible
ΔE₀₀ 2–10 — noticeable
ΔE₀₀ > 10 — distinct colours
CVD Simulation — Brettel / Viénot / Machado
The tool simulates 8 colour vision deficiency types:
- Protanopia / Protanomaly — L-cone absent / anomalous (~1% males)
- Deuteranopia / Deuteranomaly — M-cone absent / anomalous (~1% males)
- Tritanopia / Tritanomaly — S-cone absent / anomalous (~0.003%)
- Achromatopsia / Achromatomaly — total / partial cone loss
Inclusive design: Avoid relying solely on hue. Well-designed harmony schemes maintain lightness contrast ≥ 3:1 between adjacent swatches.
Computational Harmony (Cohen-Or et al. 2006)
Cohen-Or et al. formalised harmony as templates (I, V, L, T, Y, X) on the hue wheel. Their algorithm recolours images by rotating hues to the nearest harmony template. This provides a more rigorous basis than Itten’s qualitative rules.
RGB → HSL Conversion
max = max(r,g,b); min = min(r,g,b)
L = (max + min) / 2
if max == min: H = S = 0 (achromatic)
else:
d = max − min
S = d / (L > 0.5 ? 2−max−min : max+min)
if max == r: H = ((g−b)/d + (g<b ? 6 : 0)) × 60
if max == g: H = ((b−r)/d + 2) × 60
if max == b: H = ((r−g)/d + 4) × 60
Output: H ∈ [0°, 360°] S ∈ [0, 1] L ∈ [0, 1]
Hue Rotation — 7 Harmony Schemes
Analogous (±α): H₂ = (H + α) mod 360
H₃ = (H − α + 360) mod 360
Split-Comp (±α): H₂ = (H + 180 − α) mod 360
H₃ = (H + 180 + α) mod 360
Triadic: H₂ = (H + 120) mod 360
H₃ = (H + 240) mod 360
Tetradic: H₂ = (H + 60) mod 360
H₃ = (H + 180) mod 360
H₄ = (H + 240) mod 360
Square: H₂ = (H + 90) mod 360
H₃ = (H + 180) mod 360
H₄ = (H + 270) mod 360
Monochromatic: Hₙ = H (fixed)
Lₙ = (n+1)/(steps+1) × 100
OKLab & OKLCh (Ottosson 2020)
l = 0.4122·R + 0.5363·G + 0.0514·B
m = 0.2119·R + 0.6807·G + 0.1074·B
s = 0.0883·R + 0.2817·G + 0.6300·B
Cube root: l′ = ³√l, m′ = ³√m, s′ = ³√s
OKLab:
L = 0.2105·l′ + 0.7936·m′ − 0.0041·s′
a = 1.9780·l′ − 2.4286·m′ + 0.4506·s′
b = 0.0259·l′ + 0.7828·m′ − 0.8087·s′
OKLCh: C = √(a²+b²) H = atan2(b,a)·180/π
Hue rotation: H_new = (H + Δ) mod 360
OKLCh hue rotation produces more perceptually balanced complements and triads than HSL.
CIEDE2000 (ΔE₀₀)
+ RT·(ΔC′/kc·Sc)·(ΔH′/kH·SH)]
Weighting functions:
Sₗ = 1 + 0.015·(L̄−50)²/√(20+(L̄−50)²)
Sc = 1 + 0.045·C̄′
SH = 1 + 0.015·C̄′·T
RT = hue-rotation correction for blue region (~275°)
Sharma, Wu, Dalal (2005). Used by the Research tab for pairwise metrics.
CVD Simulation Chain
HPE (Hunt-Pointer-Estévez) LMS matrix:
[L] [ 0.4002 0.7076 -0.0808] [X]
[M] = [-0.2263 1.1653 0.0457] [Y]
[S] [ 0.0000 0.0000 0.9182] [Z]
Anomalous (severity s ∈ [0,1]):
C_sim = (1−s)·C_normal + s·C_dichromat
Relative Luminance & Contrast Ratio (WCAG)
Contrast Ratio = (L_lighter + 0.05) / (L_darker + 0.05)
WCAG AA: text ≥ 4.5:1, large text ≥ 3:1
WCAG AAA: text ≥ 7:1, large text ≥ 4.5:1
Color Harmony Theory
[2] A. H. Munsell — A Color Notation, Munsell Color Company, 1905.
[3] W. Ostwald — Die Farbenfibel, Unesma, 1917.
[4] J. Albers — Interaction of Color, Yale University Press, 1963.
HSL/HSV Color Models
[6] A. R. Smith — “Color gamut transform pairs,” SIGGRAPH ’78, 12–19, 1978.
CIE Colorimetry & Color Difference
[8] CIE — Colorimetry, 3rd ed., CIE 15:2004.
[9] G. Sharma, W. Wu, E. N. Dalal — “The CIEDE2000 Color-Difference Formula,” Color Res. & App., 30(1), 21–30, 2005.
[10] B. Ottosson — “A perceptual color space for image processing,” 2020.
CVD Simulation
[12] F. Viénot, H. Brettel, J. D. Mollon — “Digital video colourmaps for checking the legibility of displays by dichromats,” Color Res. & App., 24(4), 243–252, 1999.
[13] G. M. Machado, M. M. Oliveira, L. A. F. Fernandes — “A Physiologically-based Model for Simulation of Color Vision Deficiency,” IEEE TVCG, 15(6), 1291–1298, 2009.
Computational Harmony
[15] P. O’Donovan et al. — “Color compatibility from large datasets,” ACM TOG, 30(4), Article 63, 2011.
[16] Y. Matsuda — Color Design, Aichi Shuppan, 1995.
About this tool
This tool implements 7 HSL harmony modes with OKLCh perceptually-uniform harmony, CIEDE2000 pairwise metrics, WCAG contrast ratios, CVD simulation (Brettel/Viénot/Machado for 8 vision types), palette management, scheme comparison, hue scatter plot, and batch analysis — entirely client-side (zero network). Not a substitute for calibrated measurement or professional color management.
CIEDE2000 pairwise ΔE₀₀ distances, min/max contrast ratios (WCAG), and OKLab lightness range for the current harmony scheme. Updated live with each colour change.
Same scheme computed in OKLCh space — perceptually-uniform hue rotation often produces more balanced palettes than HSL. Compare with the HSL output above.
Side-by-side view of all 7 harmony modes from the current base colour. Click any hex chip to copy it.
No saved palettes yet.
Enter one HEX per line. Returns L*C*h°, OKLCh, and complementary for each.