WGSN and Coloro included Amber Haze in their Spring/Summer 2026 Key Colours forecast; Coloro identifies it as 043-65-31. This is a seasonal fashion and consumer-design signal, not evidence that software teams have widely adopted amber interfaces. Here we test how a golden-ochre direction can work in a digital product when paired with a dark umber anchor.
The five sRGB values below are an original ColorIndicator interface palette inspired by that direction. They are not an official digital specification or conversion of Coloro 043-65-31. For autumn campaigns rather than interface tokens, see the Fall Color Palette Guide and Seasonal Palettes Hub; for a clay-red UI direction, compare Terracotta in Modern UI Design.
Why this golden-ochre system needs two distinct roles
- A dark anchor for light surfaces: #D99B26 measures only 2.42:1 on white and 2.30:1 on #FBF9F2, so it cannot serve as text there. Deep #3D2706 supplies tested contrast for headings, body copy and primary actions on those light surfaces.
- Contextual meaning over assumed psychology: The amber accent can establish a warm visual direction, but color alone does not guarantee a particular feeling. Because it can resemble a warning cue, use explicit labels and icons for actions and status messages.
- A luminous dark-theme counterpart: The measured #D99B26 token has relative luminance of about 0.383 and reaches 7.84:1 against #12100C, making that exact pair suitable for text and links on the tested dark surface.
A five-color Amber Haze palette for UI tokens
Assign each original sRGB value a specific role in a design system. A decorative divider or accent swatch should not become essential text or a control outline without testing its actual surroundings.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Roast Umber | #3D2706 | 61, 39, 6 | 36°, 82%, 13% | Primary actions and text on tested light surfaces |
| --color-accent-highlight | Amber Haze | #D99B26 | 217, 155, 38 | 39°, 70%, 50% | Text and links on dark surfaces; accent fills with #3D2706 text |
| --color-surface-light | Honey Cream Canvas | #FBF9F2 | 251, 249, 242 | 47°, 53%, 97% | Light canvas and cards |
| --color-border-subtle | Pale Straw | #EBDDBF | 235, 221, 191 | 41°, 52%, 84% | Decorative dividers, not the sole control boundary |
| --color-surface-dark | Nocturnal Charcoal | #12100C | 18, 16, 12 | 40°, 20%, 6% | Dark canvas and footer surfaces |
Have a product screenshot or campaign moodboard? Analyze your image to extract its actual colors before assigning tokens, or browse the Color Palettes Library for other starting points.
WCAG contrast: measure the exact pairing
WCAG contrast compares the linearized relative luminance of two sRGB colors. The ratios below come from the stated HEX values; they are not an accessibility certification for every element in a finished interface.
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #3D2706 / #FFFFFF | 14.08:1 | AAA | AAA | Exceeds 3:1 where required |
| #3D2706 / #FBF9F2 | 13.37:1 | AAA | AAA | Exceeds 3:1 where required |
| #3D2706 / #D99B26 | 5.81:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #D99B26 / #12100C | 7.84:1 | AAA | AAA | Exceeds 3:1 where required |
| #D99B26 / #FFFFFF | 2.42:1 | Below AA | Below AA | Below 3:1 if essential |
| #D99B26 / #FBF9F2 | 2.30:1 | Below AA | Below AA | Below 3:1 if essential |
| #EBDDBF / #FBF9F2 | 1.28:1 | Below AA | Below AA | Decorative divider only |
For text, WCAG AA requires 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Non-text contrast uses 3:1 for visual information needed to identify active controls and states against adjacent colors. A passing button label does not by itself verify the button boundary, focus indicator or entire interface.
Amber #D99B26 on white or honey cream is too low-contrast for text or an essential control boundary. On an amber button, #3D2706 text measures 5.81:1; if the button edge is needed to identify the control against a light card, give it a separately tested darker border. Pale Straw #EBDDBF measures only 1.28:1 against Honey Cream, so keep it decorative rather than the only visible input outline.
Test hover fills (such as #261803, which measures 17.29:1 against white), focus indicators and neighboring surfaces using the Contrast Checker. Convert any token to RGB and HSL in the HEX to RGB Converter. Passing text contrast alone does not establish a passing component or state.
Light and dark token roles
In a light theme, use #FBF9F2 for the canvas, white for raised cards and #3D2706 for main text and primary actions. If #D99B26 becomes a secondary button fill, place #3D2706 text inside it, not white text. In dark mode, start with #12100C and use the tested #D99B26 pair for links or active text. Avoid using #3D2706 as body text on #12100C.
For another example of adapting a bright accent to a dark interface, compare Electric Chartreuse in Dark-Mode UI.
CSS custom properties to start from
:root { --color-canvas: #FBF9F2; --color-surface: #FFFFFF; --color-text-main: #3D2706; --color-brand-primary: #3D2706; }for the light foundation.--color-brand-primary-hover: #261803; --color-accent-fill: #D99B26; --color-text-on-accent: #3D2706;for the tested action and accent roles.--color-border-subtle: #EBDDBF; --color-dark-canvas: #12100C; --color-dark-accent: #D99B26;as starting values; test each adjacent color and interaction state.
Frequently asked questions
Are these the official HEX values for Coloro Amber Haze?
No. Coloro identifies Amber Haze as 043-65-31 in its Spring/Summer 2026 forecast. The five sRGB HEX values here are original ColorIndicator interface tokens inspired by that direction, not an official Coloro conversion.
Does deep roast umber meet WCAG AAA contrast requirements?
For the exact tested pairs, #3D2706 measures 14.08:1 on white and 13.37:1 on #FBF9F2. Both exceed the 7:1 AAA threshold for normal text. Other text, borders and states still need their own checks.
Can Amber Haze (#D99B26) be used with white text on a button?
Not for the tested pair: white on #D99B26 measures 2.42:1, below the 4.5:1 AA threshold for normal text and the 3:1 threshold for large text. #3D2706 text on that fill measures 5.81:1, meeting AA for normal text and AAA for large text.
How should I adapt this palette for dark mode?
Use #12100C as the dark surface and the tested #D99B26 token for text or links where their 7.84:1 pair applies. Check focus indicators, control boundaries and adjacent surfaces separately.
Where can I convert these HEX codes and check contrast?
Use the ColorIndicator HEX to RGB Converter for RGB and HSL values, then enter the exact foreground and background values in the Contrast Checker.
Inspect RGB and HSL in the HEX to RGB Converter, then measure each real foreground and background pair in the Contrast Checker.