← Back to All Colors
Tailwind Orange Color Palette
Warm and friendly, great for highlights, notifications, and creative accents.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
orange-50
#fff7ed
100
orange-100
#ffedd5
200
orange-200
#fed7aa
300
orange-300
#fdba74
400
orange-400
#fb923c
500
orange-500
#f97316
600
orange-600
#ea580c
700
orange-700
#c2410c
800
orange-800
#9a3412
900
orange-900
#7c2d12
950
orange-950
#431407
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| orange-50 | #fff7ed | rgb(255, 247, 237) | hsl(33, 100%, 96%) | oklch(0.98 0.016 73.684) | |
| orange-100 | #ffedd5 | rgb(255, 237, 213) | hsl(34, 100%, 92%) | oklch(0.954 0.038 75.164) | |
| orange-200 | #fed7aa | rgb(254, 215, 170) | hsl(32, 98%, 83%) | oklch(0.901 0.076 70.697) | |
| orange-300 | #fdba74 | rgb(253, 186, 116) | hsl(31, 97%, 72%) | oklch(0.837 0.128 66.29) | |
| orange-400 | #fb923c | rgb(251, 146, 60) | hsl(27, 96%, 61%) | oklch(0.75 0.183 55.934) | |
| orange-500 | #f97316 | rgb(249, 115, 22) | hsl(25, 95%, 53%) | oklch(0.705 0.213 47.604) | |
| orange-600 | #ea580c | rgb(234, 88, 12) | hsl(21, 90%, 48%) | oklch(0.646 0.222 41.116) | |
| orange-700 | #c2410c | rgb(194, 65, 12) | hsl(17, 88%, 40%) | oklch(0.553 0.195 38.402) | |
| orange-800 | #9a3412 | rgb(154, 52, 18) | hsl(15, 79%, 34%) | oklch(0.47 0.157 37.304) | |
| orange-900 | #7c2d12 | rgb(124, 45, 18) | hsl(15, 75%, 28%) | oklch(0.408 0.123 38.172) | |
| orange-950 | #431407 | rgb(67, 20, 7) | hsl(13, 81%, 15%) | oklch(0.266 0.079 36.259) |
Usage Examples
Background
bg-orange-500Text
text-orange-500Sample Text
Border
border-orange-300Ring
ring-orange-500Explore Other Colors
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Aa
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Aa
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow