Tailwind CSS Color Palettes: How to Build a Custom Theme

Tailwind CSS ships with a great default palette, but real projects need custom brand colors. Here's how to add your own color palette to Tailwind cleanly, so every component stays consistent.

Extend, don't replace

Add colors under theme.extend so you keep Tailwind's defaults:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f5f3ff',
          500: '#7c3aed',
          900: '#4c1d95',
        },
      },
    },
  },
}

Now you can use bg-brand-500, text-brand-900, and so on.

Choose your shades

A good color scale runs from a near-white 50 to a deep 900. Pick a mid-tone 500 as your brand color first, then lighten and darken. Grab the starting hue from a PaletteCSS palette.

Add gradients to your theme

Define reusable gradient backgrounds too:

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #ff8a3d, #f4600a)',
}

Find the perfect combination in the CSS gradients gallery, then paste the values here.

Keep it accessible

Test your brand shades against the WCAG contrast guidelines before shipping. The official Tailwind colors documentation is also worth a read.

Frequently asked questions

How many shades do I need?

Most teams define 5–10 shades per brand color (50–900). Start small and add as needed.

Where do I get the hex values?

Copy them straight from PaletteCSS color palettes — one click per swatch.

Need the color fundamentals first? Read color theory basics and how to choose a color palette.