Shade Scale Generator
Enter a base color, get a full 50-to-950 shade scale.
colors: {
'color': {
'50': '#a8f5ff',
'100': '#97e4ff',
'200': '#7ec9ff',
'300': '#62abff',
'400': '#468eff',
'500': '#246bdd',
'600': '#004ebe',
'700': '#0031a0',
'800': '#000d82',
'900': '#000069',
'950': '#0d0050',
}
}How it works
- 1
Enter your base color
This becomes the 500 step in your scale.
- 2
Review the generated scale
11 shades from near-white (50) to near-black (950).
- 3
Copy the output
Choose Tailwind config, CSS variables, or JSON.
What is a shade scale?
A shade scale is a set of lightness variations derived from a single base color. In Tailwind CSS, scales run from 50 (lightest) through 500 (base) to 950 (darkest), with each step serving a specific role: 50 for backgrounds, 100-200 for hover states, 500 for primary actions, 700-900 for text.
Building perceptually uniform scales by hand is tedious. Equal numeric steps in HSL do not produce equal visual steps. OKLCH, a perceptually uniform color space, solves this: equal delta-L values yield visually equal lightness jumps.
A shade scale generator automates this: input one color, output a complete 11-step scale with even perceptual spacing. The result is ready for Tailwind configuration, CSS custom properties, or design token JSON.
One color, one scale.
Paletta generates coordinated scales for every color in your palette, with accessibility validation on every step.