How do I add custom colors to Tailwind CSS?

In tailwind.config.js, extend theme.extend.colors with an object mapping names to hex values. For example: theme: { extend: { colors: { brand: { 500: '#4f46e5' } } } }. After that you can use bg-brand-500, text-brand-500, border-brand-500 and so on.

What is the 50–950 scale in Tailwind?

Tailwind ships with color scales from 50 (lightest) to 900 (darkest) and added 950 in v3.3. The steps are a naming convention, not a formula — but they let developers refer to any shade without memorizing hex codes.

Can I use arbitrary colors in Tailwind?

Yes. Tailwind supports arbitrary values with square brackets: bg-[#4f46e5]. This is useful for one-off colors, but for anything reused in the project, extend the config so the color becomes a first-class token.

Does the helper work with Tailwind v4?

Yes. Tailwind v4 also accepts JavaScript or TypeScript config extensions, and the format produced by the helper is compatible with both v3 and v4.

Tailwind Color Helper — Generate Tailwind Color Scales

Base color

Color name Used as the key in theme.extend.colors

How to add custom colors to Tailwind

Extend the theme in your Tailwind config, then use the color anywhere in your project with standard Tailwind classes. Colors are automatically available for bg-*, text-*, border-*, ring-*, shadow-* and from-*/to-* gradient utilities.

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eef2ff',
          100: '#e0e7ff',
          200: '#c7d2fe',
          300: '#a5b4fc',
          400: '#818cf8',
          500: '#6366f1',
          600: '#4f46e5',
          700: '#4338ca',
          800: '#3730a3',
          900: '#312e81',
          950: '#1e1b4b',
        },
      },
    },
  },
};

Using the color in markup

<button class="bg-brand-600 text-white hover:bg-brand-700">
  Save changes
</button>

<div class="bg-brand-50 border border-brand-200 text-brand-900">
  Success message
</div>

<h1 class="bg-gradient-to-r from-brand-500 to-brand-700 bg-clip-text text-transparent">
  Gradient heading
</h1>

Arbitrary colors vs. extended colors

Tailwind allows arbitrary values with square brackets: bg-[#4f46e5]. This is useful for one-off colors that appear once. For anything reused, extend the config instead — the color becomes a first-class token with a name and scale.

Approach	Example	Best for
Arbitrary	`bg-[#4f46e5]`	One-off colors
Extended config	`bg-brand-600`	Reused, themeable, scalable
CSS variables	`bg-[var(--color-primary)]`	Runtime theming

Frequently asked questions

Does this work with Tailwind v4?

Yes. Tailwind v4 still uses JavaScript/TypeScript config extensions and accepts the same object format. The output from this helper is compatible with both v3 and v4.

Why does 950 exist?

Tailwind added a 950 step in v3.3 to provide a much darker variant that is still hue-accurate. It sits between 900 and black and is useful for surfaces in dark mode.

How is the scale generated?

The helper adjusts lightness along a fixed map for each step and scales saturation accordingly. Lower numbers (50, 100) are softer and lighter; higher numbers (900, 950) are deeper and more saturated.

Is anything uploaded?

No. All math and exports run in your browser. No account, no server, no upload.