🐦

Tailwind Color Reference

Speed up your web design workflow with our interactive Tailwind Color Reference. Instantly browse, search, and copy hex codes or utility class names for every single color swatch in the official Tailwind CSS default palette. Supports both legacy v3 and the latest v4 design systems.

design css tailwind reference

Loading Tailwind Color Reference...

How It Works

Scroll through the categorized visual swatches or use the search bar to find a specific color family like 'blue' or 'slate'. Click the toggle to switch between v3 and v4, and click any color block to copy its details.

Frequently Asked Questions

Which numeric shades are included? ▾

The tool includes every standard shade from 50 (lightest) to 950 (darkest) for all color families natively provided by the framework.

Can I use this for Tailwind v4? ▾

Yes! Use the toggle at the top of the interface to seamlessly switch between the classic version 3 palette and the slightly updated version 4 color scheme.

How do I use this? ▾

Simply find the color you like (e.g., 'emerald-500'). Clicking the swatch will instantly copy its raw HEX value (e.g., '#10b981') or its CSS utility class name directly to your clipboard.

Related Tools

🎨

Color Converter

Convert colors precisely between HEX, RGB, HSL, and CMYK formats with our live preview swatch.

🎨

Color Palette Generator

Instantly generate harmonious, mathematically precise color schemes from a single seed color.

🌈

Gradient Maker

Visual CSS gradient builder. Create multi-stop linear, radial, and conic backgrounds instantly.