No Login Data Private Local Save

Tailwind Color Palette Viewer - Online See All 22 Palettes

Color Tool Reference colors palette Tailwind viewer
36
0
0
0

Tailwind Color Palette Viewer

Explore all 22 expertly crafted color palettes. Click any swatch to copy its hex code or class name.

Click to copy

Frequently Asked Questions

Tailwind CSS ships with 22 professionally designed color palettes. Each palette contains 11 shades ranging from 50 (lightest) to 950 (darkest).

These are subtle neutral palettes. Slate is cool, gray is true neutral, zinc is slightly warm, neutral is nearly achromatic, and stone is warm. Choose based on your UI mood.

You can use utility classes like bg-red-500, text-blue-700, or border-emerald-300. Also customize them in tailwind.config.js.

The swatches are displayed on a white background for accurate color perception, but the page inherits your site's theme. You can preview how colors look on different backgrounds by toggling the background color manually.

Yes! Use the toggle above to switch between copying the hex color code (e.g., #3b82f6) or the Tailwind class name (e.g., blue-500). Then click any color swatch.
Tip: Tailwind colors follow a numeric scale — 50 is lightest, 500 is the base hue, and 950 is darkest. Ideal for building accessible UI components.
🔧 Related Tools