Sunset Clay
Non-profit home page · Score 86 ·Excellent · Added 2026-10-26 · Updated 2026-10-29
Sitting mid-range in lightness, the lead color adapts to both light and dark themes with little adjustment. On a web page it works when the brand color anchors calls to action and the surrounding roles stay quiet enough for long reading sessions.
Sunset Clay is a 10-role Web palette: primary #c15a11 on a #fbfaf9 canvas. Body text reaches 14.43:1 (WCAG AAA), leaving enough headroom for long reading sessions; the primary sits at 4.25:1 against the canvas, enough for large text and control borders, not for body copy.
10 color roles
primary#c15a11rgb(193, 90, 17)hsl(24.9, 83.8%, 41.2%)primaryHover#813b09rgb(129, 59, 9)hsl(25, 87%, 27.1%)primaryActive#492104rgb(73, 33, 4)hsl(25.2, 89.6%, 15.1%)textMain#2d251frgb(45, 37, 31)hsl(25.7, 18.4%, 14.9%)textSub#857060rgb(133, 112, 96)hsl(25.9, 16.2%, 44.9%)bg#fbfaf9rgb(251, 250, 249)hsl(30, 20%, 98%)surface#f7f4f3rgb(247, 244, 243)hsl(15, 20%, 96.1%)border#eae5e1rgb(234, 229, 225)hsl(26.7, 17.6%, 90%)link#7f3907rgb(127, 57, 7)hsl(25, 89.6%, 26.3%)accent#28f6e5rgb(40, 246, 229)hsl(175, 92%, 56.1%)Editorial review · Web
Delta E 137, close. Add a lightness step or an icon to separate them.
Measured 8.1:1, AAA. Safe for body copy and small text.
Saturation 84%, near a pure color. Keep it to small accents.
Measured 1.3:1, below 3:1. This one hurts legibility directly.
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, 84% saturation and 41% 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. 8 palettes share this hue range.
- Lightness distributionLightness across the ten roles reaches a standard deviation of 31.1 around a mean of 51%. Dark tones carry large areas, light ones serve as cards, and almost nothing sits between them. Strong at brand scale, awkward in dense screens where neighbors look abrupt.
- 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 3 palettes tagged Cyber, 4.25:1 places this one at 3, 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 measures 4.25:1 and the accent only 1.31:1, 3.2× apart, so rank is unambiguous. The accent works as a signal rather than a second primary: good for marking one thing such as price, status or a deadline, and it starts crowding the primary once used for several.
- Text hierarchyText main at 14.43:1 holds up, but secondary text sits at 4.49:1, below 4.5:1. That layer cannot carry small type: timestamps and helper text need to grow or switch to the main text color.
How to use it
The lead color sits at 41% lightness and 84% saturation. It sits in the lower-middle range: enough presence over a light background, and it does not vanish when the theme goes dark. Saturation runs high, so the color is energetic and hard to miss; keep it to buttons and key marks, because large fields of it get loud.
What it looks like in a real interface
Build your product with this palette
Navigation, buttons, cards and text hierarchy, previewed in one go.
Primary actionLearn moreAccessibility contrast check
| Foreground / background | Ratio | Body text | Large text |
|---|---|---|---|
| Body text / page background | 14.43:1 | AAA | AAA |
| Body text / card background | 13.75:1 | AAA | AAA |
| Brand color / page background | 4.25: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 34 palettes on this platform (mean over ten roles). They would not hold in a different library.
- Almost the same set as Baked Ochre, mean Delta E 12, only the primary steps apart.
- Furthest from Midnight Violet at Delta E 425; put the two side by side and they pull in opposite directions.
- Primary saturation 84 percent, rank 8 of 34 on this platform, on the saturated side.
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: #c15a11; /* Primary */
--color-primaryHover: #813b09; /* Primary hover */
--color-primaryActive: #492104; /* Primary active */
--color-textMain: #2d251f; /* Text main */
--color-textSub: #857060; /* Text sub */
--color-bg: #fbfaf9; /* Background */
--color-surface: #f7f4f3; /* Surface */
--color-border: #eae5e1; /* Border */
--color-link: #7f3907; /* Link */
--color-accent: #28f6e5; /* Accent */
}