— tool guide

Tailwind Color Picker

Browse the complete Tailwind CSS v3 color palette visually. Click any shade to copy its class name, hex, RGB, or HSL. Includes contrast checking and color harmony.

Open Tailwind Color Picker → free, no sign-in

— try it live open full screen ↗

— what it is

Tailwind's color system has 22 families × 11 shades = 242 colours, each with a utility class, a hex value, and an RGB equivalent. Instead of hunting through documentation or guessing shade numbers, this tool lays out the entire palette as a visual grid. Click any swatch to get the class names (bg-*, text-*, border-*), copy the hex or RGB value, see the WCAG contrast ratio, and find complementary, analogous, and triadic neighbours.

— key features

✓All 242 Tailwind v3 colour swatches in a visual grid
✓Click any swatch: copy class name, hex, RGB, HSL, or Tailwind utility classes
✓WCAG contrast ratio vs white and black with AA/AAA pass/fail badges
✓Color harmony: see complementary, analogous, and triadic neighbours
✓Search filter to jump to a colour family
✓Favorites bar (saved in session storage)
✓White/black text contrast indicator on each swatch

— who it is for

→Developers choosing colours for Tailwind projects
→Designers checking which Tailwind shade matches a brand colour
→Anyone who needs the exact hex value for a named Tailwind colour
→Teams checking WCAG contrast compliance before shipping

— how to use it

01 Open the Tailwind Color Picker

02 Browse the grid or use the search box to filter by name

03 Click any swatch to open the detail panel

04 Copy the class name, hex, RGB, or HSL you need

05 Check the contrast ratios for accessibility compliance

06 Favourite swatches for quick access during a design session

No tutorials. No learning curve. Open it and get started.

— why it stands out

No server uploads. Everything runs locally in your browser. Your files and data never leave your device.

Completely free. No trial period. No premium tier for basic functionality. No account required. Use it as often as you need.

One job, done well. Tailwind Color Picker was built to solve a specific problem cleanly. No feature bloat, no ads, no distractions.

— at a glance

✓Free — no hidden costs, no premium tier
✓No sign-in or account required
✓Runs entirely in your browser — no server uploads
✓Works on desktop and mobile
✓Instant results — no processing delays

— frequently asked questions

Which version of Tailwind does this cover?

Tailwind CSS v3, including the slate, zinc, neutral, stone, and sky families added in v3.

Can I copy just the hex value?

Yes — the detail panel shows hex, RGB, and HSL each with their own copy button.

What do the WCAG badges mean?

AA requires a contrast ratio of 4.5:1 for normal text; AAA requires 7:1. The tool shows whether white or black text on each colour meets each standard.

Does it include opacity variants like bg-blue-500/50?

The picker shows solid colours. Opacity variants are generated by Tailwind at runtime and don't have fixed hex values.

Is this free?

Yes — free with no sign-in.

— ready to use it?

Free. Instant. No sign-in. Open it and get the job done.

Open Tailwind Color Picker on Doathingy.com →

Browse all free tools →