Tailwind Color Generator
Generate a complete 50–950 shade scale from your brand color and get a ready-to-paste Tailwind config in one click.
What this page covers
This page explains the workflow and links directly to the relevant section of the main Chromaforge tool.
- Pick one base color and get an 11-step scale from 50 to 950 automatically.
- Copy the tailwind.config.js theme extend block directly into your project.
- Check contrast on the generated shades before shipping any text over them.
- Works locally in the browser — no upload, no account.
Which Tailwind versión does the output work with?
The exported config uses the standard Tailwind v3 theme.extend format. For Tailwind v4, use the CSS variables export instead and import the :root block as a CSS layer.
What is the 500 shade used for?
The 500 shade is the primary brand color in Tailwind conventions. Use 600 and 700 for hover and active states, and 50 and 100 for backgrounds and card surfaces.
Can I use more than one primary scale?
Yes. Add as many named scales to your Tailwind config as your design system needs. In practice, most interfaces work well with one primary scale, one neutral scale, and semantic colors for success, error and warning states.