#FF7F00
Orange family

Orange

Also known as: vibrant · energetic · cheerful · warm · playful
Save
Hex #FF7F00
RGB rgb(255, 127, 0)
HSL hsl(30°, 100%, 50%)
CMYK 0 · 50 · 100 · 0
RAL RAL 2003 · Pastel Orange
NCS S 0560-Y50R

RAL and NCS values are nearest equivalents, not official designations.

Meaning

In Western cultures, orange symbolizes enthusiasm and creativity, often linked to autumn and harvest festivals. In contrast, in some Eastern cultures, it is seen as a sacred color, representing spirituality and auspiciousness, particularly in Hinduism.

The term 'orange' was first recorded in English in the 14th century, derived from the Old French 'orenge', which came from the Arabic 'nāranj', itself tracing back to the Persian 'nāranj'. It wasn't until the 16th century that the fruit and the color became widely recognized and linked.

vibrantenergeticcheerfulwarmplayful

Similar colors

Ranked by CIE76 ΔE — the perceptual distance from Orange. Lower ΔE means a closer match (below ~2 is barely distinguishable).

All 27 Oranges →

Shades & tints

Nine steps of Orange by lightness — from #854200 (darkest) to #FFBC7A (lightest). Click any to copy.

-40% #854200
-30% #A35100
-20% #C26100
-10% #E07000
BASE #FF7F00
+15% #FF8E1F
+30% #FF9E3D
+50% #FFAD5C
+70% #FFBC7A

Complementary

Sitting opposite Orange at 210° on the color wheel, these give the highest-contrast pairings.

Palettes

Curated 5-color combinations featuring Orange.

#FF7F00
#4C9F1D
#F5F5DC
#FFCC00
#A0522D

Harvest Glow

Joyful warmth
#FF7F00
#8B0000
#FFFFFF
#FFD700
#FF4500

Sunset Hues

Bold contrast
#FF7F00
#8B4513
#D3D3D3
#FF6347
#FFDAB9

Autumn Breeze

Cozy comfort

Orange scale

A 50–900 tonal scale with Orange anchored at 500 — ready to drop into a design system. Click any step to copy.

50 #FFF5EB
100 #FFE8D1
200 #FFCE9E
300 #FFB56B
400 #FF9A36
500 #FF7F00
600 #D16800
700 #A85400
800 #804000
900 #572B00

Accessibility

Works well as text on dark backgrounds; fails on light.

Aa Best text color: #000000 · 8.29:1
Orange as text on… Ratio AA AAA
Aa White background 2.53:1 Fail Fail
Aa Black background 8.29:1 Pass Pass

Thresholds: AA needs 4.5:1 (normal text) / 3:1 (large); AAA needs 7:1 / 4.5:1. Large = 18pt+ or 14pt+ bold.

How to use #FF7F00

Copy-ready values for CSS, screen and print, plus the extra conversions designers reach for.

CSS color: #FF7F00;
CSS color-mix (lighten 30%) color-mix(in srgb, #FF7F00 70%, white)
HSV / HSB 30°, 100%, 100%
CMYK (print) 0, 50, 100, 0
Decimal 16744192
Nearest web-safe #FF6600

Color vision

How Orange appears to viewers with the three main types of color blindness (~1 in 12 men, 1 in 200 women). Simulated approximations.

Normal vision

#FF7F00

Protanopia (no red)

#C8C61F

Deuteranopia (no green)

#CFD926

Tritanopia (no blue)

#F9373C
1 / 27 Oranges Amber
Copied!