Creating Custom Color Palettes in Tailwind CSS

Why Custom Colors?

While Tailwind's default palette is comprehensive, most projects need brand-specific colors. Tailwind makes it easy to add custom colors while maintaining consistency with the built-in system.

Extending vs Replacing Colors

You have two options: extend (add to existing) or replace (override completely). Extending is usually better as it keeps useful utility colors available.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Add brand colors alongside defaults
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        }
      }
    }
  }
}

Generating Color Shades

For a complete palette, generate shades from 50 to 950. You can use our Shade Generator tool or follow these HSL guidelines:

• 50: Very high lightness (~97%), low saturation
• 100-200: High lightness, building saturation
• 500: Your base brand color (medium lightness ~50%)
• 600-700: Darker, higher saturation
• 900-950: Very low lightness (~10%), maintain saturation

Using Your Custom Colors

<button class="bg-brand-500 hover:bg-brand-600 text-white">
  Primary Action
</button>

<div class="bg-brand-50 border border-brand-200 p-4">
  <p class="text-brand-900">Brand colored card</p>
</div>