Tailwind Blue
Blue is the workhorse primary — the colour of trust, links and default buttons across the web. If you need one dependable accent for actions and focus states, this is it.
Click any value to copy it. All 11 Blue 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 Blue
- Primary buttons:
bg-blue-600 hover:bg-blue-700. - Links:
text-blue-600. - Focus rings:
ring-blue-500.
Related Tailwind colors
Build a full theme from Blue with the shadcn theme generator, or see the whole Tailwind colors palette.
Copied
