Design tool · #02
Color palette generator
Pick a base color. Get a full Tailwind-style shade scale plus complementary hues. Click any swatch to copy it.
Base color
Shade scale
Brand scale
Harmonies
Complementary hues
Export
CSS variables
globals.css
:root {
--brand-50: #fff6f0;
--brand-100: #feeadc;
--brand-200: #fdd8be;
--brand-300: #fcbd92;
--brand-400: #fb9956;
--brand-500: #f9761a;
--brand-600: #db5d06;
--brand-700: #ae4a04;
--brand-800: #7c3503;
--brand-900: #502202;
--brand-950: #321501;
}