Turn one brand color into a full, production-ready palette in seconds. Pick a base hex — or paste your existing brand color — and the generator builds a balanced 10-step scale (50 through 900) by holding your hue and saturation steady while stepping lightness from near-white to near-black. The result is the same kind of tonal ramp you'd find in a polished design system, ready to drop straight into your stack.
Why a full scale?
Real interfaces need range: light tints for backgrounds and hover states, mid-tones for borders and icons, and deep shades for text and emphasis. A lone hex can't cover all of that. A proper scale gives you accessible contrast pairings, consistent states, and a coherent look across light and dark modes — without hand-mixing a dozen variations in a design tool.
What you get
- A 10-stop scale (50–900) generated from your base color's hue and saturation
- Live swatches you can preview instantly as you tweak the input
- One-click copy on any swatch — grab the exact hex you need
- A ready-to-paste Tailwind color config, so you can wire the palette into
tailwind.configstraight away - A clean, predictable naming convention that matches what your team already expects
How it works
Enter a hex value (for example #ff9500) using the color picker or the text field, hit Generate, and the tool converts your color to HSL, fixes the hue and saturation, and redistributes lightness across ten evenly spaced stops. Everything runs locally in your browser — your colors never leave the page, there's nothing to install, and it's completely free to use.
Great for founders nailing down a brand, developers who need Tailwind tokens fast, and designers who want a sensible starting ramp to refine.