Tailwind Palette Generator
Turn a single color into a full Tailwind-style 50–950 shade scale with copy-ready config.
CSS variables
:root {
--color-brand-50: #f4f7fb;
--color-brand-100: #d9e6f2;
--color-brand-200: #b3cce6;
--color-brand-300: #8cb3d9;
--color-brand-400: #6699cc;
--color-brand-500: #4080bf;
--color-brand-600: #336699;
--color-brand-700: #264d73;
--color-brand-800: #1a334d;
--color-brand-900: #122436;
--color-brand-950: #0b1722;
}Tailwind v4 @theme
@theme {
--color-brand-50: #f4f7fb;
--color-brand-100: #d9e6f2;
--color-brand-200: #b3cce6;
--color-brand-300: #8cb3d9;
--color-brand-400: #6699cc;
--color-brand-500: #4080bf;
--color-brand-600: #336699;
--color-brand-700: #264d73;
--color-brand-800: #1a334d;
--color-brand-900: #122436;
--color-brand-950: #0b1722;
}About this tool
The scale keeps your color's hue and saturation while stepping lightness — the same technique Tailwind and Material use. Paste the @theme block into your Tailwind v4 CSS to get brand-50 through brand-950 utilities instantly.