Tailwind Shade Generator

What this tool does

Tailwind Shade Generator builds the 50 to 950 colour scale used by Tailwind CSS from a single input colour, letting you choose which step — 500 by default — should match that colour exactly rather than only approximate it. The rest of the scale is derived with the same OKLCH lightness and chroma curve used across the ramp, and the result is formatted as a ready tailwind.config.js colours object plus matching CSS custom properties.

Adding a brand colour to a Tailwind project usually means supplying the whole 50 to 950 scale, not just one hex code, so that classes like bg-brand-100 and text-brand-700 exist and look related. Hand-tuning eleven shades to match a single reference colour at any particular step is slow and easy to get visibly wrong.

This generator fixes that by choosing a target step — 500 by default, but any step from 50 to 950 — and solving the OKLCH lightness and chroma curve so that exact step reproduces your input colour, while the rest of the scale follows the same proportional curve used in Color Shades Generator. The output is written directly as a tailwind.config.js colours object and as CSS custom properties, so it can be pasted straight into a project.

How to use Tailwind Shade Generator

1. Enter your base colour, or pick it with the native colour picker.
2. Choose which Anchor step should exactly equal that colour, from 50 up to 950.
3. Set a Colour name, which becomes the Tailwind key and the CSS variable prefix.
4. Review the generated ramp; the anchor step is marked and matches your input exactly.
5. Copy or download the tailwind.config.js snippet for theme.extend.colors.
6. Copy or download the matching CSS custom properties if your project uses Tailwind CSS v4's CSS-first configuration.

Tips for better results

• Anchor at 600 instead of 500 if your brand colour is already on the darker side; it keeps more of the lighter steps usable as backgrounds.
• Use a short, lowercase colour name such as brand or accent so the generated Tailwind classes stay easy to type.
• Tailwind CSS v4 projects can use the CSS custom properties output directly inside an @theme block instead of editing tailwind.config.js.
• Re-generate the ramp after any brand colour change rather than editing individual hex codes, so every step keeps moving together.

Common use cases

• Onboarding a new brand colour into an existing Tailwind CSS project with a complete, consistent 50-950 scale.
• Matching a client-supplied brand hex code to a specific Tailwind step such as 600 instead of the usual 500.
• Migrating a Tailwind v3 colours object to v4's CSS custom properties without recomputing every shade by hand.
• Keeping a design system's accent colour scale in sync across a tailwind.config.js file and a separate CSS stylesheet.

Common mistakes to avoid

• Anchoring at 500 by habit when the brand colour is actually meant to be used as a light background or a dark heading colour elsewhere in the scale.
• Typing spaces or punctuation into the colour name field, which Tailwind class names and CSS custom property names cannot contain.
• Forgetting to update text and border utility classes after renaming the generated colour key, leaving old class names pointing at nothing.