Tailwind CSS Color Picker

Browse all 22 color families and 242 shades from the Tailwind CSS v3 default palette. Click any swatch to view hex, RGB, HSL values and copy Tailwind class names.

22 families, 242 colors
blue-500
Blue, shade 500
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
BGbg-blue-500
Texttext-blue-500
Ringborder-blue-500

Related Tools

Tailwind CSS Class Lookup

Search all Tailwind utility classes

CSS Color Converter

Convert HEX, RGB, HSL, OKLCH and more

CSS Gradient Generator

Create beautiful CSS gradients visually
Embed this tool on your site 
<iframe src="https://devtoolbox.dedyn.io/tools/tailwind-color-picker" width="100%" height="800" frameborder="0" title="Tailwind CSS Color Picker"></iframe>

Frequently Asked Questions

How many colors are in the Tailwind CSS default palette?▼
The Tailwind CSS v3 default palette includes 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose), each with 11 shades from 50 (lightest) to 950 (darkest), giving you 242 carefully curated colors to choose from.
What is the difference between Tailwind's gray color families?▼
Tailwind offers five gray families with different undertones: Slate has a blue undertone (cool), Gray is a balanced blue-gray, Zinc is a pure neutral gray, Neutral is a warm gray with no undertone, and Stone has a warm brown undertone. Choose based on the warmth you want in your design.
How do I use Tailwind color classes in my HTML?▼
Tailwind color classes follow the pattern {property}-{color}-{shade}. For example, bg-blue-500 sets a blue background, text-blue-500 sets blue text color, and border-blue-500 sets a blue border. You can also use ring, divide, and placeholder prefixes.

Learn More About Tailwind CSS

Tailwind CSS Cheat Sheet & Quick Reference

Complete guide to Tailwind utility classes, responsive design, dark mode, and v4 changes.

 CSS Color Converter

Convert between HEX, RGB, HSL, OKLCH, LAB and 148 named CSS colors.
Keyboard Shortcuts
Ctrl+Shift+C Copy hex
Ctrl+L Clear search
/ Focus search