Tailwind Cyan
Cyan is a bright aqua that signals "tech" and information. Its high-energy mids pop against dark UIs, making it a favourite for developer tools and data-heavy dashboards.
Click any value to copy it. All 11 Cyan 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 Cyan
- Info highlights:
bg-cyan-500 text-cyan-950. - Accent text on dark:
text-cyan-400. - Chips:
bg-cyan-100 text-cyan-800.
Related Tailwind colors
Build a full theme from Cyan with the shadcn theme generator, or see the whole Tailwind colors palette.
Copied
