6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

v3.3.2

Customization Customizing Colors

Customization
Customizing Colors
Customizing the default color palette for your project.
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.
Slate

50 100 200 300 400 500 600 700 800 900 950
#f8fafc #f1f5f9 #e2e8f0 #cbd5e1 #94a3b8 #64748b #475569 #334155 #1e293b #0f172a #020617

Gray

50 100 200 300 400 500 600 700 800 900 950
#f9fafb #f3f4f6 #e5e7eb #d1d5db #9ca3af #6b7280 #4b5563 #374151 #1f2937 #111827 #030712

Zinc
https://tailwindcss.com/docs/customizing-colors 1/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

50 100 200 300 400 500 600 700 800 900 950
#fafafa #f4f4f5 #e4e4e7 #d4d4d8 #a1a1aa #71717a #52525b #3f3f46 #27272a #18181b #09090b

Neutral

50 100 200 300 400 500 600 700 800 900 950
#fafafa #f5f5f5 #e5e5e5 #d4d4d4 #a3a3a3 #737373 #525252 #404040 #262626 #171717 #0a0a0a

Stone

50 100 200 300 400 500 600 700 800 900 950
#fafaf9 #f5f5f4 #e7e5e4 #d6d3d1 #a8a29e #78716c #57534e #44403c #292524 #1c1917 #0c0a09

Red

50 100 200 300 400 500 600 700 800 900 950
#fef2f2 #fee2e2 #fecaca #fca5a5 #f87171 #ef4444 #dc2626 #b91c1c #991b1b #7f1d1d #450a0a

Orange

50 100 200 300 400 500 600 700 800 900 950
#fff7ed #ffedd5 #fed7aa #fdba74 #fb923c #f97316 #ea580c #c2410c #9a3412 #7c2d12 #431407

Amber

https://tailwindcss.com/docs/customizing-colors 2/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

50 100 200 300 400 500 600 700 800 900 950
#fffbeb #fef3c7 #fde68a #fcd34d #fbbf24 #f59e0b #d97706 #b45309 #92400e #78350f #451a03

Yellow

50 100 200 300 400 500 600 700 800 900 950
#fefce8 #fef9c3 #fef08a #fde047 #facc15 #eab308 #ca8a04 #a16207 #854d0e #713f12 #422006

Lime

50 100 200 300 400 500 600 700 800 900 950
#f7fee7 #ecfccb #d9f99d #bef264 #a3e635 #84cc16 #65a30d #4d7c0f #3f6212 #365314 #1a2e05

Green

50 100 200 300 400 500 600 700 800 900 950
#f0fdf4 #dcfce7 #bbf7d0 #86efac #4ade80 #22c55e #16a34a #15803d #166534 #14532d #052e16

Emerald

50 100 200 300 400 500 600 700 800 900 950
#ecfdf5 #d1fae5 #a7f3d0 #6ee7b7 #34d399 #10b981 #059669 #047857 #065f46 #064e3b #022c22

Teal

50 100 200 300 400 500 600 700 800 900 950
https://tailwindcss.com/docs/customizing-colors 3/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS
#f0fdfa #ccfbf1 #99f6e4 #5eead4 #2dd4bf #14b8a6 #0d9488 #0f766e #115e59 #134e4a #042f2e

Cyan

50 100 200 300 400 500 600 700 800 900 950
#ecfeff #cffafe #a5f3fc #67e8f9 #22d3ee #06b6d4 #0891b2 #0e7490 #155e75 #164e63 #083344

Sky

50 100 200 300 400 500 600 700 800 900 950
#f0f9ff #e0f2fe #bae6fd #7dd3fc #38bdf8 #0ea5e9 #0284c7 #0369a1 #075985 #0c4a6e #082f49

Blue

50 100 200 300 400 500 600 700 800 900 950
#eff6ff #dbeafe #bfdbfe #93c5fd #60a5fa #3b82f6 #2563eb #1d4ed8 #1e40af #1e3a8a #172554

Indigo

50 100 200 300 400 500 600 700 800 900 950
#eef2ff #e0e7ff #c7d2fe #a5b4fc #818cf8 #6366f1 #4f46e5 #4338ca #3730a3 #312e81 #1e1b4b

Violet

50 100 200 300 400 500 600 700 800 900 950
#f5f3ff #ede9fe #ddd6fe #c4b5fd #a78bfa #8b5cf6 #7c3aed #6d28d9 #5b21b6 #4c1d95 #2e1065

https://tailwindcss.com/docs/customizing-colors 4/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

Purple

50 100 200 300 400 500 600 700 800 900 950
#faf5ff #f3e8ff #e9d5ff #d8b4fe #c084fc #a855f7 #9333ea #7e22ce #6b21a8 #581c87 #3b0764

Fuchsia

50 100 200 300 400 500 600 700 800 900 950
#fdf4ff #fae8ff #f5d0fe #f0abfc #e879f9 #d946ef #c026d3 #a21caf #86198f #701a75 #4a044e

Pink

50 100 200 300 400 500 600 700 800 900 950
#fdf2f8 #fce7f3 #fbcfe8 #f9a8d4 #f472b6 #ec4899 #db2777 #be185d #9d174d #831843 #500724

Rose

50 100 200 300 400 500 600 700 800 900 950
#fff1f2 #ffe4e6 #fecdd3 #fda4af #fb7185 #f43f5e #e11d48 #be123c #9f1239 #881337 #4c0519

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:
tailwind.config.js
https://tailwindcss.com/docs/customizing-colors 5/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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:
tailwind.config.js

module.exports = {
theme: {
colors: {
transparent: 'transparent',

https://tailwindcss.com/docs/customizing-colors 6/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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

https://tailwindcss.com/docs/customizing-colors 7/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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

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',
},
// ...
},
},
}

https://tailwindcss.com/docs/customizing-colors 8/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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:
tailwind.config.js

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

https://tailwindcss.com/docs/customizing-colors 9/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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:

Share on Twitter

<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 to automatically generate the 50–950 shades of your own custom colors,
bad news — color is complicated and despite trying dozens of different tools, we’ve yet to find one
that does a good job generating color palettes like this automatically.
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.
Two useful tools we can recommend are Palettte and ColorBox — they won’t do the work for you but
their interfaces are well-designed for doing this sort of work.
https://tailwindcss.com/docs/customizing-colors 10/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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:
tailwind.config.js

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,
},
},
}

https://tailwindcss.com/docs/customizing-colors 11/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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:
tailwind.config.js

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,
},
},
}

https://tailwindcss.com/docs/customizing-colors 12/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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:
tailwind.config.js

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',
},
}
},
https://tailwindcss.com/docs/customizing-colors 13/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

},
}

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

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:

https://tailwindcss.com/docs/customizing-colors 14/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

tailwind.config.js

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`.
https://tailwindcss.com/docs/customizing-colors 15/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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:
tailwind.config.js

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:
tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
theme: {
colors: {
primary: colors.indigo,
https://tailwindcss.com/docs/customizing-colors 16/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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, you’ll need to define those variables as just the
color channels if you want them to work with the opacity modifier syntax:
Define your CSS variables as channels with no color space function
main.css

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

@layer base {
:root {
https://tailwindcss.com/docs/customizing-colors 17/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

--color-primary: 255 115 179;

--color-secondary: 111 114 185;
/* ... */
}
}

Don’t include the color space function or opacity modifiers won’t work
main.css

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

@layer base {
:root {
--color-primary: rgb(255 115 179);
--color-secondary: rgb(111 114 185);
/* ... */
}
}

Then define your colors in your configuration file, being sure to include the color space you’re using,
and the special `<alpha-value>` placeholder that Tailwind will use to inject the alpha value when
using an opacity modifier:
https://tailwindcss.com/docs/customizing-colors 18/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

tailwind.config.js

module.exports = {
theme: {
colors: {
// Using modern `rgb`
primary: 'rgb(var(--color-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',

// Using modern `hsl`

primary: 'hsl(var(--color-primary) / <alpha-value>)',
secondary: 'hsl(var(--color-secondary) / <alpha-value>)',

// Using legacy `rgba`

primary: 'rgba(var(--color-primary), <alpha-value>)',
secondary: 'rgba(var(--color-secondary), <alpha-value>)',
}
}
}

When defining your colors this way, make sure that the format of your CSS variables is correct for
the color function you are using. You’ll want to use spaces if using the modern space-separated
syntax, and commas if using legacy functions like `rgba` or `hsla`:
main.css

https://tailwindcss.com/docs/customizing-colors 19/20
6/25/23, 1:20 PM Customizing Colors - Tailwind CSS

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

@layer base {
:root {
/* For rgb(255 115 179 / <alpha-value>) */
--color-primary: 255 115 179;

/* For hsl(198deg 93% 60% / <alpha-value>) */

--color-primary: 198deg 93% 60%;

/* For rgba(255, 115, 179, <alpha-value>) */

--color-primary: 255, 115, 179;
}
}

Screens Spacing

Copyright © 2023 Tailwind Labs Inc. Trademark Policy Edit this page on GitHub

https://tailwindcss.com/docs/customizing-colors 20/20