Amber Ridge
Trip planning & guides · Score 86 ·Excellent · Added 2026-10-25 · Updated 2026-10-29
Sitting mid-range in lightness, the lead color adapts to both light and dark themes with little adjustment. In an app screen this reads best when the brand color is reserved for one primary action per view, so the hierarchy does not turn into a wall of color.
Amber Ridge is a 10-role App palette: primary #dd762b on a #fbfaf9 canvas. Body text reaches 14.43:1 (WCAG AAA), leaving enough headroom for long reading sessions; the primary sits at 3.01:1 against the canvas, enough for large text and control borders, not for body copy.
10 color roles
primary#dd762brgb(221, 118, 43)hsl(25.3, 72.4%, 51.8%)primaryDark#aa5418rgb(170, 84, 24)hsl(24.7, 75.3%, 38%)primaryLight#eed2bergb(238, 210, 190)hsl(25, 58.5%, 83.9%)secondary#54c9bfrgb(84, 201, 191)hsl(174.9, 52%, 55.9%)accent#28a0f6rgb(40, 160, 246)hsl(205, 92%, 56.1%)success#24b761rgb(36, 183, 97)hsl(144.9, 67.1%, 42.9%)warning#f5a80frgb(245, 168, 15)hsl(39.9, 92%, 51%)danger#ec3022rgb(236, 48, 34)hsl(4.2, 84.2%, 52.9%)text#2d251frgb(45, 37, 31)hsl(25.7, 18.4%, 14.9%)bg#fbfaf9rgb(251, 250, 249)hsl(30, 20%, 98%)Editorial review · App
Measured 3.1:1, enough for large or bold text only. Do not put body copy on it.
Measured 6.0:1, past AA. Fine for body copy; keep an eye on small text and hairlines.
Saturation 72%, loud. Good for emphasis; spread across a large area it overpowers the content.
Delta E 438, close to complementary. Crisp apart, but they fight when placed side by side at scale.
How this palette is put together
Six readings computed from these exact color values. None of them would hold for another palette.
- Primary hue rangeThe primary sits at hue 25° in the red range, 72% saturation and 52% lightness. Red carries the most weight of any primary: give it slightly too much area and it reads as a warning, so it belongs on action buttons and key marks rather than large backgrounds. 10 palettes share this hue range.
- Lightness distributionLightness across the ten roles has a standard deviation of only 21.8 around a mean of 55%, which is fairly flat. Background, cards and text sit close together, so structure has to come from borders, shadows and spacing rather than from value.
- Background temperatureAt 20% saturation and hue 30°, #FBFAF9 is a tinted ground rather than a gray one. It brings its own mood and fixes the key of the whole palette, so the primary can only be chosen inside that key. Dark text on it needs its contrast measured again instead of borrowing the usual neutral-background assumptions.
- Standing among peersWithin the 4 palettes tagged Forest, 3.01:1 places this one at 4, on the lighter end. It will not be the first thing to jump out among peers, which suits a secondary role or pages that should not compete for attention.
- Primary vs accentThe primary reaches 3.01:1 on the background and the accent 2.70:1, a difference of only 1.1×. Two leads, equally weighted, which works if the accent carries a second class of actions of real importance. The risk is that nobody can tell which comes first, so position and area have to settle it.
- Text hierarchyText reaches 14.43:1, and there is no separate secondary text layer here, so every word uses this one color. That single number decides whether the palette can carry information-dense screens at all.
How to use it
The lead color sits at 52% lightness and 72% saturation. The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on. Saturation is moderate, present without being loud, the easiest band to live with in a day-to-day interface.
What it looks like in a real interface
Sample body copy, used to check how secondary text reads on a card background.
Read more →Accessibility contrast check
| Foreground / background | Ratio | Body text | Large text |
|---|---|---|---|
| Body text / page background | 14.43:1 | AAA | AAA |
| Brand color / page background | 3.01:1 | AA | AA |
Verify this pair in the checker →Compare with other palettes →Site-wide accessibility report →
More palettes on this platform
Where this one sits in the library
The numbers below come from measured color distances against the other 31 palettes on this platform (mean over ten roles). They would not hold in a different library.
- Almost the same set as Warm Brick, mean Delta E 50, only the primary steps apart.
- Furthest from Ink Blue Night at Delta E 342; put the two side by side and they pull in opposite directions.
- Primary saturation 72 percent, rank 4 of 31 on this platform, the loud end of the range.
Export to your project
Eight formats, ready to paste: four for the web, plus one each for Android, iOS, Flutter and mini programs. Or fetch them by URL from your tooling or AI agent.
:root {
--color-primary: #dd762b; /* Primary */
--color-primaryDark: #aa5418; /* Primary dark */
--color-primaryLight: #eed2be; /* Primary light */
--color-secondary: #54c9bf; /* Secondary */
--color-accent: #28a0f6; /* Accent */
--color-success: #24b761; /* Success */
--color-warning: #f5a80f; /* Warning */
--color-danger: #ec3022; /* Danger */
--color-text: #2d251f; /* Text */
--color-bg: #fbfaf9; /* Page background */
}