About

Naive linear interpolation in sRGB produces muddy midtones and perceptual jumps. A 5-step gradient from blue to yellow through RGB passes through an undesirable grey. This tool interpolates in four color spaces - sRGB, HSL, CIELAB, and CIE LCH - so you control whether steps are mathematically even or perceptually uniform. CIELAB uses the CIE 1976 L*a*b* model calibrated to human vision with D65 illuminant, meaning equal numeric distance corresponds to equal perceived difference (ΔE ≈ constant). LCH adds hue-preserving polar interpolation. Wrong color space selection in UI/brand work causes inconsistent ramps that fail WCAG contrast checks mid-palette. This tool calculates relative luminance per step and displays the WCAG contrast ratio against white and black so you can audit accessibility inline.

Results export as HEX, rgb, or hsl strings ready for CSS variables or design tokens. The tool approximates perceptual uniformity assuming a standard D65 observer. Slight discrepancies arise on wide-gamut displays (P3) since all math is clamped to sRGB gamut. Pro tip: for smooth hue transitions (e.g., rainbow ramps), use LCH. For value/shade ramps of a single hue, LAB is optimal.

Formulas

The core operation is channel-wise linear interpolation at parameter t ∈ [0, 1]:

v_out = v₀ ⋅ (1 − t) + v₁ ⋅ t

For n steps, each step index i maps to t = in − 1.

sRGB to linear RGB (gamma decode per IEC 61966-2-1):

C_lin =

{

C_srgb12.92 if C_srgb ≤ 0.04045(C_srgb + 0.0551.055)^2.4 otherwise

Linear RGB to CIE XYZ (D65 illuminant) uses the standard 3×3 matrix:

XYZ = 0.41240.35760.18050.21260.71520.07220.01930.11920.9505 ⋅ R_linG_linB_lin

XYZ to CIELAB with D65 white point (X_n = 0.95047, Y_n = 1.0, Z_n = 1.08883):

L* = 116 ⋅ f(YY_n) − 16

a* = 500 ⋅ [f(XX_n) − f(YY_n)]

b* = 200 ⋅ [f(YY_n) − f(ZZ_n)]

Where f(t) = t¹³ if t > δ³, else t3δ² + 429, with δ = 629.

LAB to LCH (polar form):

C = √a*² + b*²

H = atan2(b*, a*)

WCAG 2.1 relative luminance for contrast ratio:

L = 0.2126 ⋅ R_lin + 0.7152 ⋅ G_lin + 0.0722 ⋅ B_lin

Where v = interpolated channel value, v₀ = start channel, v₁ = end channel, t = normalized step position, n = total number of steps, C_srgb = sRGB channel normalized to [0, 1], L* = CIELAB lightness, a*/b* = CIELAB chromatic axes, C = chroma, H = hue angle.

Reference Data

Color Space	Channels	Gamut	Perceptual Uniformity	Hue Linearity	Best Use Case
sRGB	R, G, B (0 - 255)	sRGB	Poor	Poor (passes through grey)	Simple tint/shade of close colors
HSL	H (0 - 360°), S, L (0 - 100%)	sRGB	Poor	Good (follows hue wheel)	Hue rotation, rainbow gradients
CIELAB	L* (0 - 100), a, b (±128)	Unbounded (clamped)	Good (CIE 1976)	Moderate (straight line in ab)	Perceptually even shade ramps
CIE LCH	L (0 - 100), C (0 - 150+), H (0 - 360°)	Unbounded (clamped)	Good	Excellent (polar hue arc)	Hue-preserving perceptual gradients
Display P3	R, G, B (0 - 1)	P3 (wider)	Poor	Poor	Wide-gamut screens (not supported here)
Oklab	L, a, b	Unbounded	Excellent	Good	Modern CSS Color Level 4 (future)
XYZ (D65)	X, Y, Z	Unbounded	Moderate	N/A (device-independent)	Intermediate conversion space
HSB/HSV	H, S, B	sRGB	Poor	Good	Color picker models
CMYK	C, M, Y, K	Print subtractive	Poor	N/A	Print production
CIE LUV	L, u, v*	Unbounded	Good	Moderate	Additive color mixing
HWB	H, W, B	sRGB	Poor	Good	CSS Color Level 4
Rec. 2020	R, G, B	Ultra-wide	Poor	Poor	HDR video production

Frequently Asked Questions

RGB interpolation draws a straight line through the sRGB cube. Complementary colors (e.g., blue #0000FF and yellow #FFFF00) sit on opposite corners, so the midpoint passes through the cube's center near grey (#808080). CIELAB and LCH avoid this because their geometry is designed around human perception. The midpoint in LAB space between blue and yellow is a desaturated lavender rather than grey, preserving chroma. For complementary pairs, always prefer LAB or LCH interpolation.

CIELAB and LCH spaces are unbounded. Interpolated values can map to RGB channels outside the 0-255 range. This tool clamps each channel to [0, 255] after back-conversion. Clamping can cause slight hue shifts at extreme saturation boundaries. If you notice flat spots in your gradient (multiple steps mapping to the same clamped color), reduce the chroma difference between your start and end colors or use HSL interpolation which is always in-gamut by construction.

Hue is a circular quantity. Going from H=350° to H=10° should traverse 20° (through 0°/360°), not 340° the long way around. This tool always takes the shortest arc: it computes the signed difference, and if the absolute difference exceeds 180°, it wraps in the opposite direction. This prevents unexpected rainbow bands when interpolating between hues that straddle the 0°/360° boundary.

On screen at 72-144 PPI, 8-12 steps are sufficient for a smooth perception across a typical UI element (200-400px wide). For print at 300 DPI across an A4 width (210mm), you need roughly 50-100 steps to avoid visible banding, especially in the CIELAB L* range of 20-80 where human sensitivity peaks. The tool supports up to 100 steps. For gradients applied as CSS backgrounds, the browser interpolates continuously, so the discrete steps serve as design tokens or waypoints rather than banding.

CIELAB (CIE 1976) was designed for perceptual uniformity, but it is not perfect. The CIE itself acknowledges non-uniformities, particularly in saturated blue regions, where ΔE*ab distances underrepresent perceived differences. CIEDE2000 corrects some of these issues but is a distance metric, not an interpolation method. For most design work, CIELAB provides substantially more uniform steps than RGB or HSL. If you require higher fidelity, Oklab (used in CSS Color Level 4) improves on CIELAB uniformity but is not yet implemented here.

Each swatch displays its contrast ratio against both white (#FFFFFF) and black (#000000). WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Check the displayed ratios before using a color as a text-on-background pair. Midtones (relative luminance near 0.18) often fail both white and black contrast simultaneously. The tool auto-selects white or black text per swatch based on which produces higher contrast.