OKLCH · TONAL SCALES
Color Shades & Tints Generator
Drop in one color and get a perceptually uniform scale — three modes (tonal, tints, shades), 3–13 steps, and exports for Tailwind v4 or plain CSS variables.
Tip
In a Tailwind v4 project, paste the Tailwind export under @theme { … } and your custom shade utilities like bg-brand-500 start working immediately.
Export scale
HEX list
#F6ECFF, #EDE0FF, #DAC9FF, #C2AAFF, #A583FF, #8B57F8, #7538E0, #5D28B5, #46198C, #2A085C, #0F002CCSS variables
:root {
--color-50: #F6ECFF;
--color-100: #EDE0FF;
--color-200: #DAC9FF;
--color-300: #C2AAFF;
--color-400: #A583FF;
--color-500: #8B57F8;
--color-600: #7538E0;
--color-700: #5D28B5;
--color-800: #46198C;
--color-900: #2A085C;
--color-950: #0F002C;
}Tailwind theme
brand: {
'50': '#F6ECFF',
'100': '#EDE0FF',
'200': '#DAC9FF',
'300': '#C2AAFF',
'400': '#A583FF',
'500': '#8B57F8',
'600': '#7538E0',
'700': '#5D28B5',
'800': '#46198C',
'900': '#2A085C',
'950': '#0F002C',
}Why OKLCH
HSL lightness lies. OKLCH does not.
For two decades the standard trick was to take HSL and step the L value from 90% to 10% — instant scale. The output is always disappointing: yellow-50 disappears into the page, blue-900 looks indistinguishable from black, the supposed "middle" is anything but.
OKLCH fixes this. Its L axis is perceptually uniform — moving from 0.7 to 0.5 looks like the same brightness change whether the hue is red, blue, or yellow. Two scales generated from different hues with the same L ladder will read as the same brightness at every step.
Every shade we generate here lives on the OKLCH ladder Tailwind v4 ships with: roughly L 0.97 at the 50 step down to L 0.15 at 950. Chroma is gently reduced near the extremes — pure whites and near-blacks have low saturation by physics. The result drops cleanly into a Tailwind theme.
Three modes, three jobs
The right output depends on the question you are answering.
Tonal (50 → 950)
Full scale on a fixed L ladder. Use this when extending a design system, building UI tokens, or matching Tailwind's naming convention.
Tints (lighter)
Steps from your color toward white. Use for layered backgrounds, hover states, and tint-overlays on top of a brand color.
Shades (darker)
Steps from your color toward near-black. Use for pressed states, text variants on light backgrounds, and dark-mode surfaces.