Color palette generator
Generate a scale of shades and tints from a single base color.
🔒 100% client-side — no data sent
Color palette generator to create shades, tints and tones from a single base color in one click. Perfect for building a consistent design system or light and dark variants for your components. All colors are generated locally in your browser, with no data sent.
FAQ
What's the difference between a tint, a shade and a tone?
A tint lightens a color by adding white, a shade darkens it with black, and a tone desaturates it with gray. The tool generates these variations automatically.
How do I create a palette for a design system?
Start from a base color and derive it into several steps (e.g. 50 to 900) to cover backgrounds, borders and text. The tool produces a scale you can export in HEX.
In what format can I get the colors?
Each shade comes with a copy-ready HEX code you can use directly in CSS or in your variables. You can enter your base color in HEX.
How many shades should I generate per color?
A scale of 9 to 10 steps is a common standard (like Tailwind) to cover every use case. The tool lets you preview the whole range.