Tailwind color scheme generator

How it works

1. 1. Enter a color using the color picker or a hex code. The input color becomes shade 500, the midpoint of the generated scale.
2. 2. The generator computes 10 additional shades by interpolating lightness and saturation in HSL toward near-white (shade 50) and near-black (shade 950), using perceptual weights tuned to match Tailwind's scale distribution.
3. 3. Name your color, then copy the palette as a tailwind.config.js snippet or as CSS :root variables. Click any individual swatch to copy that shade's hex value.

Using color scales in Tailwind

Tailwind's color system is built on consistent numeric scales. Once you add your palette to the config, you can reference any shade with utility classes like bg-brand-100, text-brand-700, or border-brand-300.

A common convention: use shades 50–100 for tinted backgrounds and surfaces, 200–400 for decorative borders and icons, 500–600 for primary actions and interactive elements, and 700–950 for headings and high-contrast text on light backgrounds.

Always verify contrast ratios for text-on-background combinations before shipping. Use the contrast checker to confirm WCAG AA or AAA compliance for your chosen shade pairs.

Frequently asked questions

What is a Tailwind color scale?

Tailwind CSS uses an 11-step color scale with shades numbered 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Shade 50 is the lightest (near-white) and 950 is the darkest (near-black). This system gives you predictable, consistent color variations for backgrounds, text, borders, and hover states across your UI.

Which shade should my brand color be?

Your primary brand color is typically placed at shade 500 or 600. Shade 500 works well as a button background with white text (check WCAG contrast first), while 600 and 700 are common for hover states. Lighter shades (50–200) work for backgrounds and tinted surfaces; darker shades (700–950) for headings and high-contrast elements.

How do I add this palette to my Tailwind project?

Copy the tailwind.config snippet and merge it into the theme.extend.colors section of your tailwind.config.js or tailwind.config.ts file. You can then use classes like bg-brand-500 or text-brand-700 anywhere in your templates. If you prefer CSS custom properties, use the CSS variables tab and reference them with var(--color-brand-500).

Can I use this for dark mode?

Yes. A complete color scale suits dark mode well because you can reassign which shade serves which role. Use shade 100 for text in dark mode where you would use 900 in light mode, and 900 for backgrounds where you would use 50 in light mode. Tailwind's dark: variant handles the switching.