Orange color: code #FFA500

Orange

#FFA500

Color codes

  • HEX#FFA500
  • RGBrgb(255, 165, 0)
  • HSLhsl(39, 100%, 50%)
  • HSVhsv(39, 100%, 100%)
  • CMYKcmyk(0%, 35%, 100%, 0%)
  • LABlab(74.9% 23.9 79)
  • OKLCHoklch(79.3% 0.171 70.7)

About the color Orange

Orange has the HEX code #FFA500, which corresponds to rgb(255, 165, 0) in the RGB model. On the color wheel its hue sits at 39°, with 100% saturation and 50% lightness (hsl(39, 100%, 50%)).

Because of its hue it reads as a warm color: it tends to feel energetic and close, and it visually “advances” in a composition.

As a background it calls for dark text: black reaches a 10.63:1 contrast ratio on it, versus 1.97:1 for white.

For print, the approximate conversion is cmyk(0%, 35%, 100%, 0%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Orange

Complementary

#FFA500 · #0059FF

Analogous

#FF2600 · #FFA500 · #D9FF00

Triadic

#FFA500 · #00FFA6 · #A600FF

Tetradic

#FFA500 · #00FF26 · #0059FF · #FF00D9

Split-complementary

#FFA500 · #00D9FF · #2600FF

Monochromatic

#805300 · #CC8500 · #FFA500 · #FFC14D · #FFDB99

Orange with white and black text

White text Aa Bb Cc 123
1.97:1 · fails WCAG
Black text Aa Bb Cc 123
10.63:1 · AAA

Test other pairs in the contrast checker

The orange on this page is #FFA500, CSS's named color orange. It's more yellow than the orange many people picture (the fruit, or a traffic cone). If you're after something redder, compare it with darkorange (#FF8C00) or with coral, which leans pink.

Meaning and perception

Sitting between red and yellow, orange borrows the energy of one and the lightness of the other. It's associated with enthusiasm, creativity, warmth and informality, and also with caution: high-visibility vests, life buoys and traffic cones use orange because it stands out against almost any landscape. In the US it's also the color of Halloween and fall harvest. Other cultures read it religiously (saffron robes in Hinduism and Buddhism) or politically. Like any color, orange has no fixed meaning.

Where orange works

How to pair it

The strongest pairing is with navy blue (#000080), since blue and orange are complements on the traditional wheel. For something more tropical, try teal (#008080) or turquoise (#40E0D0). In earthy palettes, orange gets along with brown (#8B4513) and gets room to breathe on off-white (#FAF9F6). The color harmony guide shows how to reach these pairs.

Tip: orange in light and dark mode

With white text, #FFA500 reaches only 1.97:1; with black text, it hits 10.6:1. In other words, an orange button wants dark text. If your brand insists on white text, darken the orange to something like #B35C00, which lands near 4.7:1. Dark mode flips the problem: the original #FFA500 works beautifully as an accent on near-black backgrounds with no adjustment at all.

How to use it in CSS

:root {
  --color-orange: #FFA500;
  --color-orange-rgb: 255, 165, 0;
}

.elemento {
  background-color: var(--color-orange);
  color: #000000;
}