Free color tools · No signup · Everything runs in your browser
Original benchmark · v1.0.0

Tailwind Scale Accessibility Benchmark v1.0

A reproducible comparison of four interpolation methods used to turn the same shade-500 seed into an 11-step, 50–950 design-token scale.

Last updated: July 22, 2026

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

69/100OKLCH per-seed uniformity wins
4/4Method-rank agreement on holdout
72OKLCH outputs chroma-mapped to sRGB
100%Scales with monotonic measured lightness
  • 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.

HSL interpolation
0.448
sRGB interpolation
0.400
Linear-sRGB interpolation
0.751
OKLCH interpolation
0.362
Aggregate results for 100 reference seeds. Lower is better only for the two variation and hue-drift columns.
MethodMean step CVMedian step CVWorst CVLowest-CV seedsMedian max hue driftMapped shades
HSL interpolation0.4480.4320.8328/1005.0°0
sRGB interpolation0.4000.3730.64920/1004.5°0
Linear-sRGB interpolation0.7510.7631.1483/1002.9°0
OKLCH interpolation0.3620.3350.51569/1001.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.

MethodUnder 0.250.25–0.400.40–0.550.55–0.700.70+
HSL interpolation04033207
sRGB interpolation26019190
Linear-sRGB interpolation05251852
OKLCH interpolation6544000

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.

HSL interpolationCV 0.553 · hue drift 4.3°
50#F5F5F6100#E7E8EB200#C7CBD8300#97A4C8400#516FBF500#25459B600#274082700#273867800#242E4A900#1D2230950#14161C
sRGB interpolationCV 0.517 · hue drift 5.2°
50#F2F4F9100#E0E5F1200#BEC7E1300#92A2CD400#5C74B4500#25459B600#213D88700#1B3373800#152758900#0F1C3E950#091127
Linear-sRGB interpolationCV 0.989 · hue drift 14.1°
50#F8F9FA100#EFF0F4200#DBDCE7300#BDC0D5400#8C94BB500#25459B600#224192700#1F3B87800#1A3478900#152B65950#0F2151
OKLCH interpolationCV 0.397 · hue drift 2.1°
50#F1F4FA100#DEE4F2200#B8C6E3300#8BA1D0400#5673B6500#25459B600#1D3982700#152B66800#0B1B46900#040C28950#010310

Worst 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.

MethodSeedFamilyStep CVMax hue driftMapped shades
HSL interpolation#004645CPS 17800BTeal0.8322.2°0
sRGB interpolation#00444ECPS 11800BAqua0.6494.2°0
Linear-sRGB interpolation#740000CPS 06800VOrange1.14811.1°0
OKLCH interpolation#004259CPS 12800BCyan0.5152.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.

ControlSeedMethodLightness violationsStep CV
sRGB green#00FF00HSL interpolation10.350
sRGB cyan#00FFFFHSL interpolation10.460
sRGB magenta#FF00FFHSL interpolation10.304
sRGB yellow#FFFF00HSL interpolation20.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?

100Reference CPS seeds
4Interpolation methods
400Primary generated scales
4,400Primary emitted shades

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

  1. Normalize each input to uppercase six-digit sRGB HEX.
  2. Preserve the exact input at shade 500.
  3. Generate shades 50–400 toward white and 600–950 toward black with versioned mix weights.
  4. Interpolate in HSL, gamma-encoded sRGB, linear-light sRGB, or OKLCH.
  5. For OKLCH coordinates outside sRGB, reduce chroma at fixed lightness and hue before final output.
  6. Round only the final output to 8-bit HEX, then measure the emitted color.
  7. 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.

Counts across 1,100 shades and 300 action candidates per method.
MethodBody text on whiteBody text on blackWhite-text action candidatesBlack-text action candidates
HSL interpolation528/1,100572/1,100212/30088/300
sRGB interpolation528/1,100580/1,100204/300101/300
Linear-sRGB interpolation460/1,100650/1,100188/300116/300
OKLCH interpolation548/1,100564/1,100219/30086/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

Keep it colorful

Enjoying Color Pick?

Color Pick stays free, private, and account-free. Optional donations help cover hosting, testing, and new color tools.

Donate via SociabuzzOptional. Every tool remains free.