Espresso Bar
A complete five-role scheme. cozy and warm in character — tagged for cafe, food.
primary
#4a2c2a secondary
#8a5a44 accent
#d0a85c background
#faf6f1 text
#241511 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 | #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',
}