Customizing Colors

​Default color palette

Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.

But when you do need to customize your palette, you can configure your colors under the colors key in the theme section of your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

When it comes to building a custom color palette, you can either configure your own custom colors from scratch if you know exactly what you want, or curate your colors from our extensive included color palette if you want a head start.

​Using custom colors

If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

By default, these colors will be made available everywhere in the framework where you use colors, like the text color utilities, border color utilities, background color utilities, and more.

<div class="bg-midnight text-tahiti">
  <!-- ... -->
</div>

Don’t forget to include values like transparent and currentColor if you want to use them in your project.

​Color object syntax

When your palette includes multiple shades of the same color, it can be convenient to group them together using our nested color object syntax:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },
      // ...
    },
  },
}

The nested keys will be combined with the parent key to form class names like bg-tahiti-400.

Like many other places in Tailwind, the special DEFAULT key can be used when you want to define a value with no suffix:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // ...
      'tahiti': {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
  },
}

This will create classes like bg-tahiti, bg-tahiti-light, and bg-tahiti-dark.

​Arbitrary values

If you need a one-off custom color in your project, consider using Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme:

<button class="bg-[#1da1f2] text-white ...">
  <svg><!-- ... --></svg>
  Share on Twitter
</button>

Learn more in the using arbitrary values documentation.

​Generating colors

If you’re wondering how we automatically generated the 50–950 shades of each color, bad news — color is complicated and to get the absolute best results we picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.

If you are creating your own custom color palette and don’t feel confident doing it by hand, UI Colors is a great tool that can give you a good starting point based on any custom color.

Two other useful tools we recommend for building your own palettes are Palettte and ColorBox — they won’t do the work for you but their interfaces are well-designed for doing this sort of work.

​Using the default colors

If you don’t have a set of completely custom colors in mind for your project, you can curate your colors from our default palette by importing tailwindcss/colors in your configuration file and choosing the colors you want to use:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

This can be helpful if you want to deliberately limit your color palette and reduce the number of class names suggested by IntelliSense.

​Aliasing color names

You can also alias the colors in our default palette to make the names simpler and easier to remember:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.slate,
      green: colors.emerald,
      purple: colors.violet,
      yellow: colors.amber,
      pink: colors.fuchsia,
    },
  },
}

This is especially common for grays, as you usually only use one set in any given project and it’s nice to be able to type bg-gray-300 instead of bg-neutral-300 for example.

​Adding additional colors

If you’d like to add a brand new color to the default palette, add it in the theme.extend.colors section of your configuration file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
  },
}

You can also use theme.extend.colors to add additional shades to an existing color if it’s needed for your design:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          950: '#17275c',
        },
      }
    },
  },
}

​Disabling a default color

If you’d like to disable any of the default colors, the best approach is to override the default color palette and just include the colors you do want:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

​Naming your colors

Tailwind uses literal color names (like red, green, etc.) and a numeric scale (where 50 is light and 900 is dark) by default. We think this is the best choice for most projects, and have found it easier to maintain than using abstract names like primary or danger.

That said, you can name your colors in Tailwind whatever you like, and if you’re working on a project that needs to support multiple themes for example, it might make sense to use more abstract names:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

You can configure those colors explicitly like we have above, or you can pull in colors from our default color palette and alias them:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

Again, we recommend sticking to the default naming convention for most projects, and only using abstract names if you have a really good reason.

​Using CSS variables

If you’d like to define your colors as CSS variables and need to support opacity modifiers the simplest way to do that is to use color-mix() in your Tailwind config.

First, define your colors any way you’d like.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: #cb182e;
    --color-secondary: rgb(242, 208, 70);
    --color-tertiary: hsl(189, 53%, 49%);
    /* ... */
  }
}

Then, when defining your colors, use color-mix() with <alpha-value> to mix transparent with the value of the custom property.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      primary: 'color-mix(in srgb, var(--color-primary) calc(100% * <alpha-value>), transparent)',
      secondary: 'color-mix(in srgb, var(--color-secondary) calc(100% * <alpha-value>), transparent)',
      tertiary: 'color-mix(in srgb, var(--color-tertiary) calc(100% * <alpha-value>), transparent)',
    }
  }
}

You can reduce the noise by using a function to return a value for each color.

 const mixCustomPropertyWithTransparent = name =>
   `color-mix(in srgb, var(--${name}) calc(100% * <alpha-value>), transparent)`

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      primary: mixCustomPropertyWithTransparent('color-primary'),
      secondary: mixCustomPropertyWithTransparent('color-secondary'),
      tertiary: mixCustomPropertyWithTransparent('color-tertiary'),
    }
  }
}