Tailwind CSS Color System Explained

Tailwind CSS ships with a carefully designed color system. Understanding how it works helps you build consistent, accessible UIs.

The Color Scale

Each color in Tailwind has 11 shades numbered 50 through 950. The 50 shade is the lightest, 950 is the darkest. The 500 shade is considered the "base" color. This scale provides enough granularity for backgrounds, borders, text, and hover states without overwhelming you with choices.

Semantic Usage Patterns

Use 50-100 shades for backgrounds, 200-300 for borders, 500-600 for primary elements and buttons, 700-800 for text on light backgrounds, and 900-950 for headings. Dark mode inverts this: use 900-950 for backgrounds and 50-200 for text.

Custom Colors

Extend the default palette in tailwind.config.js by adding colors under theme.extend.colors. Define your brand colors with a full scale for consistency. Use the DEFAULT key for the base shade so you can write text-brand instead of text-brand-500.

Accessibility Considerations

Not all color combinations meet WCAG contrast requirements. Text at shade 500 on a white background often fails AA standards. Use shade 600 or 700 for text to ensure 4.5:1 contrast ratio. Our Color Converter tool includes a WCAG contrast checker to verify your combinations.

Opacity Modifiers

Tailwind supports opacity modifiers like bg-blue-500/75 for 75% opacity. This is cleaner than defining separate RGBA values and works with any color in the palette. Use it for overlays, disabled states, and layered backgrounds.