Orange #FFA500

Orange, as defined by the CSS keyword, is hex #FFA500. This bright, warm, fully saturated orange leans toward yellow and is a little lighter than the peel of the fruit. Citrus, autumn leaves, traffic cones, sunsets and Halloween are its most common associations, and it reads as cheerful and energetic.

CSS orange #FFA500 is yellower than the halfway point between red and yellow on the RGB wheel, which is #FF8000. If your orange looks too golden, try a redder value such as CSS darkorange #FF8C00.

Orange color codes
HEX#FFA500
RGBrgb(255, 165, 0)
HSLhsl(39, 100%, 50%)
HSVhsv(39, 100%, 100%)
CMYKcmyk(0%, 35%, 100%, 0%)

Text on Orange

Black text reads better on Orange. Ratios use the WCAG 2 formula: 4.5:1 passes AA for body text, 3:1 passes for large text.

White text

The quick brown fox jumps over the lazy dog.

1.97:1 · Fail
Black text

The quick brown fox jumps over the lazy dog.

10.63:1 · AAA

Colors that go with Orange

Orange tints and shades

Tints mix Orange with white, shades mix it with black, in 15% steps. Copy any code, or open the tint and shade generator for a full scale.

Tints

#FFB326
#FFC04D
#FFCE73
#FFDB99
#FFE9BF

Shades

#D98C00
#B37400
#8C5B00
#664200
#402900

Orange color schemes

Color-wheel harmonies built by rotating the hue of #FFA500 and keeping its saturation and lightness.

Complementary

#FFA500
#005AFF

Analogous

#FF2500
#FFA500
#DAFF00

Triadic

#FFA500
#00FFA5
#A500FF

Split complementary

#FFA500
#00DAFF
#2500FF

Tetradic

#FFA500
#00FF25
#005AFF
#FF00DA

Orange color meaning

Orange is warm and outgoing. It combines red's energy with yellow's cheerfulness, so it tends to feel friendly, youthful and enthusiastic. Many brands use it to seem approachable and good value.

The color is named after the fruit; English speakers used the fruit's name before they had a separate word for the color. In the Netherlands, orange is the national color because of the royal House of Orange-Nassau, and Dutch fans wear it at major sporting events.

In Hinduism and Buddhism, saffron and orange robes are linked to renunciation and spiritual practice, which gives the color a sacred meaning in South and Southeast Asia. In much of the West, orange is tied to autumn, Halloween and safety gear, where high visibility matters most.

How to use Orange in design

Orange is a strong accent for food, delivery, travel, sports, kids' products and value brands. Use dark text on CSS orange; white text is hard to read at most sizes. It makes a cheerful call-to-action button on white or navy backgrounds.

In UI, orange can also be read as a warning, so keep it distinct from your error and alert colors. On social posts, orange backgrounds stand out but can feel loud. In interiors, it works best in accents such as a chair, a lamp or a set of ceramics.

Palettes with Orange tones

Curated palettes with a color close to #FFA500.

Colors similar to Orange

Work with Orange

Orange FAQ

What colors go with orange?

Blue is orange's complement, so navy, cobalt and teal all make strong pairings. Neutrals like white, cream and charcoal give orange room to breathe. For warm autumn palettes, combine it with brown, rust or mustard. Purple and orange together are bold and festive, and often used for Halloween.

Is orange a warm color?

Yes. Orange is one of the warmest colors on the wheel, sitting between red and yellow. CSS orange #FFA500 leans toward yellow, so it feels sunny and bright. Redder oranges like pumpkin or burnt orange feel hotter or more autumnal, but every orange sits on the warm side.