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

Tailwind UI is now in early access!