Retro Diner
A complete five-role scheme. cozy and friendly in character — tagged for restaurants, retail.
primary
#d1495b secondary
#f2a6b3 accent
#2e6f74 background
#fdf6ec text
#33141b 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 | #d1495b | 209, 73, 91 | 352°, 60%, 55% |
| secondary | #f2a6b3 | 242, 166, 179 | 350°, 75%, 80% |
| accent | #2e6f74 | 46, 111, 116 | 184°, 43%, 32% |
| background | #fdf6ec | 253, 246, 236 | 35°, 81%, 96% |
| text | #33141b | 51, 20, 27 | 346°, 44%, 14% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 15.57 | AAA |
| primary on background | 4.06 | AA-large |
| secondary on background | 1.80 | fail |
| accent on background | 5.37 | AA |
| background on primary | 4.06 | AA-large |
| background on accent | 5.37 | AA |
CSS variables
:root {
--color-primary: #d1495b;
--color-secondary: #f2a6b3;
--color-accent: #2e6f74;
--color-bg: #fdf6ec;
--color-text: #33141b;
}Tailwind
colors: {
primary: '#d1495b',
secondary: '#f2a6b3',
accent: '#2e6f74',
background: '#fdf6ec',
text: '#33141b',
}