Roast & Cream
A complete five-role scheme. cozy and grounded in character — tagged for cafe, retail.
primary
#6f4e37 secondary
#b08968 accent
#2f6f62 background
#fdf9f4 text
#2a1e14 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 | #6f4e37 | 111, 78, 55 | 25°, 34%, 33% |
| secondary | #b08968 | 176, 137, 104 | 27°, 31%, 55% |
| accent | #2f6f62 | 47, 111, 98 | 168°, 41%, 31% |
| background | #fdf9f4 | 253, 249, 244 | 33°, 69%, 97% |
| text | #2a1e14 | 42, 30, 20 | 27°, 35%, 12% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 15.48 | AAA |
| primary on background | 7.10 | AAA |
| secondary on background | 3.02 | AA-large |
| accent on background | 5.61 | AA |
| background on primary | 7.10 | AAA |
| background on accent | 5.61 | AA |
CSS variables
:root {
--color-primary: #6f4e37;
--color-secondary: #b08968;
--color-accent: #2f6f62;
--color-bg: #fdf9f4;
--color-text: #2a1e14;
}Tailwind
colors: {
primary: '#6f4e37',
secondary: '#b08968',
accent: '#2f6f62',
background: '#fdf9f4',
text: '#2a1e14',
}