Retro Diner
A complete five-role scheme. cozy and friendly in character — tagged for restaurants, retail.
#d1495b #f2a6b3 #2e6f74 #fdf6ec #33141b 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',
}Best text pairings
The strongest foreground/background combinations in Retro Diner, 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.
#33141b on #fdf6ec Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — clears AAA comfortably.
#33141b on #f2a6b3 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — accent on background — meets AA for body text.
#2e6f74 on #fdf6ec Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — suits large text and UI accents only.
#d1495b on #fdf6ec