SVG Colour Specification
W3C SVG 1.1 / SVG 2 (2011/2018) — Scalable Vector Graphics specification
defines how colour values are parsed. Fill and stroke attributes accept any valid CSS
colour
value: named colours, 3/6/8-digit hex, rgb(),
rgba(), hsl(),
hsla(), and CSS Level 4 notations in modern parsers.
W3C CSS Color Level 4 (2023) — Extends CSS colour syntax
with oklch(), oklab(),
color(display-p3 ...) and others. SVG renderers in modern
browsers support these when used in style attributes.
WCAG 2.2 Contrast Requirements
W3C WCAG 2.2 (2023) — Defines minimum luminance contrast ratios for accessible content using the relative luminance formula based on IEC 61966-2-1 (sRGB):
- AA normal text: 4.5:1 minimum
- AA large text / UI components: 3:1 minimum
- AAA normal text: 7:1 minimum
- AAA large text: 4.5:1 minimum
CVD Prevalence & Brettel Simulation
CVD affects approximately 8% of males and 0.5% of females of Northern European descent. Three primary types: protanopia (red cone), deuteranopia (green cone), tritanopia (blue cone).
Brettel, Viénot & Mollon (1997) — Most accurate published method for dichromacy simulation. Uses two half-plane projections in linear RGB to model the reduced cone's missing spectral dimension. The matrices operate in linearised sRGB, requiring gamma expansion before and re-encoding after transformation.
OKLCH Color Space
OKLCH (CSS Color Level 4, Ottosson 2020) — Perceptually uniform polar space built on the OKLab model. Components: L (perceived lightness 0–1), C (chroma), H (hue angle 0–360°). Equal steps in C or H produce equal-looking colour differences across all hues, making it ideal for palette harmony generation.
sRGB & IEC 61966-2-1
IEC 61966-2-1:1999 — Default colour space for web and SVG. Defines the piecewise gamma transfer function (linear segment + 2.4 power law), D65 whitepoint, and primaries. All colour operations in this tool linearise sRGB before computation and re-encode afterward to maintain accuracy.
CIEDE2000 (ΔE₀₀)
Sharma, Wu & Dalal (2005) — CIEDE2000 is the ICC-recommended perceptual colour difference metric, correcting lightness, chroma, and hue weighting plus a rotation term for the blue region (hue ≈ 275°).
- ΔE < 1: imperceptible
- ΔE 1–2: perceptible on close inspection
- ΔE 2–10: perceptible at a glance
- ΔE > 10: obvious difference
Colour Harmony Theory
OKLCH-based harmony modes manipulate hue angle H while preserving perceptual lightness and chroma:
- Complementary: H and H+180°
- Analogous: Evenly spread across ±30° of H
- Triadic: H, H+120°, H+240°
- Tetradic: H, H+90°, H+180°, H+270°
- Split-Complementary: H, H+150°, H+210°
sRGB Transfer Function
C_lin = C / 12.92 if C ≤ 0.04045
C_lin = ((C + 0.055) / 1.055)^2.4 otherwise
Re-encode (linear → sRGB):
C = 12.92 × C_lin if C_lin ≤ 0.0031308
C = 1.055 × C_lin^(1/2.4) − 0.055 otherwise
Relative Luminance (WCAG)
Contrast ratio: (L1 + 0.05) / (L2 + 0.05)
where L1 = lighter luminance, L2 = darker luminance
OKLab & OKLCH
[l,m,s] = M1 × [R,G,B]
[L_,m_,s_] = [cbrt(l), cbrt(m), cbrt(s)]
[L,a,b] = M2 × [L_,m_,s_]
OKLab → OKLCH:
C = sqrt(a^2 + b^2)
H = atan2(b, a) × 180/π (mod 360)
CVD Simulation (Brettel)
2. Apply Brettel matrix M for deficiency type:
[R', G', B'] = M × [R_lin, G_lin, B_lin]
3. Clamp [0,1], re-encode to sRGB
Protan M row 0: [0.1523, 1.0526, -0.2049]
Deutan M row 0: [0.3673, 0.8606, -0.228]
Tritan M row 0: [1.2555, -0.0767, -0.1788]
OKLCH Gamut Mapping
lo = 0, hi = C_original
for i in 0..19:
mid = (lo + hi) / 2
rgb = oklch_to_srgb(L, mid, H)
if in_gamut(rgb): lo = mid
else: hi = mid
Clamp R,G,B to [0,1] and re-encode.
HSL Adjustment
H_new = (H_orig + shift + 360) % 360
S_new = clamp(S_orig * scale / 100, 0, 100)
L_new = clamp(L_orig * scale / 100, 0, 100)
Result is converted back to HEX via HSL→RGB.
CIEDE2000 (ΔE₀₀)
SL = 1 + 0.015*(Lbar'-50)^2 / sqrt(20+(Lbar'-50)^2)
SC = 1 + 0.045*Cbar'
SH = 1 + 0.015*Cbar'*T
RT corrects hue/chroma interaction in the blue region (hbar' approx 275 deg).
SVG & CSS Colour Specifications
[2] W3C CSS Color Level 4 (2023) — oklch(), oklab(), color() space definitions. www.w3.org/TR/css-color-4/
[3] IEC 61966-2-1:1999 — Default RGB colour space — sRGB.
Colour Vision Deficiency Simulation
[5] Viénot, F., Brettel, H. & Mollon, J.D. (1999) — Digital video colourmaps for checking the legibility of displays by dichromats. Color Research & Application, 24(4), 243-252.
OKLCH Color Space
[7] CSS Color Level 4 — oklch() functional notation. www.w3.org/TR/css-color-4/#the-oklch-notation
Accessibility Standards
[9] W3C WCAG 3 Working Draft — APCA Lightness Contrast algorithm by Andrew Somers.
Colour Difference
[11] CIE 142:2001 — Improvement to industrial colour-difference evaluation.
About this tool
This tool implements SVG file upload and markup paste, DOM-based and regex fill/stroke/style colour extraction with perceptual grouping (HSL distance), per-colour remapping with lock support, OKLCH harmony palette generation (5 modes), global HSL adjustment, Brettel CVD simulation (protan/deutan/tritan), WCAG contrast matrix, CIEDE2000 heatmap, 4 analysis canvases (hue wheel, lightness, chroma, ΔE heatmap), gradient preview, undo/redo, and full exports (SVG/JSON/CSV/HEX/CSS/gradient) — entirely client-side (zero network). Not a substitute for professional colour management or calibrated accessibility auditing.
{}