Tailwind Color Picker
Browse and copy the Tailwind CSS default color palette.
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Browse the Tailwind CSS Color Palette
Tailwind CSS ships with a carefully crafted default color palette â 22 color families, each with 11 shades from 50 (lightest) to 950 (darkest). This reference shows every swatch with its HEX value; click any color to copy it.
How the scale works
- 50â200: backgrounds and subtle fills
- 300â500: borders, accents, primary colors
- 600â800: text and strong accents
- 900â950: high-contrast text and dark UI
Using the values
Click a swatch to copy its HEX, or use the Tailwind class directly (e.g. bg-blue-500). The shades are tuned to pair well within and across families.
Private & Processed Locally
These are the official Tailwind v3 default colors, served from your browser. Nothing is uploaded.
Frequently Asked Questions
Common questions about the Tailwind Color Picker.
What does this include?
All 22 Tailwind default color families with shades 50 to 950 and their HEX values.
How do I copy a color?
Click any swatch to copy its HEX value, or use the matching Tailwind class like bg-blue-500.
Is it private?
Yes, the palette is served from your browser.