#FFA500
RGB(255, 165, 0)
#FFFCEA
#FFF5C5
#FFEB85
#FFDA46
#FFC71B
#FFA500
#E27C00
#BB5502
#984208
#7C360B
#481A00
Color Values
HEX
#FFA500
RGB
rgb(255, 165, 0)
HSL
hsl(39°, 100%, 50%)
CMYK
0%, 35%, 100%, 0%
HSV
39°, 100%, 100%
XYZ
54.70, 48.17, 6.42
Color Variations
Monochromatic Colors of Orange (#FFA500)
#B37400
#CC8400
#E69500
#FFA500
#FFAE1A
#FFB733
#FFC04D
Tints of Orange (#FFA500)
#FFA500
#FFAE19
#FFB732
#FFC04C
#FFC966
#FFD27F
#FFDB99
#FFE4B2
#FFEDCC
#FFF6E5
Triadic Colors of Orange (#FFA500)
#FFA500
#00FFA5
#A500FF
Analogous Colors of Orange (#FFA500)
#FFA500
#DAFF00
#FF2500
Complementary Colors of Orange (#FFA500)
#FFA500
#005AFF
CSS Examples
Sunset Button
.sunset-button {
background: linear-gradient(135deg, #ffa500, #ff7b00);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
box-shadow:
0 4px 15px rgba(255, 165, 0, 0.4),
inset 0 -2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 165, 0, 0.6);
}
}Orange Glow
.orange-glow {
background-color: #ffa500;
animation: pulse 2s infinite;
box-shadow: 0 0 20px #ffa500;
}
@keyframes pulse {
0% { box-shadow: 0 0 20px #ffa500; }
50% { box-shadow: 0 0 40px #ffb732; }
100% { box-shadow: 0 0 20px #ffa500; }
}Citrus Card
.citrus-card {
background: linear-gradient(45deg, #ffa500, #ffc966);
border-radius: 15px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
box-shadow:
0 8px 32px rgba(255, 165, 0, 0.15),
inset 0 2px 4px rgba(255, 255, 255, 0.3);
}Orange Text Effect
.orange-text {
color: #ffa500;
text-shadow:
2px 2px 0 #ff7b00,
-1px -1px 0 #ffb732;
font-weight: bold;
letter-spacing: 1px;
background: linear-gradient(to right, #ffa500, #ff7b00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Orange Pattern
.orange-pattern {
background-color: #ffa500;
background-image:
radial-gradient(circle at 100% 150%, #ffa500 24%, #ffb732 25%, #ffb732 28%, #ffa500 29%, #ffa500 36%, #ffb732 36%, #ffb732 40%, transparent 40%, transparent),
radial-gradient(circle at 0 150%, #ffa500 24%, #ffb732 25%, #ffb732 28%, #ffa500 29%, #ffa500 36%, #ffb732 36%, #ffb732 40%, transparent 40%, transparent);
background-size: 20px 40px;
}About Orange
Orange (#FFA500) is a vibrant and energetic color that sits between red and yellow on the color spectrum. Its origins can be traced back to the fruit of the same name, making it one of nature's most recognizable hues.
Color Characteristics
- High saturation (100%)
- Medium lightness (50%)
- Strong warm undertones
- Maximum red value (255)
Color Values
- RGB: 255, 165, 0 (100%, 64.7%, 0%)
- HSL: 39°, 100%, 50%
- CMYK: 0%, 35%, 100%, 0%
- Web Safe: #FF9900
Usage in Design
Orange excels in:
- Call-to-action elements
- Food and beverage branding
- Sports and energy products
- Creative and playful designs
- Warning and safety signage
Color Combinations
- Pairs beautifully with blue
- Complements deep purples
- Works well with teal
- Effective with white space
- Striking with charcoal gray
