Tailwind Color Palette Generator
Generate Tailwind CSS style 50-950 palettes from a single color.
Base step: 500
Contrast Ratio
| Step | Color | vs White | vs Black | Text preview |
|---|---|---|---|---|
| 50 | 1.1:1Fail | 19.3:1AAA | AaAa | |
| 100 | 1.2:1Fail | 17.1:1AAA | AaAa | |
| 200 | 1.5:1Fail | 14.2:1AAA | AaAa | |
| 300 | 1.9:1Fail | 10.9:1AAA | AaAa | |
| 400 | 2.7:1Fail | 7.8:1AAA | AaAa | |
| 500 | 4.0:1Fail | 5.2:1AA | AaAa | |
| 600 | 5.7:1AA | 3.7:1Fail | AaAa | |
| 700 | 8.0:1AAA | 2.6:1Fail | AaAa | |
| 800 | 11.2:1AAA | 1.9:1Fail | AaAa | |
| 900 | 15.3:1AAA | 1.4:1Fail | AaAa | |
| 950 | 19.7:1AAA | 1.1:1Fail | AaAa |
Export code
custom: {
50: '#f0f6ff',
100: '#dbe9ff',
200: '#bcd6ff',
300: '#92bcff',
400: '#619dff',
500: '#347bee',
600: '#1961d2',
700: '#004ab2',
800: '#003687',
900: '#00225a',
950: '#000924',
}OKLCH-based Palette Generation Principle
This tool generates palettes by systematically adjusting Lightness in the OKLCH color space. OKLCH is a perceptually uniform color space based on human visual perception, creating much more natural color steps than simply adjusting brightness in HSL or RGB. Tailwind CSS v4 also adopts OKLCH as the default color space.
Each palette step (50-950) has a fixed target lightness. Step 50 is nearly white at L≈97%, while step 950 is very dark at L≈15%. Chroma and Hue maintain the base color, but in extreme lightness regions, chroma is naturally reduced to fit within the physical limits of the sRGB gamut.
Generated palettes are also verified for accessibility using WCAG luminance contrast standards. The contrast ratio against white/black backgrounds is calculated for each step, showing AA (4.5:1) and AAA (7:1) compliance at a glance.