Tailwind color palette generator
Enter a brand color and get an 11-step Tailwind scale (50–950), generated in OKLCH so every step has even perceived lightness. Your exact color is kept at its natural step. Preview the scale on real components and copy the code for Tailwind v4, v3 or CSS variables.
A 50–950 scale generated from #5B4BFF.
How to use the tailwind colors
- Enter your base color (HEX) and, optionally, a name for the token.
- Check the scale and the contrast notes for each step.
- Preview it on buttons, badges and alerts.
- Copy the code for Tailwind v4 (@theme), Tailwind v3 (tailwind.config.js) or CSS variables.
How the scale is built
Steps 50–950 follow lightness targets similar to Tailwind's default palette, computed in OKLCH. Chroma tapers toward the lightest and darkest steps so tints don't look neon and shades don't look muddy. Your base color is placed at the step whose lightness it matches and kept exactly.
Frequently asked questions
How do I add custom colors to Tailwind v4?
Paste the generated @theme block into your main CSS file. Utilities like bg-brand-500 and text-brand-900 become available automatically.
How do I add custom colors to Tailwind v3?
Paste the generated object under theme.extend.colors in tailwind.config.js.
Which step should I use for text and buttons?
Typically 600–700 for primary buttons and links on white, 800–900 for text, and 50–200 for backgrounds and borders. The contrast note on each step shows its ratio against white.