#FFA500
Orange
Orange is a warm, vibrant color that combines the energy of red with the happiness of yellow. It represents enthusiasm, creativity, and warmth.
Orange Color Values
HEX#FFA500
RGB255, 165, 0
HSL39°, 100%, 50%
HSV39°, 100%, 100%
CMYK0%, 35%, 100%, 0%
Color Blindness Simulation
Protanopia
Red-blind. Cannot perceive red light.
Sees: #C4AC00 (~1.3% of males)
Deuteranopia
Green-blind. Cannot perceive green light.
Sees: #D8C10D (~1.2% of males)
Tritanopia
Blue-blind. Cannot perceive blue light.
Sees: #FF8E8D (~0.01% of population)
Achromatopsia
Total color blindness. Sees only grayscale.
Sees: #BFBFBF (~0.003% of population)
Orange as Text Color
Orange on White
2.0:1FAIL
Orange on Light Gray
1.8:1FAIL
Orange on Cream
1.9:1FAIL
Orange on Dark
8.6:1AAA
Orange on Black
10.6:1AAA
Orange on Soft Blue
1.7:1FAIL
Orange on Soft Green
1.8:1FAIL
Orange on Soft Pink
1.6:1FAIL
Nearest Tailwind Class
amber-500
#F59E0B
Nearest Pantone Match
Pantone 7548 C
#FFC600
CSS Variable Export
:root {
--color-orange: #FFA500;
--color-orange-rgb: 255, 165, 0;
}Tailwind Config
// tailwind.config.js
colors: {
'orange': '#FFA500',
}Shades of Orange
#FFA600
#E09200
#C78100
#A86D00
#8F5D00
#704900
#573800
#382400
#1F1400
#000000
Tints of Orange
#FFA600
#FFB01F
#FFB938
#FFC457
#FFCD70
#FFD88F
#FFE1A8
#FFEBC7
#FFF4E0
#FFFFFF
Color Harmonies
Complementary
#FFA500
#0059FF
Analogous
#FF2600
#FFA600
#D9FF00
Triadic
#FFA600
#00FFA6
#A600FF
Orange Text Preview
Heading in Orange
Body text in Orange. The quick brown fox jumps over the lazy dog.
White on Orange
Body text on a Orange background.
Orange text on dark background
Contrast: 9.0:1