Tailwind CSS Color Palette Reference

Report an Issue

Help us improve by telling us what went wrong.

Embed this Tool

Customize and copy the embed code for your website.

Every Tailwind Color at Your Fingertips

Tailwind CSS ships with a thoughtfully curated set of color palettes, but finding the exact shade you need while you are deep in a coding session is annoyingly disruptive. You have to leave your editor, navigate to the Tailwind docs, scroll through the color page, find the palette, find the shade, copy the hex code or class name, and switch back. The Tailwind CSS Color Palette Reference puts every single color from the Tailwind default palette on one fast, searchable, copyable page so you never have to break your flow.

What This Reference Includes

Every color family in the Tailwind default configuration is displayed with all of its shades from 50 through 950. That covers slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. For each shade, you see the visual swatch, the Tailwind class name (like bg-blue-500 or text-emerald-700), and the corresponding hex code. Click any color to copy it to your clipboard instantly.

The palette display is organized so you can compare shades across color families at a glance. Need to pick between indigo-600 and violet-600 for your primary brand color? They are right next to each other for easy visual comparison. Want to find a neutral gray that pairs well with your accent color? Scroll the neutrals and see how each shade feels alongside your chosen hue.

Why Developers Keep This Page Open All Day

Tailwind's naming convention is logical once you learn it, but remembering whether your preferred shade of green is green-500 or green-600 is the kind of trivial detail that eats up mental energy. Multiply that by dozens of color decisions per project - backgrounds, text, borders, hover states, focus rings, gradients - and the cumulative time spent looking up colors adds up significantly. This Tailwind color palette reference eliminates that friction entirely.

Design system teams reference this page when defining their project's color tokens. They can see the full Tailwind scale, decide which shades to include in their custom theme, and note the hex values for design tool configurations in Figma or Sketch. Frontend developers use it during implementation to quickly verify that the color they chose in code matches the design mockup.

Accessibility Considerations

Picking colors is not just about aesthetics. Text readability depends on sufficient contrast between foreground and background colors. The Tailwind CSS Color Palette Reference helps you make informed decisions by showing exact hex values that you can plug into any contrast checker. As a general rule, use shades 600 and above for text on light backgrounds, and shades 200 and below for text on dark backgrounds. The lighter shades (50-200) work beautifully for background fills and subtle surface colors.

This reference loads instantly, requires no account, and works entirely in your browser. It is the Tailwind color companion that every frontend developer deserves. Bookmark it and stop context-switching every time you need a hex code.

Whether you are starting a brand new Tailwind project and exploring color options, or maintaining an existing design system and need a quick lookup, this Tailwind CSS color palette page has you covered. It is faster than the official docs for color lookups, more visual than scanning a configuration file, and always available without an internet search. Add it to your toolbar bookmarks and reclaim the minutes you have been losing to color lookups every single day.