Tailwind Color Picker

What this tool does

This is a complete, browsable reference for the Tailwind CSS v3 default color palette. It lays out all 22 color families — from the neutrals like slate, gray and stone through to the vivid red, blue, emerald and rose — with every one of their 11 shades, numbered 50 through 950. The standalone black and white keywords are included too. Each shade is a swatch showing its step number and hex value, and clicking a swatch copies it instantly. A format toggle lets you copy the hex value, the Tailwind utility class such as bg-blue-500, or a CSS rgb() string, so the picker fits whatever you are building. Every value is bundled into the page and resolved locally.

Use cases

When you are writing markup in a Tailwind project, you often know the look you want — a mid-tone blue, a soft warning amber — but not the exact step. Scanning the grid lets you compare shades side by side and grab the right class in one click. Designers working in Figma, Sketch or a vector editor can copy the hex value to match a build pixel-for-pixel without guessing. For branding work, the evenly spaced shade scale is a ready-made tint-and-shade ladder: pick a 500 as your brand color and the 100 and 700 become natural light and dark variants. In accessibility audits, having the hex values to hand makes it quick to drop pairs into a contrast checker and confirm text remains legible. Illustrators and data visualisation authors can lift the rgb() strings straight into canvas or SVG fills where Tailwind classes do not apply.

How to use it

1. Choose a copy format with the toggle — HEX for raw values, Class for Tailwind utility names, or rgb() for CSS color strings.
2. Scroll the grid to find the family you want. Families are grouped as rows of shade swatches, lightest on the left, darkest on the right.
3. Click a swatch to copy its value in the selected format, or use the small copy button beneath each swatch for the same result.
4. Paste the value into your markup, stylesheet or design tool. Switch the format and copy again whenever you need a different representation.

Tips

Treat the step numbers as a contrast ladder rather than absolute brightness: text on a 50 background usually needs an 800 or 900 to pass WCAG AA, while a 500 on white is often borderline for small text — verify with a contrast checker. The slate, gray, zinc, neutral and stone families are all near-greys with slightly different temperatures; slate leans cool and stone leans warm, so pick the one that complements your accent. The new 950 shade added in Tailwind v3.3 is invaluable for dark-mode surfaces. If you only need one custom value, copying the rgb() form makes it easy to wire into a CSS custom property or an oklch() experiment.

Related techniques

Once you have a base color, a palette generator can build a full set of harmony swatches around it, and a tints-and-shades tool extends a single hue into its own scale much like Tailwind’s 50–950 ramp. A color name finder maps an arbitrary hex back to the nearest recognisable name. If you prefer Google’s system, the Material Design color reference offers the same browse-and-copy experience for that palette. And whenever a color pair carries text, run it through a WCAG contrast checker before shipping — a good palette still needs the right shade pairing to stay accessible.