Generate custom 50–950 color scales for Tailwind CSS v4 from any base color. Export as @theme directives or standard CSS variables.
Generated Code
About the Tailwind Color Generator
The Tailwind Color Generator is designed for the CSS-first configuration model in Tailwind CSS v4. Instead of manually tweaking 11 different hex values, provide your brand color and the generator instantly calculates a perfect 50–950 scale.
How It Works
Your base color becomes the 500 weight. The tool calculates 5 tints (mixed with white) for the lighter weights (50–400) and 5 shades (mixed with black) for the darker weights (600–950). This ensures a mathematically smooth transition across your entire palette.
Output Formats
Tailwind CSS v4 (@theme): Uses the native @theme directive, enabling utility classes like text-primary-500 automatically.
CSS Variables (:root): Standard custom properties that work in any framework or vanilla CSS.
Frequently Asked Questions
Tailwind CSS v4 introduces a CSS-first configuration approach using the @theme directive. Instead of configuring colors in a tailwind.config.js file, you define them directly in your CSS as custom properties. This makes configuration more native to CSS and easier to integrate.
The generator creates a harmonious 11-step scale (50–950) by interpolating your base color. The 500 weight is your exact base color. Lighter weights (50–400) are generated by mixing with white (tints), while darker weights (600–950) are created by mixing with black (shades).
Yes! Click 'Add Color Scale' to add as many base colors as you need. Customize the name of each scale (like primary, secondary, or brand) and they will all be combined into a single code block.
Absolutely. If you're using Tailwind CSS v4, copy the @theme output and paste it into your main CSS file. For older versions or other frameworks, use the CSS Variables output format instead.
The @theme output is specific to Tailwind CSS v4. It creates CSS variables and registers those colors with Tailwind's utility system so classes like text-primary-500 work automatically. The CSS Variables output creates standard :root custom properties without Tailwind-specific integration.