Camellia
Sleep sound library · Score 86 ·Excellent · Added 2026-10-28 · Updated 2026-10-29
The lead color is deep, so use it for surfaces and emphasis rather than fine text. 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.
Camellia is a 10-role App palette: primary #8e3626 on a #fbf9f9 canvas. Body text reaches 14.84:1 (WCAG AAA), leaving enough headroom for long reading sessions; the primary sits at 7.4:1 against the canvas, so white text sits on it safely.
10 color roles
primary#8e3626rgb(142, 54, 38)hsl(9.2, 57.8%, 35.3%)primaryDark#571f15rgb(87, 31, 21)hsl(9.1, 61.1%, 21.2%)primaryLight#d09287rgb(208, 146, 135)hsl(9, 43.7%, 67.3%)secondary#8e713brgb(142, 113, 59)hsl(39, 41.3%, 39.4%)accent#31edabrgb(49, 237, 171)hsl(158.9, 83.9%, 56.1%)success#25a259rgb(37, 162, 89)hsl(145, 62.8%, 39%)warning#e69d0argb(230, 157, 10)hsl(40.1, 91.7%, 47.1%)danger#de281brgb(222, 40, 27)hsl(4, 78.3%, 48.8%)text#2d211frgb(45, 33, 31)hsl(8.6, 18.4%, 14.9%)bg#fbf9f9rgb(251, 249, 249)hsl(0, 20%, 98%)Editorial review · App
Measured 7.8:1, AAA. Safe for body copy and small text.
Measured 2.4:1, below 3:1. This one hurts legibility directly.
Saturation 58%, loud. Good for emphasis; spread across a large area it overpowers the content.
Delta E 448, 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 9° in the red range, 58% saturation and 35% 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. 11 palettes share this hue range.
- Lightness distributionLightness across the ten roles has a standard deviation of only 22.5 around a mean of 47%, 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 0°, #FBF9F9 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 peersAmong the 3 palettes tagged Natural, this one measures 7.40:1 for primary on background, ranking 1. That puts it among the most legibility-forward in the group.
- Primary vs accentThe primary measures 7.40:1 and the accent only 1.45:1, 5.1× 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 reaches 14.84: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 35% lightness and 58% saturation. This palette's lead color is deep and carries weight, which suits interfaces that need to feel professional and steady, and it holds a headline up. 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.84:1 | AAA | AAA |
| Brand color / page background | 7.4:1 | AAA | AAA |
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 Cider, mean Delta E 36, only the primary steps apart.
- Furthest from Ink Blue Night at Delta E 338; put the two side by side and they pull in opposite directions.
- Primary saturation 58 percent, rank 15 of 31 on this platform, mid 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: #8e3626; /* Primary */
--color-primaryDark: #571f15; /* Primary dark */
--color-primaryLight: #d09287; /* Primary light */
--color-secondary: #8e713b; /* Secondary */
--color-accent: #31edab; /* Accent */
--color-success: #25a259; /* Success */
--color-warning: #e69d0a; /* Warning */
--color-danger: #de281b; /* Danger */
--color-text: #2d211f; /* Text */
--color-bg: #fbf9f9; /* Page background */
}