Tailwind Orange
Orange is energetic and warm — great for calls to action, highlights and warnings that should feel friendly rather than alarming. It reads as approachable and confident.
Click any value to copy it. All 11 Orange 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 Orange
- CTA buttons:
bg-orange-500 hover:bg-orange-600. - Badges and highlights:
bg-orange-100 text-orange-700. - Warning accents:
text-orange-600.
Related Tailwind colors
Build a full theme from Orange with the shadcn theme generator, or see the whole Tailwind colors palette.
Copied
