Customizing Colors

Customizing the default color palette for your project.

Overview

The theme.colors section of your tailwind.config.js file allows you to override Tailwind’s default color palette.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }
}

By default these colors are automatically shared by the textColor, borderColor, and backgroundColor utilities, so the above configuration would generate classes like .text-indigo, .border-blue, and .bg-red.

Nested object syntax

You can define your colors as a simple list of key-value pairs as we’ve done above, or using a nested object notation where the nested keys are added to the base color name as modifiers:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        lighter: '#b3bcf5',
        default: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

Like many other places in Tailwind, the default key is special and means “no modifier”, so this configuration would generate classes like .text-indigo-lighter, .text-indigo, and .text-indigo-dark.

Note that you need to use dot notation to access nested colors when using the theme() function — the colors are only converted to dash-case for the actual CSS class names. The default key also needs to be specified when accessed via the theme() function: theme('colors.indigo.default').

Don’t use the dash syntax to access nested color values with theme()

.btn-blue {
  background-color: theme('colors.blue-500');
}

Use dot notation to access nested color values with theme()

.btn-blue {
  background-color: theme('colors.blue.500');
}

Overriding the default color palette

As described in the theme documentation, if you’d like to override the default color palette, you can do so using the theme.colors section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }
}

This will disable Tailwind’s default color palette and generate classes like bg-indigo, text-blue, and border-red instead.

Extending the default palette

As described in the theme documentation, if you’d like to extend the default color palette, you can do so using the theme.extend.colors section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }
}

This will generate classes like bg-regal-blue in addition to all of Tailwind’s default colors.

Overriding a default color

If you’d like to override one of Tailwind’s default colors but preserve the rest, simply provide the new values in the theme.extend.colors section of your tailwind.config.js file.

For example, here we’ve replaced the default cool grays with a neutral gray palette:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          '100': '#f5f5f5',
          '200': '#eeeeee',
          '300': '#e0e0e0',
          '400': '#bdbdbd',
          '500': '#9e9e9e',
          '600': '#757575',
          '700': '#616161',
          '800': '#424242',
          '900': '#212121',
        }
      }
    }
  }
}

Overriding or adding a single shade

Since values in the theme.extend section of your config file are only merged shallowly, overriding or adding a single shade is slightly more complicated.

The easiest option is to import the default theme and spread in the color you want to customize along with the new shade value:

// tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          ...colors.blue,
          '900': '#1e3656',
        }
      }
    }
  }
}

Disabling a default color

If you’d like to disable a default color because you aren’t using it in your project, the easiest approach is to just build a new color palette that references the default theme.

For example, this tailwind.config.js file excludes teal, orange, and pink, but includes the rest of the default colors:

// tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      red: colors.red,
      yellow: colors.yellow,
      green: colors.green,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.purple,
    }
  }
}

You could also use destructuring to simplify the above example if you’re comfortable with it:

// tailwind.config.js
const { colors: { teal, orange, pink, ...colors } } = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    colors: colors
  }
}

Naming your colors

Tailwind uses literal color names (like red, green, etc.) and a numeric scale (where 100 is light and 900 is dark) by default. This ends up being fairly practical for most projects, but there are good reasons to use other naming conventions as well.

For example, if you’re working on a project that needs to support multiple themes, it might make sense to use more abstract names like primary and secondary:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

You can configure those colors explicitly like we have above, or you could even pull in Tailwind’s default colors and alias the ones you need:

// tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

You could even define these colors using CSS custom properties (variables) to make it easy to switch themes on the client:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...
    }
  }
}

/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}
@tailwind base;
@tailwind components;
@tailwind utilities;

Generating custom color palettes

A common question we get is “how do I generate the 100–900 shades of my own custom colors?”.

Bad news: color is complicated and we’ve yet to find a tool that does a good job generating these sorts of color palettes. We picked all of Tailwind’s default colors by hand, balancing them by eye. Sorry!

Default color palette

Tailwind includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.

Black & White

Black

000000

White

FFFFFF

Gray

100

F7FAFC

200

EDF2F7

300

E2E8F0

400

CBD5E0

500

A0AEC0

600

718096

700

4A5568

800

2D3748

900

1A202C

Red

100

FFF5F5

200

FED7D7

300

FEB2B2

400

FC8181

500

F56565

600

E53E3E

700

C53030

800

9B2C2C

900

742A2A

Orange

100

FFFAF0

200

FEEBC8

300

FBD38D

400

F6AD55

500

ED8936

600

DD6B20

700

C05621

800

9C4221

900

7B341E

Yellow

100

FFFFF0

200

FEFCBF

300

FAF089

400

F6E05E

500

ECC94B

600

D69E2E

700

B7791F

800

975A16

900

744210

Green

100

F0FFF4

200

C6F6D5

300

9AE6B4

400

68D391

500

48BB78

600

38A169

700

2F855A

800

276749

900

22543D

Teal

100

E6FFFA

200

B2F5EA

300

81E6D9

400

4FD1C5

500

38B2AC

600

319795

700

2C7A7B

800

285E61

900

234E52

Blue

100

EBF8FF

200

BEE3F8

300

90CDF4

400

63B3ED

500

4299E1

600

3182CE

700

2B6CB0

800

2C5282

900

2A4365

Indigo

100

EBF4FF

200

C3DAFE

300

A3BFFA

400

7F9CF5

500

667EEA

600

5A67D8

700

4C51BF

800

434190

900

3C366B

Purple

100

FAF5FF

200

E9D8FD

300

D6BCFA

400

B794F4

500

9F7AEA

600

805AD5

700

6B46C1

800

553C9A

900

44337A

Pink

100

FFF5F7

200

FED7E2

300

FBB6CE

400

F687B3

500

ED64A6

600

D53F8C

700

B83280

800

97266D

900

702459

← Breakpoints   Spacing →