Color Palette Generator
Pick one base color and generate a practical tint-and-shade palette with copyable hex values and CSS variables.
Turn one color into a usable scale
A single brand color is almost never enough to build a real interface. You need pale tints for backgrounds and hover states, mid tones for buttons and links, and deep shades for text and borders — all clearly related to the original so the UI feels cohesive. This generator takes one base color and produces a balanced ten-step scale of tints and shades in a click.
Each swatch shows its hex value and a numbered step (100–1000) that mirrors the naming systems used by Tailwind and most design tokens, so it drops neatly into an existing workflow. Click any swatch to copy its hex, or grab the whole palette as a block of CSS custom properties ready to paste into your stylesheet.
From extraction to generation
Pair it with the Color Palette Extractor extension to pull real colors from any website, then refine them here into a full working scale. Everything is generated locally in your browser.
Frequently Asked Questions
What does this palette generator create?
It creates a set of lighter tints and darker shades from one base color, plus copyable hex values for quick UI work.
Can I use these colors in Tailwind or CSS?
Yes. Copy individual hex values or copy the CSS variables block and paste it into a stylesheet or design token file.
Are the palettes saved?
No. The palette is generated in your browser only. Nothing is stored or uploaded.
Pull real palettes from any website, then tune them here.