Tailwind Color Reference

Tailwind CSS color palette — click to copy HEX

🔒 Files never leave your browser
Color
Copied!

How to Use Tailwind Color Reference

Browse colors

Scroll through all 22 Tailwind color families with shades 50-950.

Find your color

Use the search box to filter by color name.

Click to copy

Click any color swatch to copy its HEX value to clipboard.

Why Choose AllTools Tailwind Color Reference?

  • ✓ 100% free, no account needed
  • ✓ All 22 Tailwind CSS v3 color families
  • ✓ Shades 50 through 950
  • ✓ Click to copy HEX values
  • ✓ Search/filter by name
  • ✓ HEX value on hover
  • ✓ Visual color grid

Related Resources

Create gradients → Pick colors → Check contrast →

Frequently Asked Questions

Is this free? ▼
Yes, completely free.
Which Tailwind version? ▼
Tailwind CSS v3 color palette.
Does this work on mobile? ▼
Yes, fully responsive.
Is there a file size limit? ▼
No strict limit. Processing happens in your browser, so capacity depends on your device memory. Most files work smoothly.
Which browsers are supported? ▼
All modern browsers including Chrome, Firefox, Safari, Edge, and Opera on both desktop and mobile.
Can I use this offline? ▼
Yes. Once the page is loaded, the tool works without an internet connection since all processing is local.

Related Tools

CSS

Color Picker

Pick and convert colors with alpha and history

Instant Private
Dev

Color Converter HEX/RGB/HSL

Convert colors between HEX, RGB, HSL, and CMYK with live preview

Instant Private
CSS

CSS Gradient Generator

Create CSS gradients with live preview and presets

Instant Private
CSS

Color Palette Generator

Generate harmonious color palettes from any base color

Instant Private
CSS

Contrast Checker WCAG

Check WCAG color contrast — AA and AAA compliance

Instant Private
CSS

Box Shadow Generator

Create CSS box shadows with live preview and layers

Instant Private