Roast & Cream
A complete five-role scheme. cozy and grounded in character — tagged for cafe, retail.
#6f4e37 #b08968 #2f6f62 #fdf9f4 #2a1e14 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',
}Best text pairings
The strongest foreground/background combinations in Roast & Cream, ranked by WCAG contrast. Darker color set as the text; ratios of 4.5:1+ suit body copy, 7:1+ meet AAA.
Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on background — clears AAA comfortably.
#2a1e14 on #fdf9f4 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — clears AAA comfortably.
#6f4e37 on #fdf9f4 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — accent on background — meets AA for body text.
#2f6f62 on #fdf9f4 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — meets AA for body text.
#2a1e14 on #b08968