Dev · Client-side only
Color palette generator
One brand color → 11-step Tailwind-style scale + complementary, analogous, and triadic mates. Copy any swatch or the full token block.
Brand scale
Harmonies
CSS custom properties
:root{
--brand-50: #fef9f6;
--brand-100: #fdf0e7;
--brand-200: #fadcc6;
--brand-300: #f7be97;
--brand-400: #f29b5f;
--brand-500: #f9761a;
--brand-600: #e56106;
--brand-700: #bd5005;
--brand-800: #8b3b04;
--brand-900: #592602;
--brand-1000: #321501;
--brand: #f97316;
--brand-complement: #169cf9;
}