Orange Color

About orange

#FFA500 is the CSS named color orange. Its hue sits at about 39°, closer to yellow than the halfway point between red and yellow, which gives it a golden, amber character.

The “color wheel” orange exactly between red and yellow is #FF8000 (hue 30°). CSS also offers darkorange (#FF8C00) and the much redder orangered (#FF4500) if you need a punchier tone.

#FFA500 is the value of the CSS named color orange, defined in the CSS Color specification and identical in every browser.

Other colors called orange

• Color-wheel orange #FF8000Hue 30°, exactly between red and yellow.Copy
• Dark orange (CSS) #FF8C00A deeper, more saturated CSS orange.Copy

Orange shades and tints

Shades mix orange with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with orange

Color harmonies based on the hue of #FFA500: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Orange contrast and readability

On a orange background, black text reads best (10.63:1). Here is how orange works as a text color:

Orange is too light for text on white. Use it for buttons, highlights and call-to-action backgrounds with black or very dark text; white text on #FFA500 does not reach WCAG AA.

Using orange in CSS and HTML

:root {
  --color-orange: #FFA500;
}

.highlight {
  background-color: var(--color-orange);
}

.banner {
  background-color: orange;
  color: #000000;
}

.label {
  color: #FFA500;
  border: 2px solid rgb(255, 165, 0);
}

<p style="background-color: #FFA500; color: #000000;">
  Orange background
</p>