Tailwind's Color Palette

Tailwind's default color palette contains 22 named color families, each with 11 shades numbered from 50 to 950. The families include neutrals (slate, gray, zinc, stone, neutral), warm tones (red, orange, amber, yellow), cool tones (lime, green, emerald, teal, cyan, sky, blue, indigo, violet), and vibrant accents (purple, fuchsia, pink, rose). Every shade is pre-approved for use in your design system.

Shade numbers communicate lightness: 50 is nearly white (a faint tint), 100–300 are light pastels, 400–600 are vibrant mid-tones, 700–800 are dark and saturated, and 900–950 are nearly black. As a rule of thumb, use 50–200 for backgrounds, 400–600 for icons and accents, and 700–900 for text to guarantee readable contrast on white.

Apply background colors with the bg-{color}-{shade} utility. This sets CSS background-color on the element. Use a light shade like bg-indigo-50 for subtle section backgrounds, a mid-tone like bg-indigo-600 for primary buttons, and a dark shade like bg-indigo-950 for footer and sidebar backgrounds. Always pair with a text color that provides sufficient contrast.

Beyond the numbered palette, Tailwind provides several special color keywords. bg-white and bg-black set pure white and black. bg-transparent makes the background transparent (inherits parent). bg-current uses the element's current text color as the background. bg-inherit explicitly inherits the background from the parent element.

Choosing between warm and cool colors affects the emotional tone of your design. Warm colors (red, orange, amber, yellow) convey energy, urgency, and warmth — great for alerts, sale badges, and warning states. Cool colors (blue, indigo, teal, cyan) convey trust, calm, and professionalism — ideal for primary actions, data dashboards, and corporate applications.

Tailwind has five neutral gray families: slate (blue-gray tint), gray (neutral), zinc (slightly warm), neutral (pure neutral), and stone (warm tan). The choice between them is subtle but matters for branding. Slate suits tech and developer products. Gray works universally. Stone suits natural, earthy brands. Pick one and use it consistently throughout your project.

A practical use of Tailwind's color families is building a status indicator system. Map semantic states to color families: success to green, warning to yellow, error to red, info to blue, and neutral to gray. Use the 100 shade for the background and the 700 shade for text to ensure both contrast and visual coherence.

The slash opacity modifier works for background colors too. bg-blue-600/20 applies the blue-600 color at 20% opacity, creating a translucent tint effect. This is commonly used for overlay backgrounds, frosted glass effects, and colored highlight backgrounds behind content without completely obscuring what is behind them.

A common pattern is to choose one primary color for main interactive elements and one accent color to highlight key information. For example, indigo as primary and amber as accent. Both colors are already present in Tailwind's palette, so you immediately have a full spectrum of shades without configuring anything.

In dark mode, backgrounds shift from light to dark shades. Use the dark: prefix to set background colors for dark theme. A typical pattern: main background bg-white dark:bg-gray-900, card surface bg-gray-50 dark:bg-gray-800, and elevated elements bg-white dark:bg-gray-700. This three-level elevation system creates depth in dark UIs.

If the default palette does not match your brand, extend it in tailwind.config.js under theme.extend.colors. You can add entirely new color families with custom shades, or add a single brand color. Once defined, the new color is available with every Tailwind utility: bg-brand-500, text-brand-700, border-brand-300, etc.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: Tailwind's 22 color families each have 11 shades from 50 (light) to 950 (dark), bg-{color}-{shade} applies background color and the /opacity modifier adds transparency, and warm colors convey urgency while cool colors convey trust. Next up we create gradients with Tailwind's gradient background utilities.