Tailwind Color Picker
Browse the Tailwind CSS color palette and copy any swatch's class name, hex, or RGB.
| Hue | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| slate | |||||||||||
| gray | |||||||||||
| zinc | |||||||||||
| neutral | |||||||||||
| stone | |||||||||||
| red | |||||||||||
| orange | |||||||||||
| amber | |||||||||||
| yellow | |||||||||||
| lime | |||||||||||
| green | |||||||||||
| emerald | |||||||||||
| teal | |||||||||||
| cyan | |||||||||||
| sky | |||||||||||
| blue | |||||||||||
| indigo | |||||||||||
| violet | |||||||||||
| purple | |||||||||||
| fuchsia | |||||||||||
| pink | |||||||||||
| rose |
Click a swatch to select it. The Tailwind class name is auto-copied to your clipboard.
You might also like
- Color ConverterConvert any color between HEX, RGB, HSL, HSV, and CMYK in one place.
- Color Picker & Contrast CheckerPick colors, convert between HEX/RGB/HSL, and check WCAG contrast.
- CSS Border Radius GeneratorSculpt rounded corners with per-corner control, including elliptical and 'squircle' shapes.
- CSS Box Shadow GeneratorBuild CSS box-shadow values with a live preview — stack multiple shadows for depth.