Tailwind orange color palette
orange-50 to orange-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. orange-500 is #FF6900 in v4 and #F97316 in v3.
Every orange shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| orange-50 | bg-orange-50 | oklch(98% 0.016 73.684) | #FFF7ED | #FFF7ED | Seashell #FFF5EE |
| orange-100 | bg-orange-100 | oklch(95.4% 0.038 75.164) | #FFEDD4 | #FFEDD5 | Papaya Whip #FFEFD5 |
| orange-200 | bg-orange-200 | oklch(90.1% 0.076 70.697) | #FFD6A7 | #FED7AA | Light Peach #FFD8B1 |
| orange-300 | bg-orange-300 | oklch(83.7% 0.128 66.29) | #FFB86A | #FDBA74 | Butterscotch #FDB147 |
| orange-400 | bg-orange-400 | oklch(75% 0.183 55.934) | #FF8904 | #FB923C | Dark Orange #FF8C00 |
| orange-500 | bg-orange-500 | oklch(70.5% 0.213 47.604) | #FF6900 | #F97316 | Bright Orange #FF5B00 |
| orange-600 | bg-orange-600 | oklch(64.6% 0.222 41.116) | #F54900 | #EA580C | Blood Orange #FE4B03 |
| orange-700 | bg-orange-700 | oklch(55.3% 0.195 38.402) | #CA3500 | #C2410C | Sinopia #BB3E03 |
| orange-800 | bg-orange-800 | oklch(47% 0.157 37.304) | #9F2D00 | #9A3412 | Burnt Red #9F2305 |
| orange-900 | bg-orange-900 | oklch(40.8% 0.123 38.172) | #7E2A0C | #7C2D12 | Chestnut #742802 |
| orange-950 | bg-orange-950 | oklch(26.6% 0.079 36.259) | #441306 | #431407 | Chocolate Brown #411900 |
orange contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, orange shades 700, 800, 900, 950 pass; on black, orange shades 50, 100, 200, 300, 400, 500, 600 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| orange-50 | #FFF7ED | 1.06:1 Fail | 19.77:1 AA |
| orange-100 | #FFEDD4 | 1.14:1 Fail | 18.31:1 AA |
| orange-200 | #FFD6A7 | 1.36:1 Fail | 15.42:1 AA |
| orange-300 | #FFB86A | 1.70:1 Fail | 12.31:1 AA |
| orange-400 | #FF8904 | 2.37:1 Fail | 8.83:1 AA |
| orange-500 | #FF6900 | 2.88:1 Fail | 7.27:1 AA |
| orange-600 | #F54900 | 3.59:1 AA large | 5.83:1 AA |
| orange-700 | #CA3500 | 5.22:1 AA | 4.02:1 AA large |
| orange-800 | #9F2D00 | 7.36:1 AA | 2.84:1 Fail |
| orange-900 | #7E2A0C | 9.44:1 AA | 2.22:1 Fail |
| orange-950 | #441306 | 15.65:1 AA | 1.34:1 Fail |
Use orange in your project
Utility class: bg-orange-500. CSS variable: var(--color-orange-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-orange-50: oklch(98% 0.016 73.684);
--color-orange-100: oklch(95.4% 0.038 75.164);
--color-orange-200: oklch(90.1% 0.076 70.697);
--color-orange-300: oklch(83.7% 0.128 66.29);
--color-orange-400: oklch(75% 0.183 55.934);
--color-orange-500: oklch(70.5% 0.213 47.604);
--color-orange-600: oklch(64.6% 0.222 41.116);
--color-orange-700: oklch(55.3% 0.195 38.402);
--color-orange-800: oklch(47% 0.157 37.304);
--color-orange-900: oklch(40.8% 0.123 38.172);
--color-orange-950: oklch(26.6% 0.079 36.259);
}
More Tailwind colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #FF6900 and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.