About

Incorrect color specification causes cascading failures: a hex value off by one digit shifts hue by up to 16 steps, CMYK-to-RGB mismatches produce print output that deviates from screen by 15 - 30% in perceived saturation, and WCAG contrast violations below the 4.5:1 ratio threshold render text illegible for roughly 8% of male users with color vision deficiency. This tool computes bidirectional conversions across six color spaces (sRGB, HSL, HSV, CMYK, CIE LAB, HEX) using the D65 standard illuminant and CIE 1931 observer functions. It approximates CMYK output assuming an idealized ICC profile without ink-density correction. Contrast ratios follow WCAG 2.1 relative luminance: L = 0.2126R + 0.7152G + 0.0722B after gamma linearization.

Color blindness simulation uses the Brettel-Viénot-Mollon transformation matrices for dichromatic vision. Note: simulated output is an approximation. Actual perception varies by severity (anomalous trichromacy vs. full dichromacy) and individual physiology. Pro Tip: always validate critical UI colors against both Protanopia and Deuteranopia simultaneously, as red-green deficiency accounts for over 99% of inherited color vision deficiency cases.

Formulas

RGB to HSL conversion maps Cartesian color coordinates into cylindrical form. Given normalized channels R′, G′, B′ ∈ [0, 1]:

C_max = max(R′, G′, B′)
C_min = min(R′, G′, B′)
Δ = C_max − C_min

L = C_max + C_min2

S =

{

0 if Δ = 0Δ1 − |2L − 1| otherwise

Where C_max is the maximum channel value, Δ is the chroma range, L is lightness (midpoint of max and min), and S is saturation relative to lightness.

WCAG 2.1 contrast ratio between two colors uses relative luminance:

L = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin

CR = L₁ + 0.05L₂ + 0.05

Where R_lin is the linearized sRGB channel: if C ≤ 0.04045, then C_lin = C ÷ 12.92; otherwise C_lin = ((C + 0.055) ÷ 1.055)^2.4. L₁ is the lighter luminance and L₂ the darker.

RGB to CIE LAB requires an intermediate XYZ transform using the D65 illuminant reference white (X_n = 0.95047, Y_n = 1.0, Z_n = 1.08883):

L* = 116 ⋅ f(Y ÷ Y_n) − 16
a* = 500 ⋅ (f(X ÷ X_n) − f(Y ÷ Y_n))
b* = 200 ⋅ (f(Y ÷ Y_n) − f(Z ÷ Z_n))

Where f(t) = t^1/3 if t > 0.008856, else f(t) = 7.787t + 16116.

Reference Data

Color Space	Components	Range	Primary Use	Perceptually Uniform
sRGB	R, G, B	0 - 255	Screen display, CSS, Web	No
HEX	6-digit base-16	#000000 - #FFFFFF	Web shorthand for RGB	No
HSL	H, S, L	0 - 360°, 0 - 100%	CSS color functions, design	No
HSV/HSB	H, S, V	0 - 360°, 0 - 100%	Photoshop, color pickers	No
CMYK	C, M, Y, K	0 - 100%	Print (subtractive mixing)	No
CIE LAB	L, a, b*	L: 0 - 100, a/b: ±128	Perceptual color difference	Yes (approx.)
CIE XYZ	X, Y, Z	0 - 1 (normalized)	Intermediate conversion space	No
WCAG Luminance	L	0 - 1	Contrast ratio calculation	Linearized sRGB
WCAG 2.1 Contrast Requirements
AA Normal Text	≥ 4.5:1		Body text < 18pt or < 14pt bold
AA Large Text	≥ 3.0:1		Text ≥ 18pt or ≥ 14pt bold
AAA Normal Text	≥ 7.0:1		Enhanced accessibility
AAA Large Text	≥ 4.5:1		Enhanced accessibility, large text
Color Vision Deficiency Prevalence
Protanopia	1.0% males		Missing L-cone (red)
Deuteranopia	1.0% males		Missing M-cone (green)
Tritanopia	0.003%		Missing S-cone (blue)
Protanomaly	1.1% males		Shifted L-cone sensitivity
Deuteranomaly	4.6% males		Shifted M-cone sensitivity (most common)
Achromatopsia	0.003%		Complete color blindness, rod monochromacy
Named CSS Color Constants (Selection)
Coral	#FF7F50		rgb(255, 127, 80)
SlateBlue	#6A5ACD		rgb(106, 90, 205)
MediumSeaGreen	#3CB371		rgb(60, 179, 113)
GoldenRod	#DAA520		rgb(218, 165, 32)
Tomato	#FF6347		rgb(255, 99, 71)

Frequently Asked Questions

RGB is an additive color model (light emission) while CMYK is subtractive (ink absorption). The gamut of sRGB is larger than typical CMYK profiles in saturated blues and greens but smaller in certain deep cyans. This tool converts using the idealized formula C = (1 − R′ − K)/(1 − K), which does not account for ink density, paper absorption, or dot gain. For production print work, use an ICC profile-aware converter. Expect a ΔE*ab of 3-10 between screen and print for saturated colors.

The contrast ratio uses relative luminance computed from linearized sRGB channels with the ITU-R BT.709 coefficients (0.2126R + 0.7152G + 0.0722B). The ratio formula is (L₁ + 0.05)/(L₂ + 0.05) where L₁ is the brighter luminance. WCAG 2.1 Level AA requires ≥ 4.5:1 for normal text (below 18pt) and ≥ 3.0:1 for large text (≥ 18pt or ≥ 14pt bold). Level AAA requires ≥ 7.0:1 and ≥ 4.5:1 respectively. Non-text UI components require ≥ 3.0:1.

The simulations use the Brettel, Viénot, and Mollon (1997) dichromatic simulation matrices, which model complete absence of one cone type (dichromacy). Real-world color vision deficiency exists on a spectrum: most affected individuals have anomalous trichromacy (shifted cone sensitivity) rather than full dichromacy. The simulation therefore represents the most severe case. Tritanopia simulation is less validated due to its extreme rarity (0.003% prevalence). For critical accessibility decisions, supplement with user testing.

Both are cylindrical remappings of RGB. HSL defines Lightness as the midpoint of the max and min channel: L = (Cmax + Cmin)/2. HSV defines Value as simply the max channel: V = Cmax. In practice, HSL's 50% lightness corresponds to the "purest" color, making it intuitive for CSS (the hsl() function). HSV's 100% value includes whites at low saturation, matching the behavior of Photoshop's color picker. Use HSL for web/CSS work and HSV for image editing workflows.

The a* axis spans green (negative) to red (positive), and the b* axis spans blue (negative) to yellow (positive). These are opponent-color dimensions derived from the XYZ transform via a nonlinear function (cube root above the threshold, linear below). A color with a* = −40 and b* = +60 would be a greenish-yellow. The range is theoretically unbounded but for sRGB gamut colors typically stays within ±128. Values outside this indicate out-of-gamut colors for sRGB.

Color harmonies are geometric relationships on the HSL/HSV hue wheel (0-360°). Complementary colors sit 180° apart and produce maximum contrast. Analogous colors are within ±30° and create visual cohesion. Triadic colors are 120° apart, providing balanced vibrancy. Split-complementary uses ±150° from the base, offering contrast with less tension than pure complementary. These rules apply to the perceptual hue wheel. Note: the sRGB hue wheel is not perceptually uniform - a 30° shift near yellow appears much larger than the same shift near blue in LAB space.