How to Pick Tailwind CSS Colors

Tailwind CSS ships with a carefully designed color palette, but scrolling through documentation to find the exact shade you need is slow. The Tailwind Color Picker lets you visually browse every color and shade in the palette, copy the exact class name or hex value, and get back to building your UI.

Understanding the Tailwind color system

Tailwind’s color palette is organized into named color families, each with 11 shades numbered from 50 to 950. The numbering follows a consistent lightness scale: 50 is the lightest tint (almost white), 500 is the “base” shade, and 950 is the darkest (almost black). This systematic approach means blue-500 and red-500 have similar perceptual lightness, making it easy to swap colors without disrupting visual balance.

The palette is designed for UI work rather than artistic expression. Colors are optimized for contrast ratios, readability, and consistency across the spectrum. The gray scales (slate, gray, zinc, neutral, stone) have subtle undertones that pair well with their corresponding hue families — slate has a blue undertone, stone has a warm undertone.

Tailwind v3 and v4 use slightly different default palettes. The picker reflects the standard palette, but if your project uses a custom tailwind.config with extended or overridden colors, the utility class names will work but the hex values may differ from what you see in the picker.

Tips and best practices

• Use 50-100 for backgrounds, 600-900 for text. Light shades work well for page and card backgrounds, while dark shades provide sufficient contrast for readable body text.
• Pair colors from the same family for consistency. Use blue-100 for a background, blue-600 for text on that background, and blue-500 for interactive elements. This creates a cohesive color story.
• Check contrast ratios between your chosen shades. Not all shade combinations meet WCAG AA contrast requirements. text-gray-500 on a white background, for example, fails the 4.5:1 ratio for normal text. Verify your pairing with the Color Contrast Checker before shipping.
• Use semantic color names in your config. Map Tailwind colors to semantic names like primary, danger, and success in your tailwind.config so you can change the palette without updating every template.
• Copy hex values for design tools. When working in Figma or Sketch, use the hex values from the picker to keep your design files aligned with your Tailwind implementation.

Common issues

• Custom theme colors not appearing. The picker shows the default Tailwind palette. If your project extends or overrides colors in tailwind.config.js, the custom values will not be reflected here.
• Color looks different in the browser. Tailwind colors are defined in sRGB hex. On wide-gamut displays, colors may appear more vivid than on standard monitors. This is a display characteristic, not a Tailwind issue.
• Dark mode colors need manual selection. Tailwind’s dark mode requires you to choose appropriate shade inversions. A common pattern is swapping bg-white to bg-gray-900 and text-gray-900 to text-gray-100.