Developer GuidesFreeColorPalettes Editorial TeamFebruary 10, 202510 min read

Tailwind CSS Color Palette Guide for 2025

Everything you need to know about managing color in Tailwind CSS, built-in palettes to custom brand scales and dark mode tokens.

Tailwind CSS ships with one of the most well-crafted default color palettes in the CSS framework ecosystem. The 22-color, 11-step system covers essentially every design need. But as soon as you are building a real product with brand requirements, you need to understand how to extend, replace, and organize Tailwind's color system properly.

Understanding Tailwind's Built-in Color System

Tailwind's default colors are organized as scales: each color name (slate, blue, emerald, etc.) has 11 values numbered 50 through 950. The scale is perceptually uniform, each step represents an approximately equal visual change in lightness, so the difference between blue-300 and blue-400 looks similar to the difference between blue-600 and blue-700.

For UI work, the scale maps predictably to use cases: 50–100 for subtle backgrounds, 200–300 for borders and dividers, 400–500 for icons and secondary elements, 600 for primary text on light backgrounds, 700–800 for dark text, 900–950 for near-black backgrounds.

Adding Custom Brand Colors

When you add a custom color to Tailwind, you should always add it as a complete scale rather than a single value. A single value limits you to one utility class per color; a scale gives you the same depth of control as Tailwind's built-in colors.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#EFF6FF',
          100: '#DBEAFE',
          200: '#BFDBFE',
          300: '#93C5FD',
          400: '#60A5FA',
          500: '#3B82F6',
          600: '#2563EB',
          700: '#1D4ED8',
          800: '#1E40AF',
          900: '#1E3A8A',
          950: '#172554',
        },
      },
    },
  },
}

Use the Tints & Shades Generator to create this scale from any hex color. Enter your brand primary, copy the Tailwind config output, and drop it into your config file.

CSS Variables + Tailwind: Design Tokens

For larger projects or design systems, the most maintainable approach combines Tailwind's utilities with CSS custom properties as a token layer. Define your semantic colors as custom properties, then reference them in your Tailwind config using the CSS variable syntax.

css

/* globals.css */
:root {
  --color-primary: theme('colors.brand.600');
  --color-surface: theme('colors.slate.50');
  --color-text: theme('colors.slate.900');
}

.dark {
  --color-primary: theme('colors.brand.400');
  --color-surface: theme('colors.slate.900');
  --color-text: theme('colors.slate.100');
}

Dark Mode Color Strategy in Tailwind

Tailwind supports dark mode with the `dark:` prefix. The simplest approach is class-based dark mode (darkMode: "class" in your config), which lets you toggle dark mode by adding/removing a `.dark` class on the <html> element.

For each color in your design that needs a dark mode variant, either use the dark: prefix directly in your JSX (`bg-white dark:bg-slate-900`) or define a CSS variable with both light and dark values and use the variable in your Tailwind class (var(--bg-surface)).