Orange Shades
Every named color in the orange family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 116 colors shown below.
Quick facts (computed from this family's 116 members)
- Average lightness: 51%
- Average saturation: 75%
- 38 of 116 pass WCAG AA as normal text on white
- 82 of 116 pass WCAG AA as normal text on black
- Lightest named member: OldLace
- Darkest named member: dark brown
- Most saturated member: Bisque
The color science
Orange occupies roughly 15-40° on the hue wheel, between red and yellow, and unlike most basic color terms in English, the color name is a genuine loanword from the fruit — Old French 'orange' from Arabic 'nāranj,' itself from Persian and ultimately Sanskrit — rather than the fruit being named after a pre-existing color word, since English had no dedicated word for the hue before the fruit arrived in Europe around the 16th century (it was called 'geoluhread,' literally yellow-red, before that). This is unusual enough among basic color terms that linguists cite orange as a textbook case of a color category being created by a specific cultural import rather than evolving gradually the way most basic hue terms did. Before the fruit's arrival, English speakers described this hue range using compound terms built from red and yellow, a common pattern cross-linguistically — many languages historically lacked a single dedicated basic term for orange even after developing separate words for red and yellow individually, treating it as a compound or borderline case rather than its own primary category.
Common uses in design
Orange is the least commonly used corporate brand color of the primary-adjacent hues, which paradoxically makes it a strong differentiator — it reads as energetic, approachable, and informal without red's aggression or yellow's caution-sign baggage, and it's a favorite for call-to-action buttons precisely because so few competing UI elements are also orange, so it doesn't have to fight for attention against red error states or yellow warnings already present on the same screen. Home-improvement, delivery, and budget-travel brands lean on orange disproportionately, likely because it signals accessibility and friendliness at a lower price point than the more 'premium' associations of blue or black. Orange also has a long-standing association with Dutch national identity and sports branding specifically, tracing to the House of Orange-Nassau royal family — a genuinely different, monarchy-rooted origin from the fruit-name etymology that gave the color its name in English in the first place.
Accessibility notes
Orange text on a white background struggles to reach WCAG AA even at fairly saturated, mid-lightness values — most 'pure' oranges (hue ~30°, high saturation, 50% lightness) fall in the 2.5:1-3:1 contrast range against white, well under the 4.5:1 normal-text floor, so orange is much safer as a background fill, icon color, or accent than as small body text on a light page. On dark backgrounds the situation reverses: orange performs quite well as accent or link text against near-black surfaces, which is why many dark-mode-first products lean on orange or amber accents more heavily than their light-mode equivalents. High-visibility safety equipment (life vests, traffic cones, some hazard clothing) uses orange rather than red specifically because orange stands out more reliably against both natural green/brown backdrops and gray industrial environments, a genuine engineering rationale distinct from red's more semantic 'stop/error' convention.
Named examples
DarkOrange and Coral are the two most-used named oranges in UI work; coral in particular sits closer to the orange-pink boundary and is named for the marine invertebrate's skeletal color, not a plant or mineral source. Peru and SandyBrown, while sometimes grouped with orange casually, actually sit low enough in saturation and lightness that this hub's computed membership test correctly places some of them in the brown family instead — a good illustration of how fuzzy the orange/brown boundary really is perceptually. Tomato and OrangeRed, both technically closer to red on the wheel, are nonetheless frequently described as 'orange' in casual conversation, a further reminder that named hue-family boundaries are a useful simplification rather than a strict perceptual law most people actually follow when naming colors informally.
Building a orange design-token scale
Orange rarely gets a full numbered token scale of its own in general-purpose design systems the way blue or gray do — it's more often reserved as a single 'warning' or 'accent' token (Bootstrap's 'warning' variable and Tailwind's orange-500 both land in this band) rather than a full 11-step ramp, since few products need more than two or three orange steps in practice. When you do need a scale — for a data-visualization category axis, say — keep saturation roughly constant across steps and vary lightness only, because orange shifts noticeably toward brown as lightness drops and toward peach/tan as it rises, so an orange ramp built the same way as a blue ramp (varying both saturation and lightness together) tends to look muddier at the dark end than the equivalent blue scale would. Because orange draws attention so effectively without red's alarm connotation, it's also a strong choice for a single standout call-to-action button on an otherwise neutral page, provided the rest of the interface doesn't already use orange for anything else that would compete with it.