Color collection

Tailwind CSS Colors

The default Tailwind CSS color palette — 22 palettes, each with 11 carefully balanced shades.

About the Tailwind palette

The Tailwind CSS color palette was designed by the Tailwind Labs team to be beautiful out of the box and practical in real projects. Each palette runs from shade 50 (near-white) to 950 (near-black), giving you a full range from backgrounds to text to borders without needing to reach for a color picker.

The palette covers five neutral grays (Slate, Gray, Zinc, Neutral, Stone) and seventeen chromatic colors. Every shade has been hand-tuned rather than generated algorithmically, which is why they pair naturally with each other across palettes.

Using Tailwind colors in your project

In a Tailwind CSS project, colors are referenced by utility class:

<!-- utility classes -->
<div class="bg-blue-500 text-white">
<button class="bg-emerald-600 hover:bg-emerald-700">

/* or in CSS with @apply */
.btn { @apply bg-indigo-500 text-white; }

You can also use the raw hex values directly in custom CSS or pass them to design tools. Click any shade below for full format details.

All palettes

CSS Named Colors →Open Color →Color Converter →