Build a Tailwind theme
Generate 50 to 950 from a brand color and export a drop-in tailwind.config.ts snippet.
Tailwind Shade Scale Generator
Enter a base color, get a full 50-to-950 shade scale. Part of AI color palette generator.
Quick answer: 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).
Method
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.
Use the hex to RGB converter to normalize the source color first, then walk the scale through the WCAG contrast checker to confirm every step pairs with text. For full multi-color systems and synced surface tokens, Pro shade scales and exports.
Common use cases
Standardize a design system
Replace ad-hoc hex with a perceptually even scale your engineers can extend. Sanity-check the result with the color blindness simulator.
Fix muddy mid-tones
Move from sRGB to OKLCH and watch the 400 to 600 range stop turning gray.
Export tokens cross-platform
Export CSS, JSON, and Tailwind from one source so web and native stay in sync.
Frequently asked questions
One color, one scale.
Paletta generates coordinated scales for every color in your palette, with accessibility validation on every step.