How to Find the Right Tailwind Color Shade Fast

You’re writing a component and you need the hex value for slate-600 — not the class name, the actual color — because you’re passing it to a chart library that doesn’t know anything about utility classes. Or you’re in a design file and you need to match what the developers are already using.

Either way you end up in the docs, scrolling past the installation guide, hunting for the palette page, and then squinting at a swatch grid trying to work out whether the one you want is 500 or 600.

What the Tailwind palette actually is

Tailwind’s default colors are a fixed set of hues — slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose — each with numbered steps from 50 through 950.

The numbers are a lightness scale. 50 is nearly white, 500 sits in the middle, 950 is nearly black. The useful consequence is that the number carries meaning across every hue: blue-600 and red-600 have comparable perceived weight, which is what makes a multi-color interface feel coherent.

The five greys exist because they aren’t the same. Slate leans blue, stone leans warm, zinc is close to neutral, and neutral is the most literally grey. Picking the one that matches your brand hue is a small decision that quietly improves everything.

Why people get stuck here

• The class name isn’t the value. Plenty of contexts — chart libraries, email templates, canvas rendering, design tools — need the hex.
• Adjacent steps look identical in isolation. 600 and 700 are obviously different side by side and hard to distinguish one at a time.
• Five greys is genuinely confusing. Most people pick one arbitrarily and never revisit it.
• Contrast isn’t obvious from the number. Whether white text works on amber-500 is not something the number tells you.
• Custom themes drift. If your project overrides some of the palette, the docs no longer match your build.

What a good color reference looks like

One click to copy

The whole task is: see the color, get the value. Anything that requires selecting text carefully or opening a modal is slower than it needs to be.

Shades shown together

Comparison is the point. Seeing 500, 600, and 700 adjacent is what lets you pick correctly; seeing them one at a time is what makes you pick 600 by default forever.

Every hue on one surface

Scanning for the right family — is this a sky or a cyan? — works when they’re all visible at once and doesn’t work through a search box.

Common mistakes to avoid

• Using gray-500 for body text. Mid-range greys frequently fail contrast requirements against white; 600 or 700 is usually the honest choice.
• Mixing grey families in one interface. Slate borders with stone text reads as slightly muddy even if nobody spots why.
• Hardcoding hex values in your CSS. Use the class where you can; reach for the hex only where the class genuinely can’t reach.
• Assuming 500 is the “main” shade. For most brand colors 600 is the more usable primary, with 500 too light for white text.
• Forgetting the 950 step. It’s genuinely useful for dark mode surfaces and often overlooked.

How to do it with Tailwind Color Reference

Online Tool Store’s Tailwind Color Reference shows the shades with instant copy, running entirely in your browser.

1. Open the reference and scan for the hue family you need rather than searching by name.
2. Compare the adjacent steps — 500, 600, 700 — against each other before deciding.
3. Click the shade to copy its value, then paste it wherever the class name won’t work.
4. If it’s going behind text, check the pairing in a contrast checker rather than trusting the step number.
5. When you find a combination that works, record it in your design tokens so the next person doesn’t repeat the lookup.

The Contrast Ratio Checker and the Tailwind Class Converter are the natural next stops, and everything else is in the tools directory.

Frequently asked questions

Which grey should I use for a project?

Match the undertone to your brand color: slate with cool brands, stone with warm ones, zinc when you want to stay out of the way. Pick one at the start of the project and use it everywhere — the specific choice matters much less than the consistency.

Is 500 or 600 the right primary shade?

For most hues, 600 is the more practical primary because white text usually meets contrast requirements on it and often doesn’t on 500. Check the specific pairing rather than following a rule, since yellows and limes behave differently from blues.

What if my project customises the palette?

Then treat the reference as a starting point and your own theme file as the source of truth. The step numbering convention still applies, so the lookup remains useful for orientation even when the exact values differ.

Final thought

Color lookups are a small task you do dozens of times a week. Keep a reference one tab away, compare adjacent steps before you commit, and record the choice once so it stops being a decision.

Try the free Tailwind Color Reference