Cream & Sage
A complete five-role scheme. serene and natural in character — tagged for interior, wellness.
primary
#68805c secondary
#b5c4a8 accent
#c96f4a background
#fbf7ee text
#26301f AcmeSign up
Ship your next idea faster
Everything you need to launch, in one place.
Get started Learn moreOpen this scheme in the Studio →
Color values
| Role | Hex | RGB | HSL |
|---|---|---|---|
| primary | #68805c | 104, 128, 92 | 100°, 16%, 43% |
| secondary | #b5c4a8 | 181, 196, 168 | 92°, 19%, 71% |
| accent | #c96f4a | 201, 111, 74 | 17°, 54%, 54% |
| background | #fbf7ee | 251, 247, 238 | 42°, 62%, 96% |
| text | #26301f | 38, 48, 31 | 95°, 22%, 15% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 12.88 | AAA |
| primary on background | 4.07 | AA-large |
| secondary on background | 1.72 | fail |
| accent on background | 3.35 | AA-large |
| background on primary | 4.07 | AA-large |
| background on accent | 3.35 | AA-large |
CSS variables
:root {
--color-primary: #68805c;
--color-secondary: #b5c4a8;
--color-accent: #c96f4a;
--color-bg: #fbf7ee;
--color-text: #26301f;
}Tailwind
colors: {
primary: '#68805c',
secondary: '#b5c4a8',
accent: '#c96f4a',
background: '#fbf7ee',
text: '#26301f',
}