Building a Custom Neutral Palette in Tailwind CSS - Tailwind CSS Tutorial

intermediate10 min readtutorial

Why Customize Neutrals?

Tailwind ships with five neutral scales: slate, gray, zinc, neutral, and stone. Each has a different temperature. A warm brand looks odd with cool slate grays. Custom neutrals unify your entire palette.

Choosing Your Temperature

Cool neutrals (blue undertone): Use slate. Suits tech, corporate, financial brands
True neutrals (no undertone): Use gray or neutral. Versatile, no strong personality
Warm neutrals (yellow/brown undertone): Use stone. Suits lifestyle, food, artisan brands
Tinted neutrals: Add a hint of your brand hue for a cohesive look

Creating a Tinted Neutral

// tailwind.config.js — Neutrals tinted with brand blue
module.exports = {
  theme: {
    extend: {
      colors: {
        surface: {
          50:  '#f8fafc',  // Hint of blue
          100: '#f1f5f9',
          200: '#e2e8f0',
          300: '#cbd5e1',
          400: '#94a3b8',
          500: '#64748b',
          600: '#475569',
          700: '#334155',
          800: '#1e293b',
          900: '#0f172a',
          950: '#020617',
        }
      }
    }
  }
};

Usage Across Your Site

<body class="bg-surface-50 text-surface-900">
  <nav class="bg-surface-900 text-surface-100">
    <a class="text-surface-300 hover:text-white">About</a>
  </nav>
  <main class="bg-white">
    <p class="text-surface-700">Body text with brand-tinted neutral.</p>
    <hr class="border-surface-200" />
    <span class="text-surface-500">Caption text</span>
  </main>
</body>

Frequently Asked Questions

Should I replace or extend Tailwind's neutral scales?

Extend with a new name like 'surface' so you keep slate, gray, etc. as fallbacks. This avoids breaking existing code that references the defaults.

How do I add a tint to neutral colors?

Start from a Tailwind gray scale and shift each shade slightly toward your brand hue in an HSL or oklch editor. Keep saturation low (2-8%) so they still read as neutrals.