Tailwind CSS Color Palette Reference

The Tailwind CSS colour palette is a carefully curated set of colour families designed for modern web development. It includes 22 colour families, each with 11 shades ranging from 50 (lightest) to 950 (darkest) - a total of 242 colours. The palette covers the full spectrum from cool grays and vibrant primaries to subtle pastels and deep darks, all designed to work harmoniously together.

1. Browse by family: Each of the 22 families (slate, gray, red, blue, etc.) is displayed as a card showing its complete shade range from 50 to 950. The description explains the character and best use cases for each colour family.
2. Search or filter: Use the search bar to find families by name or HEX value. Use the category filters (Gray Neutrals, Warm, Green, Blue, Purple) to narrow down related colour families. All filtering updates instantly.
3. Copy any colour: Hover over any shade swatch and click to copy its HEX value to your clipboard. You can also use the Copy HEX button beneath each shade column. A visual confirmation toast appears when a colour is copied.

• Family names: Colours are grouped into families like blue, red, gray, and emerald. Each family represents a distinct hue with consistent saturation across its shades.
• Shade numbers:Each family contains 11 shades numbered 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The 500 shade is typically the “base” colour, with lower numbers being lighter variants (tints) and higher numbers being darker variants (shades).
• Utility class syntax: In Tailwind CSS, colours are used as utility classes like bg-blue-500, text-gray-900, or border-emerald-300. The shade number directly corresponds to the class suffix.
• Customisation: Tailwind allows extending or overriding these default colours in your tailwind.config.js, letting you maintain the same naming convention with your brand colours.

Shades 50-200 work best for background colours, subtle hover states, and light UI element fills. They provide enough colour to be noticeable without overwhelming content. Use these for card backgrounds, table row striping, and navigation hover effects.

Shades 300-500 are ideal for primary colours, buttons, links, and medium-weight UI elements. The 500 shade is the default for most Tailwind colour utilities and provides the best balance of visibility and versatility.

Shades 600-950 work well for text, borders, and high-contrast elements. Use darker shades for readable body text (typically gray-700 to gray-900) and for accent elements that need to stand out against lighter backgrounds. The 950 shade was added in Tailwind v3.3 for even darker options.