Tailwind Color Palette — All Colors with Hex Codes (2026)

Tailwind CSS ships with a carefully curated color palette — 22 color families, each with 11 shades from near-white to near-black. Memorising hex codes is impractical; looking them up in the documentation means context-switching away from your editor. This interactive palette lets you browse, search, and copy any Tailwind color in whatever format your project needs — hex, RGB, HSL, or the exact class name to paste into your HTML.

All 22 Tailwind Color Families

The Tailwind v3 palette is grouped into neutrals, warm colors, and cool colors. Each family has 11 shades (50 through 950), giving 242 distinct swatches in total.

The Shade Scale: 50 to 950

Every Tailwind color family uses the same 11-step shade scale. Lower numbers are lighter; higher numbers are darker. The 950 shade was added in Tailwind v3.3 as an ultra-dark option.

Copy Formats: HEX, RGB, HSL, and Class Names

The tool copies colors in four formats. Choose the one that matches your workflow:

Choosing Between the Neutral Grays

Tailwind offers five neutral gray families. They look similar at a glance but have distinct undertones that affect how they pair with other colors and how they read in dark mode.

• Slate — a cool blue-gray. Feels modern and technical. Pairs naturally with blue and indigo primary colors. Most popular choice for dark mode UI backgrounds.
• Gray — a slightly warm neutral. The most versatile — works with almost any primary color. Good default when you are unsure which to pick.
• Zinc — similar to gray but slightly cooler. Good alternative when gray feels too warm.
• Neutral — mathematically pure gray with no hue bias. Ideal for minimalist designs or when you want the color palette to carry the personality while the neutrals stay invisible.
• Stone — warm sandy undertone. Best for editorial, organic, or earthy brand aesthetics. Pairs well with amber, orange, and yellow primaries.

Practical tip: pick one neutral family for your project and use it consistently for all text, borders, and background variations. Mixing multiple neutral families in the same UI creates subtle inconsistencies that are hard to debug but immediately visible to trained eyes.

Using Tailwind Color Classes

Tailwind color utilities follow a consistent naming pattern:

<!-- Background -->
<div class="bg-indigo-600">...</div>

<!-- Text color -->
<p class="text-gray-900 dark:text-gray-100">...</p>

<!-- Border -->
<input class="border border-gray-300 focus:border-indigo-500" />

<!-- With opacity modifier (Tailwind v3+) -->
<div class="bg-indigo-500/20">...</div>   <!-- 20% opacity background -->
<p class="text-indigo-600/75">...</p>      <!-- 75% opacity text -->

<!-- Dark mode variant -->
<div class="bg-white dark:bg-gray-900">...</div>

Find Nearest Color: Matching Brand Colors to Tailwind

When a design file or brand guide provides a custom hex color, the Find Nearest Color feature tells you which Tailwind shade is closest. It calculates the Euclidean distance between the input hex and every swatch in the 242-color palette in RGB space, then returns the best match.

This is useful for two scenarios:

• Staying within the default palette — if the nearest match is close enough, use the Tailwind color directly and avoid adding a custom color to your config. Custom colors increase CSS bundle size and break the design consistency of the palette.
• Choosing an extension point — if the nearest match is too different (visually), the result still tells you which color family to extend in tailwind.config.js. For example, if your brand color is a vivid blue between blue-600 and indigo-600, extend thecolors.blue family rather than adding a completely new family.

Common Color Pairings for UI Design