About the Tailwind Color Generator
Tailwind CSS ships with a full set of built-in color scales, but every real brand eventually needs its own custom color added to that same 50-950 structure so it behaves consistently with the rest of the framework's utility classes. This generator takes any brand color and produces a complete Tailwind-compatible scale, ready to paste straight into a tailwind.config file.
How it works
Your input color is positioned as the 500 step of the scale, matching Tailwind's own convention where 500 represents the primary, standard-intensity version of a color. The tool then computes the lighter steps (50 through 400) and darker steps (600 through 950) using lightness spacing modeled on Tailwind's own default palette, so your custom color scale feels visually consistent sitting alongside Tailwind's built-in colors like slate, indigo, or emerald.
Common use cases
- Adding a custom brand color scale to a Tailwind CSS project's config file
- Extending Tailwind's default palette with a new, on-brand named color
- Producing consistent hover and active state utility classes (like bg-brand-600) from one base color
- Replacing a generic Tailwind color like 'indigo' with a scale that matches actual brand guidelines
- Quickly prototyping how a new brand color would integrate into an existing Tailwind design system
Tips for best results
Once you've generated a scale, name it something specific in your config, like 'brand' or your actual product name, rather than overwriting one of Tailwind's built-in color names — this avoids confusing conflicts if you ever need both your custom color and the original Tailwind color in the same project. Test your new 500 and 600 steps specifically against white text using the Contrast Checker, since those are the steps most commonly used for button backgrounds. Once added, remember that Tailwind's IntelliSense autocomplete in most editors will pick up your new custom color name automatically after the config file is saved, making it just as easy to reach for as any of Tailwind's built-in colors while you're writing markup.
Frequently asked questions
The output is a ready-to-paste JavaScript object matching Tailwind's expected color scale format, with numbered keys from 50 to 950 mapped to hex values, structured for direct use inside the theme.extend.colors section of a tailwind.config.js file.
Tailwind CSS added the 950 step in more recent versions to provide an even darker option for things like dark-mode backgrounds, so this generator includes it to stay compatible with current Tailwind conventions.
The lightness spacing is modeled on Tailwind's own default scales specifically so a custom color sits naturally alongside built-ins like slate or indigo, rather than having noticeably different contrast steps.
Yes — run the generator once per brand color you need (for example, once for a primary color and again for an accent color) and add each resulting scale under its own name in your Tailwind config.
Most Tailwind setups pick up config changes automatically via hot reload, but if new utility classes using your custom color name aren't appearing, restarting the dev server will force Tailwind to regenerate its utility classes from the updated config.