Midnight Diner
A complete five-role scheme. cozy and bold in character — tagged for restaurants, cafe.
primary
#e8843c secondary
#8a6d9e accent
#c14953 background
#131019 text
#f2e9df 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 | #e8843c | 232, 132, 60 | 25°, 79%, 57% |
| secondary | #8a6d9e | 138, 109, 158 | 276°, 20%, 52% |
| accent | #c14953 | 193, 73, 83 | 355°, 49%, 52% |
| background | #131019 | 19, 16, 25 | 260°, 22%, 8% |
| text | #f2e9df | 242, 233, 223 | 32°, 42%, 91% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 15.68 | AAA |
| primary on background | 6.99 | AA |
| secondary on background | 4.27 | AA-large |
| accent on background | 3.89 | AA-large |
| background on primary | 6.99 | AA |
| background on accent | 3.89 | AA-large |
CSS variables
:root {
--color-primary: #e8843c;
--color-secondary: #8a6d9e;
--color-accent: #c14953;
--color-bg: #131019;
--color-text: #f2e9df;
}Tailwind
colors: {
primary: '#e8843c',
secondary: '#8a6d9e',
accent: '#c14953',
background: '#131019',
text: '#f2e9df',
}