Tailwind Color Generator

Tailwind CSS uses a numbered scale from 50 (lightest) to 950 (darkest) for each color. For example, blue-100 is very light blue and blue-900 is very dark. This scale gives you 11 shades per color, providing enough range for backgrounds, borders, text, and hover states without naming individual colors.

The generator converts your base color to HSL (Hue, Saturation, Lightness), then creates 11 shades by adjusting the Lightness value while keeping the Hue constant. This approach matches how Tailwind's built-in palettes are designed, ensuring harmonious transitions between shades.

Use shade 500 or 600 as your primary action color (buttons, links) — it's typically the most saturated and visually distinctive. Use 50–200 for light backgrounds and hover states, 700–900 for dark text or pressed states. Your input base color maps closest to shade 500.

Copy the generated tailwind.config.js snippet and paste it into your tailwind.config.js under theme.extend.colors. This preserves all built-in Tailwind colors and adds your custom palette alongside them. You can then use classes like bg-primary-500, text-primary-900, etc.

CSS Custom Properties (variables) like --color-primary-500 let you use your color scale without Tailwind's build step. Useful for non-Tailwind projects, email templates, or when you need to change themes dynamically at runtime with JavaScript. Reference them in CSS as var(--color-primary-500).

Yes. Tailwind v4 uses CSS-first configuration with @theme directive. Copy the CSS variables output, then reference them in your @theme block: --color-primary-500: #3b82f6; This approach also works with Tailwind v3 by pasting into the extend.colors config.