Tailwind Teal
Teal is a calm blue-green that feels clean and modern — a frequent choice for health, productivity and informational UI that wants to feel fresh without shouting.
Click any value to copy it. All 11 Teal shades (50–950) in hex, OKLCH, RGB, HSL and Tailwind class.
| Swatch | Shade | Class | Hex | OKLCH | RGB | HSL |
|---|---|---|---|---|---|---|
| 50 | ||||||
| 100 | ||||||
| 200 | ||||||
| 300 | ||||||
| 400 | ||||||
| 500 | ||||||
| 600 | ||||||
| 700 | ||||||
| 800 | ||||||
| 900 | ||||||
| 950 |
Where to use Tailwind Teal
- Info accents:
bg-teal-500. - Links and icons:
text-teal-600. - Tinted panels:
bg-teal-50 text-teal-800.
Related Tailwind colors
Build a full theme from Teal with the shadcn theme generator, or see the whole Tailwind colors palette.
Copied
