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.
| HEX | #FFA500 | |
|---|---|---|
| RGB | rgb(255, 165, 0) | |
| HSL | hsl(39, 100%, 50%) | |
| HSV | hsv(39, 100%, 100%) | |
| CMYK | cmyk(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.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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
Shades
Orange color schemes
Color-wheel harmonies built by rotating the hue of #FFA500 and keeping its saturation and lightness.
Complementary
Analogous
Triadic
Split complementary
Tetradic
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.