| HEX | cr:W | WCAG W | cr:B | WCAG B | APCA W | APCA B |
|---|
--color-0, --color-100, …
SCSS Map format: $palette: (0: #hex, 100: #hex, …);
JSON includes full colorimetric data (Lab, LCh, OKL, WCAG, APCA).
sRGB (IEC 61966-2-1)
The sRGB colour space defines the electro-optical transfer function (EOTF) and its inverse used by this tool for linearisation. All sRGB ↔ linear conversions use the piecewise function with breakpoint 0.04045 and exponent 2.4. sRGB is the assumed source space for all inputs.
OKLab (Ottosson 2020)
OKLab is a perceptually uniform colour space designed by Björn Ottosson. It improves on CIELab by providing better hue linearity and more uniform lightness. This tool uses OKLab as the recommended mixing space because tints and shades generated in OKLab have the most uniform perceptual step sizes.
CIELab (CIE 15:2004)
CIELAB (L*a*b*) is the standard perceptual colour space defined by CIE. Mixing in Lab produces smoother transitions than sRGB but suffers from blue-purple hue shifts at large distances. D65 (Illuminant) white point is used as the reference.
WCAG 2.x Contrast (W3C)
WCAG 2.x defines contrast ratio as (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are relative luminances. AA requires ≥ 4.5:1 for normal text, ≥ 3:1 for large text. AAA requires ≥ 7:1 for normal text.
APCA (Accessible Perceptual Contrast Algorithm)
APCA is a polarity-sensitive perceptual contrast metric developed by Myndex Research for WCAG 3.0. It accounts for spatial frequency, adaptation field, and surround effects. APCA Lc values are directional — light text on dark background yields different values than dark on light. This tool computes Lc for both on-white and on-black backgrounds.
Relative Luminance (BT.709 / sRGB)
Y = 0.2126·R + 0.7152·G + 0.0722·B, computed from linearised sRGB values. This matches the ITU-R BT.709 luminance coefficients and WCAG's luminance definition.
Design Token Specifications
W3C Design Tokens Community Group defines a JSON format for portable design tokens. This tool outputs tokens in CSS Custom Properties, SCSS maps, and flat JSON formats compatible with Style Dictionary, Figma Tokens, and Theo.
Tailwind CSS Scale Convention
Tailwind CSS uses an 11-stop scale: 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900, 950. 500 is the anchor that maps to the input colour. Lighter stops mix toward white, darker stops mix toward black.
Material Design Scale Convention
Material Design uses a 10-stop scale: 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900. The 500 value is the primary/anchor colour. Google's Material Design 3 Dynamic Color system generates tonal palettes from a single seed colour using a CAM-based approach.
sRGB Linearisation (EOTF)
C_linear = ((C_srgb + 0.055) / 1.055)^2.4 otherwise
Inverse (linear → sRGB):
C_srgb = 12.92 × C_linear if C_linear ≤ 0.0031308
C_srgb = 1.055 × C_linear^(1/2.4) − 0.055 otherwise
Relative Luminance
WCAG 2.x Contrast Ratio
AA normal text: CR ≥ 4.5:1
AA large text: CR ≥ 3:1
AAA normal text: CR ≥ 7:1
APCA Perceived Lightness Contrast (Lc)
If Y_bg ≥ Y_txt:
Lc = (Y_bg^0.56 − Y_txt^0.57) × 1.14 × 100
Else:
Lc = (Y_bg^0.57 − Y_txt^0.56) × 1.14 × 100
Polarity-aware: text-on-dark ≠ text-on-light.
sRGB → XYZ (D65)
| Y | = | 0.2126729 0.7151522 0.0721750 | × | G_lin |
| Z | | 0.0193339 0.1191920 0.9503041 | | B_lin |
XYZ → CIELab
f(t) = 7.787·t + 16/116 otherwise
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))
D65 reference: X_n = 0.95047, Y_n = 1.0, Z_n = 1.08883
sRGB → OKLab
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
HSL ↔ RGB
X = C × (1 − |(H/60) mod 2 − 1|)
m = L − C/2
(R₁, G₁, B₁) from hue sector
(R, G, B) = ((R₁+m)×255, (G₁+m)×255, (B₁+m)×255)
Mixing Formulas
CIELab: result = labToRgb(lerp(rgbToLab(c1), rgbToLab(c2), t))
OKLab: result = oklabToRgb(lerp(rgbToOklab(c1), rgbToOklab(c2), t))
HSL: result = hslToRgb(lerpHue(rgbToHsl(c1), rgbToHsl(c2), t))
Tint(base, t) = mix(base, #FFFFFF, t)
Shade(base, t) = mix(base, #000000, t)
Tone(base, t) = mix(base, #808080, t)
Gamma Bias (Luminance & Contrast Engines)
γ = 1.0: linear distribution
γ < 1.0: more steps near lights
γ > 1.0: more steps near darks
Perceptual Colour Spaces
[2] Ottosson, B. (2020). A perceptual color space for image processing. bottosson.github.io/posts/oklab/.
[3] Fairchild, M.D. (2013). Color Appearance Models, 3rd edition. John Wiley & Sons.
sRGB and Display Standards
[5] ITU-R BT.709-6 (2015). Parameter values for the HDTV standards for production and international programme exchange.
Contrast and Accessibility
[7] Somers, A. (Myndex). APCA Contrast Algorithm. https://github.com/Myndex/SAPC-APCA
[8] W3C (2024). WCAG 3.0 Working Draft — Visual Contrast of Text.
Design Token Standards
[10] Style Dictionary. https://amzn.github.io/style-dictionary/
[11] Tailwind CSS — Customizing Colors. https://tailwindcss.com/docs/customizing-colors
Design System Scales
[13] Radix Colors — Understanding the Scale. https://www.radix-ui.com/colors
[14] Open Color. https://yeun.github.io/open-color/
About this tool
This tool generates tonal ramps, tints, shades, tones and neutral ladders using three tonal engines and four colour-space mixing modes. All computation is on-device with zero network calls. WCAG 2.x, APCA, perceptual uniformity analysis, and Tailwind/Material scale generation included. Not a substitute for calibrated measurement or official CIE software.
Draws the ΔL step-size chart for the current ramp. Bars beyond ±30% of the mean are highlighted red. Green dashed line = mean step size. Use this to evaluate which engine+mode combination produces the most uniform ramp.
Bar chart showing WCAG 2.x contrast ratio vs #000000 for each ramp step. Threshold lines at 3:1 (AA-large), 4.5:1 (AA), and 7:1 (AAA).
a* vs b* scatter for all generated swatches (ramp + tints + shades + tones). Shows chromatic distribution across the OKLab plane. Points near the origin are desaturated.
The full CIE 1931 horseshoe showing the spectral locus, D65 white point, and gamut triangles for sRGB, DCI-P3, Rec.2020, and ProPhoto RGB. Illustrates how each colour space covers the visible gamut.
Enter hex colours (one per line or comma-separated). Generates tints + shades for each and tabulates Lab, OKL, luminance. Useful for comparing how different base colours distribute across tonal space.
Luminance engine + OKLab mix: Engine binary-searches L in HSL to hit Y targets. OKLab mixing is used only for tints/shades/tones (not the ramp itself). This gives Y-linear ramp + perceptually uniform tints.
Contrast engine + sRGB-linear mix: Contrast targets are WCAG ratio-linear (1:1 → 21:1). sRGB-linear mixing preserves energy but may produce visible hue shifts at mid-dark values.
Perceptual ranking (uniformity): OKLab > CIELab > sRGB-linear > HSL. OKLab typically achieves <5% step-size deviation for tints and shades.