Orange

#FFA500

What color is Orange?

Orange is a warm, bright color that falls between red and yellow on the spectrum, hex #FFA500, with a strong glow that draws the eye. It shares the richness of a ripe pumpkin and can range from a soft amber tone to a deep, vivid blaze depending on its shade.

What is the meaning of the color Orange?

The English word orange traces to the Sanskrit naranga, carried through Persian and Arabic into Old French before entering English around the 16th century, first as the name of the fruit and then as a color name. Trade routes brought the sweet orange tree from South Asia to Europe, where the fruit’s vivid skin gave the color its identity. The Dutch royal family, the House of Orange-Nassau, adopted it as a dynastic color in the same century, spreading its political use across the Netherlands and later Ireland. Harley-Davidson has used orange in its branding since the early 20th century, anchoring the color to themes of energy and independence.

RGB
255, 165, 0
HSL
39°, 100%, 50%
CMYK
0, 35, 100, 0
HSV
39°, 100%, 100%
Orange color

What colors go with Orange?

Colors that pair well with Orange include:
Navy Blue: strong, grounding contrast
White: clean, fresh balance
Forest Green: natural, earthy depth
Burgundy: rich, warm harmony
Charcoal: bold, modern anchor

Similar Colors

Conversions & Codes

Format Value CSS
HEX #FFA500 color: #FFA500;
RGB 255, 165, 0 color: rgb(255, 165, 0);
RGB Percentage 100%, 65%, 0% color: rgb(100%, 65%, 0%);
CMYK 0%, 35%, 100%, 0% Not supported in CSS
HSL 39°, 100%, 50% color: hsl(39, 100%, 50%);
HSV 39°, 100%, 100% Not supported in CSS
CIE-LAB 40, 18, 55 color: lab(40% 18 55);
Decimal 16753920 Not supported in CSS

Color Variations

Shades

#FFA600
#E69500
#CC8500
#B37400
#996300
#805300
#664200
#4D3200

Tints

#FFE4B3
#FFDB99
#FFD280
#FFC966
#FFC14D
#FFB833
#FFAF1A
#FFA600

Tones

#FFA600
#F2A20D
#E69E1A
#D99A26
#CC9633
#BF9340
#B38F4D
#A68B59

Hues

#FFA600
#99FF00
#00FF26
#00FFE6
#0059FF
#6600FF
#FF00D9
#FF001A

Color Harmonies

Analogous

#FF2600
Click to copy
98%
#FFA500
Click to copy
#D9FF00
Click to copy

Complementary

#FFA500
Click to copy
#0059FF
Click to copy

Split Complementary

#FFA500
Click to copy
#00D9FF
Click to copy
#2600FF
Click to copy

Triadic

#FFA500
Click to copy
#00FFA6
Click to copy
#A600FF
Click to copy

Tetradic

#FFA500
Click to copy
#00FF26
Click to copy
99%
#0059FF
Click to copy
#FF00D9
Click to copy

Square

#FFA500
Click to copy
#00FF26
Click to copy
99%
#0059FF
Click to copy
#FF00D9
Click to copy

CSS & Dev Snippets

CSS
.orange {
  color: #FFA500;
}
SCSS
$orange: #FFA500;
RGB
rgb(255, 165, 0)

Accessibility & Contrast

White background

1.97:1
1.97
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

10.63:1
10.63
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags