Light, bright and earthy oranges
Orange changes character more than most colors as it gets lighter or darker:
| Range | Looks like | Feels |
|---|---|---|
| Light | Apricot, melon | Soft, friendly |
| Bright | Tangerine, pumpkin | Energetic, playful |
| Dark | Amber, rust | Warm, earthy |
Dark orange quickly becomes what people call brown. Many browns are, technically, dark, low-saturation oranges.
The CSS oranges
orange is #FFA500 and darkorange is #FF8C00. orangered (#FF4500) sits close to red, while coral and tomato are pinker. peru, chocolate and sandybrown are the browner members.
Using orange
Orange attracts attention almost as strongly as red but feels friendlier, so it is popular for call-to-action buttons, food brands and children's products. White text on bright orange usually fails contrast, so use dark text, or pick a deeper orange for white text.
Pairings
Orange and blue are complements and make a strong combination. Orange with teal feels modern; with cream and brown it feels autumnal; with pink it feels bold and summery.
For deeper tones, see burnt orange; for pale ones, peach color. Exact opposites for any orange are one click away in complementary colors.