Generate Tailwind CSS style color palette (50-950) automatically from a base color.
A. Tailwind CSS provides an 11-step color palette from 50 (lightest) to 950 (darkest), enabling a consistent color system.
A. Add the Tailwind Config format to theme.extend.colors in tailwind.config.js, or add CSS Variables format to your global CSS file.
A. The input base color corresponds to the 500 shade, with lighter and darker shades automatically generated.
A. Only letters, numbers, and hyphens (-) are allowed. Examples: primary, accent-blue, brand-500
Tailwind CSS adopts an 11-step color scale from 50 to 950, providing a consistent visual hierarchy. Each number represents brightness — lower numbers (50, 100) are very light colors, while higher numbers (800, 900, 950) are very dark. This system enables intuitive combinations like bg-primary-100 and text-primary-700 for backgrounds, text, and borders, greatly accelerating design decisions.
To integrate brand colors into Tailwind, add a custom palette to theme.extend.colors in tailwind.config.js. This generator converts the input base color to the HSL model and automatically generates a consistent palette by adjusting lightness at each step. Copying the generated code in Tailwind Config format lets you immediately use utility classes like primary-500 and primary-700 throughout your project.
When integrating a palette into a design system, a common pattern is to use 500 as the primary, 600-700 for hover and focus states, and 100-200 for backgrounds and highlighted areas. Exporting as CSS Variables allows the same color tokens to be reused in any environment — vanilla CSS, Sass, CSS-in-JS — beyond Tailwind, making it effective for maintaining design consistency in multi-framework projects.