Espresso Bar
A complete five-role scheme. cozy and warm in character — tagged for cafe, food.
#4a2c2a #8a5a44 #d0a85c #faf6f1 #241511 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 | #4a2c2a | 74, 44, 42 | 4°, 28%, 23% |
| secondary | #8a5a44 | 138, 90, 68 | 19°, 34%, 40% |
| accent | #d0a85c | 208, 168, 92 | 39°, 55%, 59% |
| background | #faf6f1 | 250, 246, 241 | 33°, 47%, 96% |
| text | #241511 | 36, 21, 17 | 13°, 36%, 10% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 16.40 | AAA |
| primary on background | 11.58 | AAA |
| secondary on background | 5.38 | AA |
| accent on background | 2.07 | fail |
| background on primary | 11.58 | AAA |
| background on accent | 2.07 | fail |
CSS variables
:root {
--color-primary: #4a2c2a;
--color-secondary: #8a5a44;
--color-accent: #d0a85c;
--color-bg: #faf6f1;
--color-text: #241511;
}Tailwind
colors: {
primary: '#4a2c2a',
secondary: '#8a5a44',
accent: '#d0a85c',
background: '#faf6f1',
text: '#241511',
}Best text pairings
The strongest foreground/background combinations in Espresso Bar, 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.
#241511 on #faf6f1 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — clears AAA comfortably.
#4a2c2a on #faf6f1 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on accent — clears AAA comfortably.
#241511 on #d0a85c Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on accent — meets AA for body text.
#4a2c2a on #d0a85c