Tailwind CSS Color System: How to Build Custom Palettes

Tailwind ships with a beautiful default color palette — but most production apps need custom brand colors. Doing it right means creating proper scales, not just dropping in a few HEX codes.

🎨 Try it free: Design Token Exporter — Export your palette to Tailwind config, CSS variables, or JSON tokens.

---

Understanding Tailwind's Default Scale

Tailwind uses a numbered scale from 50 to 950 for each color:

colors: {
  blue: {
    50:  '#eff6ff',
    500: '#3b82f6', // base
    950: '#172554',
  }
}

Your custom palette should follow this same structure.

---

Step 1: Define Your Brand in HSL

Start with HSL — it makes generating consistent scales trivial.

Brand Primary: hsl(225, 95%, 58%)

🎨 Try it free: Color Picker — Find exact HSL values for any color.

---

Step 2: Generate Your Color Scale

| Scale | Lightness | Use Case | |---|---|---| | 50 | 97% | Very light background | | 100 | 93% | Light background | | 300 | 75% | Disabled state | | 500 | 55% | Light interactive | | 600 | 48% | Base brand color | | 700 | 38% | Hover state | | 900 | 18% | Dark text |

🎨 Try it free: Tints & Shades Generator — Auto-generate a complete scale from any base color.

---

Step 3: Add to tailwind.config.js

Option A: Extend (recommended for most projects)

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'hsl(225, 95%, 97%)',
          500: 'hsl(225, 95%, 58%)',
          600: 'hsl(225, 95%, 48%)',
          900: 'hsl(225, 95%, 18%)',
        },
      }
    }
  }
}

Option B: Replace (for complete design systems)

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      white: '#ffffff',
      brand: { /* your scale */ },
      neutral: { /* your grey scale */ },
      success: { 500: 'hsl(142, 72%, 42%)' },
      error:   { 500: 'hsl(0, 85%, 52%)' },
    }
  }
}

---

Step 4: CSS Variables + Tailwind for Dark Mode

// tailwind.config.js
colors: {
  primary: 'hsl(var(--color-primary) / <alpha-value>)',
  surface: 'hsl(var(--color-surface) / <alpha-value>)',
}

/* globals.css */
:root {
  --color-primary: 225 95% 58%;
  --color-surface: 0 0% 100%;
}
[data-theme="dark"] {
  --color-primary: 225 95% 68%;
  --color-surface: 225 25% 10%;
}

---

Common Mistakes

Using arbitrary values everywhere — bg-[#2563EB] defeats a design system. Use config colors.

Missing a neutral scale — Most UI is grey. Define neutral-50 through neutral-950 upfront.

Skipping contrast checks — Verify brand-600 on brand-50 passes WCAG AA via Contrast Checker.

---

FAQs

Should I use HEX or HSL in Tailwind config? HSL — easier to generate consistent scales and works with CSS variable theming.

How many colors should my config have? 1-2 brand scales, 1 neutral scale, 3 semantic colors (success, warning, error).

How do I handle dark mode in Tailwind? Use CSS custom properties as the bridge — define colors as hsl(var(--name) / alpha) in config.

---

Conclusion

Build with HSL → use Tints & Shades Generator for scales → export with Token Exporter. Read HEX vs RGB vs HSL for format guidance.