Direct answer
OKLCH interpolation had the lowest mean adjacent-step coefficient of variation in the frozen 100-seed reference corpus under protocol v1.0. The result is specific to these weights, metrics, and sRGB output rules—not evidence that one method is universally best.
OKLCH recorded a mean adjacent-step coefficient of variation of 0.362 and the lowest variation for 69 of 100 reference seeds. Its median maximum measured hue drift was 1.5°.
Key findings
- OKLCH was the most consistent method for this uniformity metric, but it also produced out-of-sRGB intermediate coordinates that required explicit chroma reduction.
- Gamma-encoded sRGB ranked second by mean step variation and won 20 individual seeds without requiring gamut mapping.
- Linear-sRGB produced the highest variation under these fixed mix weights. Linear-light mixing remains physically meaningful for light calculations; this result only describes the emitted 11-step scale under this protocol.
- All 400 primary scales decreased monotonically in measured OKLCH lightness, so the methods differed in spacing and hue behavior rather than ordering failures.
Complete method comparison
Coefficient of variation divides the population standard deviation of ten adjacent Delta E OK steps by their mean. Lower values indicate more even measured spacing within a scale.
| Method | Mean step CV | Median step CV | Worst CV | Lowest-CV seeds | Median max hue drift | Mapped shades |
|---|---|---|---|---|---|---|
| HSL interpolation | 0.448 | 0.432 | 0.832 | 8/100 | 5.0° | 0 |
| sRGB interpolation | 0.400 | 0.373 | 0.649 | 20/100 | 4.5° | 0 |
| Linear-sRGB interpolation | 0.751 | 0.763 | 1.148 | 3/100 | 2.9° | 0 |
| OKLCH interpolation | 0.362 | 0.335 | 0.515 | 69/100 | 1.5° | 72 |
Variation distribution
Averages can hide unstable samples. These counts show where each method's 100 reference scales fall across fixed coefficient-of-variation buckets.
| Method | Under 0.25 | 0.25–0.40 | 0.40–0.55 | 0.55–0.70 | 0.70+ |
|---|---|---|---|---|---|
| HSL interpolation | 0 | 40 | 33 | 20 | 7 |
| sRGB interpolation | 2 | 60 | 19 | 19 | 0 |
| Linear-sRGB interpolation | 0 | 5 | 25 | 18 | 52 |
| OKLCH interpolation | 6 | 54 | 40 | 0 | 0 |
The complete per-seed distributions remain available in the raw JSON and CSV rather than being reduced to this table alone.
One seed, four visibly different scales
The frozen example below uses Balanced Deep Blue (CPS 22700B, #25459B). Every method preserves this exact value at shade 500.
#F5F5F6100#E7E8EB200#C7CBD8300#97A4C8400#516FBF500#25459B600#274082700#273867800#242E4A900#1D2230950#14161C#F2F4F9100#E0E5F1200#BEC7E1300#92A2CD400#5C74B4500#25459B600#213D88700#1B3373800#152758900#0F1C3E950#091127#F8F9FA100#EFF0F4200#DBDCE7300#BDC0D5400#8C94BB500#25459B600#224192700#1F3B87800#1A3478900#152B65950#0F2151#F1F4FA100#DEE4F2200#B8C6E3300#8BA1D0400#5673B6500#25459B600#1D3982700#152B66800#0B1B46900#040C28950#010310Worst observed variation by method
Publishing unfavorable samples is part of the benchmark. “Worst” here means the highest adjacent-step coefficient of variation inside this frozen corpus—not a judgment of the source color.
| Method | Seed | Family | Step CV | Max hue drift | Mapped shades |
|---|---|---|---|---|---|
| HSL interpolation | #004645CPS 17800B | Teal | 0.832 | 2.2° | 0 |
| sRGB interpolation | #00444ECPS 11800B | Aqua | 0.649 | 4.2° | 0 |
| Linear-sRGB interpolation | #740000CPS 06800V | Orange | 1.148 | 11.1° | 0 |
| OKLCH interpolation | #004259CPS 12800B | Cyan | 0.515 | 2.8° | 0 |
Synthetic controls that broke lightness order
All 400 primary scales were monotonic, but the separate boundary controls exposed four HSL failures. These samples are retained in the raw result rather than removed from the release.
| Control | Seed | Method | Lightness violations | Step CV |
|---|---|---|---|---|
| sRGB green | #00FF00 | HSL interpolation | 1 | 0.350 |
| sRGB cyan | #00FFFF | HSL interpolation | 1 | 0.460 |
| sRGB magenta | #FF00FF | HSL interpolation | 1 | 0.304 |
| sRGB yellow | #FFFF00 | HSL interpolation | 2 | 0.460 |
Research question and scope
Question: When one opaque sRGB seed is anchored at shade 500 and mixed toward white and black using the same frozen weights, how do HSL, sRGB, linear-sRGB, and OKLCH differ in adjacent perceptual spacing, lightness order, hue drift, sRGB gamut mapping, and contrast against white and black?
The 100 reference seeds come from 30 chromatic CPS families. Each family contributes three seeds; every third family contributes a fourth. Eligible candidates use OKLCH lightness from 0.35 through 0.78 and chroma of at least 0.04, then are sampled deterministically across the family's lightness-sorted candidates.
A separate 20-seed holdout corpus tests rank stability. Twelve synthetic controls exercise vivid sRGB boundaries, low-chroma colors, and neutrals. Neither group changes the primary figures.
Method summary
- Normalize each input to uppercase six-digit sRGB HEX.
- Preserve the exact input at shade 500.
- Generate shades 50–400 toward white and 600–950 toward black with versioned mix weights.
- Interpolate in HSL, gamma-encoded sRGB, linear-light sRGB, or OKLCH.
- For OKLCH coordinates outside sRGB, reduce chroma at fixed lightness and hue before final output.
- Round only the final output to 8-bit HEX, then measure the emitted color.
- Calculate ten adjacent Delta E OK distances, lightness order, hue drift, gamut mapping, and contrast against white and black.
Read the exact shade weights, formulas, thresholds, and version identifiers in the full benchmark methodology.
White and black contrast evidence
The table counts emitted shades at or above 4.5:1 against explicit white or black backgrounds. It also counts shades 500, 600, and 700 that could pair with white or black normal text at that threshold. Ratios are never rounded before pass/fail comparison.
| Method | Body text on white | Body text on black | White-text action candidates | Black-text action candidates |
|---|---|---|---|---|
| HSL interpolation | 528/1,100 | 572/1,100 | 212/300 | 88/300 |
| sRGB interpolation | 528/1,100 | 580/1,100 | 204/300 | 101/300 |
| Linear-sRGB interpolation | 460/1,100 | 650/1,100 | 188/300 | 116/300 |
| OKLCH interpolation | 548/1,100 | 564/1,100 | 219/300 | 86/300 |
Limitations
- The 100 reference seeds are a stratified Color Pick CPS corpus, not a random sample of all possible colors and not a list of common brands.
- Results change when endpoints, weights, output gamut, gamut mapping, precision, or metric definitions change.
- Delta E OK is used as a practical perceptual-distance indicator; equal numeric steps do not guarantee equal appearance in every viewing condition.
- Contrast is measured only against opaque sRGB white and black. Typography, opacity, images, states, component geometry, and user testing are outside this benchmark.
- HSL, sRGB, linear-sRGB, and OKLCH each optimize different properties. No universal overall score or winner is published.
- Tailwind is a trademark of Tailwind Labs. This independent benchmark is not affiliated with or endorsed by Tailwind Labs.
The title describes the 11-step 50–950 scale convention documented by Tailwind CSS. Color Pick does not reproduce or reverse-engineer Tailwind's palette-generation process, and this independent research is not affiliated with Tailwind Labs.
Reproduce, inspect, and cite
Use the local Web Worker runner to repeat one seed, the 100-seed reference corpus, the holdout, or the controls. The dataset registry provides full JSON, flat CSV, corpus files, protocol manifest, checksums, TypeScript engine, generator source, and BibTeX.
Color Pick. “Tailwind Scale Accessibility Benchmark v1.0.” Version 1.0.0, July 22, 2026. https://colorpick.site/benchmarks/tailwind-scale-accessibility/Protocol: scale-generation-protocol-1.0.0
Corpus: cps-stratified-seed-corpus-1.0.0
Metrics: scale-accessibility-metrics-1.0.0
Results checksum: sha256:aa5d4ccd43dea7ef4c9434f606c1aad3646465a8b1fce0fe4d910a904ea658cc
Primary references
- W3C CSS Color Module Level 4 — OKLCH, interpolation spaces, and sRGB gamut mapping concepts.
- W3C Understanding SC 1.4.3 — text contrast thresholds and no-rounding guidance.
- W3C Understanding SC 1.4.11 — non-text component and state contrast context.
- Tailwind CSS color documentation — the documented 11-step 50–950 naming convention.
