Tailwind Orange
All 11 Orange shades, 50 to 950 — click any value to copy it as hex, OKLCH, RGB, HSL or class name.
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 |
What is Tailwind Orange?
Tailwind Orange is one of the 22 default color families in Tailwind CSS, published as 11 shades running from orange-50 (lightest) to orange-950 (darkest). Tailwind CSS v4 defines every shade in OKLCH, with a hex fallback for older browsers. Reach them through utility classes such as bg-orange-500, text-orange-700 and border-orange-200 — no config needed.
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
Related tools
- Tailwind Colors — the full palette, all 22 families and 242 shades.
- Shadcn Theme Generator — turn Orange into light and dark shadcn tokens.
- OKLCH Converter — convert any Orange hex to OKLCH, RGB or HSL.
- Color Shades Generator — turn your own brand color into an OKLCH tint and shade scale.
