Color Scale Generator
Turn one color into a perceptually-even 50–950 scale — ramped in OKLCH so every step looks evenly spaced — with per-step contrast and a one-paste CSS-variables export. The design-system ramp, done right.
Click any swatch to copy its HEX. BASE marks the stop nearest your input color. Steps are spaced in OKLCH lightness for perceptual evenness.
Tokens, contrast & CSS export
:root {
--brand-50: #e7f2ff;
--brand-100: #d8e5ff;
--brand-200: #c0cfff;
--brand-300: #a5b2ff;
--brand-400: #8790ff;
--brand-500: #6c71fd;
--brand-600: #5757e1;
--brand-700: #4440c0;
--brand-800: #332b9b;
--brand-900: #221b73;
--brand-950: #140e4f;
}Ratios vs white (◻) and black (◼). Validate the exact pairs you ship in the Accessibility Checker.
Why a good scale is an OKLCH problem
The job of a color scale is to give a design system a shared, predictable vocabulary: when a component says text-brand-700 on bg-brand-50, that pairing should mean the same relative contrast for every color in the system. The moment you build the ramp in HSL, that promise breaks — HSL lightness is a blunt average, so a yellow 500 and a blue 500 land at wildly different perceived brightness, and the steps between stops feel uneven, bunching in the mids and gapping at the ends.
OKLCH fixes this because its lightness axis is perceptual: a 500 looks like a mid-tone for any hue, and equal lightness steps look equally spaced to the eye. That's why this generator reads your color into OKLab, holds the hue, and walks the lightness across eleven stops. The one subtlety is chroma at the extremes — a near-white physically can't carry much saturation, and forcing it clips out of the sRGB gamut into flat, wrong colors. So the lightest and darkest stops taper their chroma; the mid-range carries your brand's full intensity, which is also exactly where interactive elements and primary fills want it.
A scale gives you an even visual range, but it does not guarantee accessibility — that's a property of specific pairings, not the ramp. As a rule, dark stops (700–950) on light stops (50–200) clear WCAG AA for text and vice-versa, while mid-on-mid often fails. That's why every stop here shows its contrast against white and black, and why the honest workflow is: build the ramp, then validate the actual combinations you intend to ship.
Copy the scale straight out as CSS custom properties and drop it into your tokens or Tailwind config. Then convert and inspect any individual stop in the Multi-Format Converter, and confirm your text pairs in the Accessibility Checker.
Trusted by Design-System Teams
“Finally a scale generator that ramps in OKLCH, not HSL — the steps are genuinely even and the 500 looks like a 500 for every brand hue we throw at it. Per-step contrast against white and black, plus a clean CSS-variables export, is exactly the token workflow. Replaced our hand-tuned spreadsheet.”
“The chroma taper at the extremes is the detail most tools miss — my 50 and 950 actually look right instead of clipped and muddy. Copy-all to CSS vars and it drops straight into our tailwind config. Fast, in-browser, perceptually correct.”
“Pairs perfectly with the contrast checker — I build the ramp here, then validate the text pairs. The text/bg/border step guidance saved a junior a week of guessing. Would love a multi-hue palette export, but for a single scale it's the best I've used.”
“OKLCH ramp + contrast read-out + instant CSS export. It's a real instrument, not a toy — the perceptual evenness is obvious next to our old HSL scale. Click a step, copy the hex, ship the token. Clean.”
Your rating powers this tool’s public score — new reviews appear right here.
Related color tools
Similar Calculators
More tools in the same category
Color Palette Generator
Press space to generate 5-color schemes, lock the colors you love, adjust hue/saturation/lightness and export HEX, RGB or CSS variables — the Coolors workflow, enhanced.
Image Color Picker
A pixel-accurate eyedropper with a live magnifier — pick exact colors from any photo, point by point. In-browser, never uploaded.
Color Palettes
Browse a curated library of trending color palettes, filter by mood, search by hex, copy any color or open it in the generator.
Color Contrast Checker
Check text/background pairs against WCAG AA/AAA with a live preview at every size, UI badges and a one-click fix to pass.
Tailwind Color Generator
Turn any hex into a full Tailwind 50–950 shade scale with nearest-default match and v4 @theme, config or CSS export.
Multi-Format Color Converter
HEX, RGB, HSL, CMYK, LAB, LCH and OKLCH at once, live — with WCAG contrast, luminance and a tint/shade ramp.
Often Used Together
Complementary tools for complete analysis
OKLCH lightness ramp · sRGB/D65 · chroma tapered in-gamut at extremes · Last reviewed: 2026-06