Tailwind Color Picker
Browse and copy all Tailwind CSS color values.
Free & unlimited
Tip: Search by hex code to find the nearest Tailwind color match. Switch the copy format to get colors in hex, RGB, HSL, or Tailwind class format. Click any swatch to copy. Click a family name to expand the full-page view.
50
100
200
300
400
500
600
700
800
900
950
All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Browse the palette
Scroll through the full Tailwind CSS color palette organized by hue and shade (50-950).
- 2
Click a swatch
Select any color to see its hex, RGB, and HSL values along with the Tailwind class name.
- 3
Copy the value
Copy the hex code, class name (e.g., bg-blue-500), or any other format with one click.
- Tailwind shades run from 50 (lightest) to 950 (darkest) - 500 is the "base" shade for most hues.
- Use shades 50-100 for backgrounds, 500-600 for primary actions, and 700-900 for text on light backgrounds.
- The gray palette has multiple variants: slate, gray, zinc, neutral, and stone - each with a different undertone.
- Pair adjacent shades (e.g., blue-100 background with blue-700 text) for accessible color combinations.
- Complete Tailwind CSS v3 color palette display
- One-click copy for hex, RGB, HSL, and Tailwind class names
- Visual shade scale from 50 to 950 for every hue
- Search and filter colors by name
- Quickly grab Tailwind color values when designing outside of a Tailwind project.
- Create consistent color pairings for backgrounds, text, and accents.
- Reference exact hex values for Tailwind colors in Figma or other design tools.
- Explore Tailwind's gray variants to choose the right neutral tone for your project.
Absolutely. The colors are just hex values. Copy the hex codes and use them in any CSS framework, design tool, or vanilla CSS project.
Tailwind v3 extended shades to include 950 and revised some color values. It also renamed some gray scales (blueGray became slate, warmGray became stone, etc.).
Slate has a blue undertone (modern tech feel), Zinc is slightly cool, Neutral is pure gray, and Stone has a warm undertone. Choose based on your brand's warmth.