Amber Shades
Every named color in the amber family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 64 colors shown below.
Quick facts (computed from this family's 64 members)
The color science
Amber sits in a narrow band around 40-50°, the transition zone between orange and yellow, and the name comes directly from the fossilized tree resin — genuine amber gemstone ranges from pale honey to deep cognac, which is exactly the range this hue family covers on a hue wheel. It's a genuinely distinct perceptual category from either pure orange or pure yellow in most color-naming studies, sitting at the boundary where English speakers start disagreeing about whether to call something 'orange' or 'yellow' — a genuine case of a fuzzy, culturally-negotiated color boundary rather than a hard physical line. Fossilized amber itself is chemically hardened tree resin, sometimes tens of millions of years old, and its color varies naturally depending on the resin's original composition, the pressure and heat it was subjected to during fossilization, and any oxidation that occurred afterward — genuine geological variables, not a single fixed pigment recipe the way most named colors trace back to. Baltic amber specifically has been traded across Europe since the Bronze Age, prized both as jewelry material and, historically, for its occasional preservation of ancient insects trapped in the resin before it fossilized — a genuinely unique material property that has made amber a significant source of preserved specimens for paleontologists studying ancient ecosystems.
Common uses in design
Amber is the standardized color for caution in traffic-signal and hazard-indicator design worldwide (the middle light of a traffic signal, hazard lamps on vehicles, most industrial machine-status lights) specifically because it sits at high luminous efficiency for the human eye among warm hues while remaining clearly distinguishable from red and green under most forms of color vision deficiency — a deliberate engineering choice made by transportation authorities, not an aesthetic one. Whisky and beer branding also leans heavily on amber, since it's literally descriptive of the beverage's actual color in many cases. Amber is also the standard color for turn-indicator lamps on vehicles in most of the world outside North America (where red rear turn signals remain common instead), a genuine, still-debated difference in automotive-safety regulation between regions rather than a purely stylistic manufacturer choice. Amber traffic-light timing itself is a genuinely engineered value, not a fixed universal constant — the duration a signal stays amber before turning red is calculated per intersection based on posted speed limit and road geometry, following published traffic-engineering formulas designed to give an approaching driver enough time to stop safely.
Accessibility notes
Because amber is the de facto 'caution' hue in transportation and industrial signage, reusing it for anything else in a UI (a highlighted table row, an unrelated badge) risks misreading as a warning; if that's not the intent, a genuinely different hue is safer than a lighter or darker amber. As text color, amber performs similarly to orange — it needs to be pushed fairly dark to clear 4.5:1 against white, so lighter, more 'honey-toned' ambers work better as fills than as small text. Amber's status as the universal 'caution, not danger' signal also makes it a genuinely useful middle ground in a three-state status system (success/caution/error), letting a UI distinguish 'proceed carefully' from both 'all clear' and 'blocked' without inventing a fourth, less legible convention. This three-state convention is stable enough across cultures that reusing it in a genuinely global product carries lower localization risk than most other color-based status conventions, which is a real practical advantage worth weighing against amber's narrower usable-lightness range for text.
Named examples
Goldenrod and DarkGoldenrod are the CSS-named colors that live in this band; goldenrod takes its name from the flowering plant's distinctive yellow-gold flower spikes, not from metallic gold, despite the visual similarity that makes the naming confusion understandable. Beyond the CSS set, honey, mustard, and marigold are all common informal names for slightly different points within this narrow amber band, each carrying its own specific real-world reference (a food, a condiment, a flower) without a single standardized hex value attached to any of them. Butterscotch and caramel are two further common informal food-derived names for points within this band, both evoking a slightly deeper, warmer amber than honey or mustard typically suggest.
Building a amber design-token scale
Amber is the standard token name in Material Design's own default palette (Material calls the full ramp 'Amber' rather than 'Yellow-Orange'), running from amber-50 through amber-900, and it's a common choice for 'pending' or 'in review' status badges in project-management and ticketing UIs — a third state between the near-universal red-for-blocked and green-for-done. Because amber already carries the traffic-light 'caution' meaning across almost every culture with modern road signage, it's one of the few hues where reusing the existing real-world convention, rather than inventing a new one, is usually the right call for a design system's own warning-level token. A dedicated amber warning token also benefits from being tested against both the product's error-red and success-green tokens side by side, since a three-color status system only works if all three remain clearly distinct from each other under the same lighting and display conditions, not just individually legible in isolation. Because amber's usable range as text is narrower than most other warm hues, many teams find it simpler to reserve amber for icons, badges, and fills exclusively and use a separate darker warm neutral for any amber-adjacent body text that needs to pass contrast reliably.