About

Design system color ramps that rely on naive RGB interpolation toward white or black produce perceptually uneven steps. A 10% increment in sRGB channel value does not correspond to a 10% perceived lightness change because human vision follows a roughly cube-root response curve, formalized in CIE L* (Lightness). This tool solves that problem. It computes ramps along the CIE L* axis from 0 (black) to 100 (white), producing steps that look evenly spaced to the human eye. The mixing model blends two strategies: paint mixing (linear interpolation toward white/black in linear RGB) and ink mixing (scaling color concentration, simulating Beer-Lambert absorption). A saturation parameter controls the ratio. At 0 you get pure paint; at 1, pure ink. The default 0.4 produces ramps where hue and chroma shift naturally across the lightness range rather than washing out.

Misconfigured ramps cause accessibility failures. If your 500-step doesn't land near L* ≈ 50, your text-on-background pairs will fail WCAG 2.1 contrast ratios. This tool displays the contrast ratio of each swatch against white and black so you can verify compliance before committing tokens to your design system. Note: gamut clipping occurs when a target lightness requires RGB values outside 0 - 255. Clipped swatches are flagged.

Formulas

The generator converts the input hex to linear RGB, then for each target lightness step computes two candidate colors and blends them.

Paint mixing (tint/shade interpolation in linear RGB):

C_paint = C_base ⋅ t + C_target ⋅ (1 − t)

where C_target = white (1,1,1) for lightening and black (0,0,0) for darkening.

Ink mixing (concentration scaling via Beer-Lambert):

C_ink = 1 − (1 − C_base)^k

where k controls concentration. k < 1 dilutes (lighter), k > 1 concentrates (darker).

Hybrid blend:

C_final = C_paint ⋅ (1 − s) + C_ink ⋅ s

where s = saturation parameter (0 - 1).

CIE L* from linear RGB:

Y = 0.2126R + 0.7152G + 0.0722B

L^* = 116 ⋅ f(YY_n) − 16

where f(t) = t^1/3 if t > δ³, else t3δ² + 429, and δ = 629.

where C = channel value in linear RGB, t = interpolation factor, k = concentration exponent, s = saturation (ink ratio), Y = relative luminance, Y_n = reference white luminance (1.0 for D65), L^* = CIE perceptual lightness (0 - 100).

Reference Data

Tailwind Step	Target L* (CIE)	Typical Use	Min Contrast vs White (WCAG AA)	Min Contrast vs Black (WCAG AA)
50	97	Background tint	1.02:1 - decorative only	18.4:1 ✓
100	93	Hover state bg	1.07:1 - decorative only	16.1:1 ✓
200	84	Border, divider	1.29:1 - fail	12.2:1 ✓
300	74	Icon secondary	1.72:1 - fail	9.0:1 ✓
400	64	Placeholder text	2.39:1 - fail	6.5:1 ✓
500	53	Primary / CTA	3.53:1 - AA Large	4.6:1 ✓
600	43	Primary hover	5.15:1 ✓	3.2:1 - fail
700	33	Heading text	7.69:1 ✓	2.2:1 - fail
800	23	Body text	11.2:1 ✓	1.5:1 - fail
900	15	High-emphasis text	14.5:1 ✓	1.2:1 - fail
950	7	Near-black accent	17.9:1 ✓	1.05:1 - decorative

Frequently Asked Questions

Paint mixing linearly interpolates between your base color and white (tint) or black (shade) in linear RGB space. This mimics adding white or black pigment. Ink mixing varies the concentration of the base color against white, simulating how transparent dyes behave (Beer-Lambert law). Paint mixing tends to desaturate toward gray. Ink mixing preserves chroma but can produce harsh transitions. The hybrid approach blends both strategies using the saturation parameter s, where 0 = pure paint and 1 = pure ink. The default 0.4 (40% ink, 60% paint) produces natural-looking ramps.

When the algorithm targets an extreme CIE L* value while preserving chromaticity, the resulting linear RGB channels may exceed the 0 - 1 range. These values are clamped to 0 or 1, which subtly shifts the hue. Clipped swatches are flagged so you know the displayed color is an approximation. Highly saturated base colors (e.g., pure red #FF0000) clip earlier than muted tones.

The increment defines the CIE L* step between consecutive swatches. An increment of 10 produces steps at L* = 0, 10, 20, … 100 (11 colors). Smaller increments (e.g., 5) yield 21 colors for finer gradations. For Tailwind export, the tool maps to the fixed 50-950 naming convention regardless of increment.

The tool displays the contrast ratio of each swatch against both white (#FFFFFF) and black (#000000) using the WCAG 2.1 relative luminance formula. It marks whether each swatch passes AA (≥ 4.5:1 for normal text) or AA Large (≥ 3.0:1). You should verify that your intended foreground-background pairs meet the threshold. Typically, steps 600-900 pass AA against white, and steps 50-400 pass AA against black.

HSL lightness is a geometric property of the sRGB cube, not a perceptual measure. Two colors at HSL L = 50% can appear drastically different in brightness (compare yellow vs. blue). CIE L* is calibrated against human vision data (CIE 1931 observer). Equal L* differences correspond to roughly equal perceived brightness differences, making ramps look evenly spaced.

This tool operates in the sRGB gamut. Colors are encoded as 8-bit-per-channel hex values. Display P3 has a ~25% larger gamut, meaning some sRGB colors can be represented more vividly in P3, but the hex output remains sRGB. For P3 workflows, use the linear RGB intermediate values and apply the Display P3 transfer function externally. The CIE L* computation uses the D65 illuminant, which is shared by both sRGB and P3.