Color palette generator
Start from your brand color and get a full, perceptually uniform 50 to 950 scale ready for your design system, along with harmonious combinations. Your original color is kept exactly at its matching step.
Processed 100% in your browser
How can I verify this?
Your files are never uploaded: they are processed on your device. Check it yourself: load the page, turn off your WiFi and the tool keeps working. Or open your browser’s developer tools (F12), go to the Network tab, and see that no file leaves your device.
Ctrl + Enter runCtrl + C copy result
How to use
- 1Type your base color in any format or click “Random” for inspiration.
- 2Name the palette (for example “brand” or “primary”).
- 3Pick a harmony to see colors that go with your base.
- 4Export the scale as CSS variables, Tailwind, SCSS or JSON, or click a shade to copy it.
Use cases
- Create the color scale for a design system or a Tailwind CSS theme.
- Generate hover states, soft backgrounds and borders from a single brand color.
- Find matching secondary and accent colors.
- Share a palette with your team via a link.
Frequently asked questions
Why is the scale computed in OKLCH instead of HSL?
In HSL, a yellow and a blue with the same “lightness” look very different. OKLCH is perceptual: every step has the same apparent lightness whatever the hue, just like Tailwind CSS v4 palettes.
What do the numbers 50 to 950 mean?
It is the modern design-system convention: 50 is the lightest shade (backgrounds), 500–600 are usually the main ones (buttons) and 900–950 the darkest (text).
Does my original color appear in the palette?
Yes. It is placed exactly at the step with the closest lightness, marked with a dot, and the other shades are generated around it with the same hue.
How do I use the palette in Tailwind CSS?
With Tailwind v4 paste the @theme block into your CSS; with Tailwind v3 add the object to theme.extend.colors in tailwind.config.js. Then use classes like bg-brand-500 or text-brand-900.