Color Studio
Turn one brand color into a full palette with CSS and Tailwind exports.
:root {
--brand-50: #eefcf5;
--brand-100: #d4f7e6;
--brand-300: #86eab8;
--brand-500: #5fe3a1;
--brand-700: #22c373;
--brand-900: #167e4a;
}colors: {
brand: {
50: "#eefcf5",
100: "#d4f7e6",
300: "#86eab8",
500: "#5fe3a1",
700: "#22c373",
900: "#167e4a",
},
},About this tool
Give this palette generator one brand color and it builds a full shade scale from 50 to 900, the same convention Tailwind uses, plus complementary, analogous, and triadic harmonies for accents. Every swatch copies its hex on click, and the whole palette exports as ready-to-paste CSS variables or a Tailwind config block. The shade math runs in HSL, adjusting lightness while preserving your hue.
Frequently asked questions
What do the 50 to 900 shade numbers mean?
It is the convention Tailwind popularised: 50 is the lightest tint (backgrounds), 500 sits near your base color, 900 is the darkest shade (text on light surfaces).
Which harmony should I use for an accent color?
Complementary gives maximum contrast against your brand color. Analogous colors sit next to it and feel calmer. Triadic gives a balanced three-color scheme.
How do I use the Tailwind export?
Paste the block into theme.extend.colors in tailwind.config, then use classes like bg-brand-500 or text-brand-900.