Tailwind CSS Colors: Finding, Converting & Customizing

Tailwind's Color System

Tailwind ships with 22 color families, each with 11 shades (50-950). Over 240 colors out of the box. The naming is intuitive: bg-blue-500, text-gray-700.

Every shade is calibrated for accessibility. Text on adjacent shade backgrounds meets WCAG AA contrast ratios.

The Default Palette

Neutrals (slate, gray, zinc, neutral, stone) differ in undertone. Slate is cool, zinc slightly warm, stone has brown undertone. Choose what complements your brand.

For most projects: one primary, one neutral, one accent. Resist using more than 3-4 families.

Finding the Right Color

The Tailwind Color Finder takes any hex and shows the closest Tailwind match with the exact delta. If not close enough, use the Color Scale tool to generate a custom 11-shade scale.

When converting from Figma, map each design color to the nearest Tailwind equivalent and document the mapping.

Building Custom Color Scales

Start with your brand color as the 500 shade. Generate lighter (50-400) by increasing lightness and decreasing saturation. Darker (600-950) by decreasing lightness.

The Tailwind Color Scale tool automates this. The output is a JS object for tailwind.config.js.

Tailwind to Vanilla CSS

The Tailwind to CSS tool converts utility classes to vanilla CSS. bg-blue-500 becomes background-color: #3b82f6. Useful for migration, debugging, or teaching.

Understanding the underlying values helps with custom utilities and debugging specificity issues.

Integrating Brand Colors

Use theme.extend.colors to add brand colors alongside defaults. Name them semantically: primary, secondary, accent — not brand-blue.

Generate a full shade scale for each brand color. Primary-50 for backgrounds, primary-500 for buttons, primary-900 for dark mode.

Dark Mode Strategies

Tailwind's dark: variant makes dark mode straightforward. But do not simply invert colors. Light text on dark needs different shades than dark on light.

Create a dark mode mapping: bg-white → bg-gray-900, text-gray-900 → text-gray-100, border-gray-200 → border-gray-700.

Best Practices

Establish color usage rules early. Backgrounds use 50/100, text uses 700/800, borders use 200/300. Prevents ad-hoc choices.

Avoid arbitrary values like bg-[#ff6b6b]. Add custom colors to config so they get proper names. Audit usage periodically.