Andrilla

Tailwind CSS Color Palette Generator

globals.css

--brand-primary-50: 356 100% 97%;
--brand-primary-100: 357 100% 90%;
--brand-primary-200: 359 100% 68%;
--brand-primary-300: 358 98% 64%;
--brand-primary-400: 358 75% 60%;
--brand-primary-500: 358 68% 57%;
--brand-primary-600: 358 55% 50%;
--brand-primary-700: 358 64% 37%;
--brand-primary-800: 358 47% 34%;
--brand-primary-900: 358 51% 17%;
--brand-primary-950: 358 60% 12%;

tailwind.config.ts

colors: {
\tbrand-primary: {
\t\t50: 'hsl(var(--brand-primary-50) / <alpha-value>)',
\t\t100: 'hsl(var(--brand-primary-100) / <alpha-value>)',
\t\t200: 'hsl(var(--brand-primary-200) / <alpha-value>)',
\t\t300: 'hsl(var(--brand-primary-300) / <alpha-value>)',
\t\t400: 'hsl(var(--brand-primary-400) / <alpha-value>)',
\t\t500: 'hsl(var(--brand-primary-500) / <alpha-value>)',
\t\t600: 'hsl(var(--brand-primary-600) / <alpha-value>)',
\t\t700: 'hsl(var(--brand-primary-700) / <alpha-value>)',
\t\t800: 'hsl(var(--brand-primary-800) / <alpha-value>)',
\t\t900: 'hsl(var(--brand-primary-900) / <alpha-value>)',
\t\t950: 'hsl(var(--brand-primary-950) / <alpha-value>)',
\t}
}