vibrantretro
Retro Diner Color Palette
Retro Diner is a vibrant and retro color palette of 5 colors: Blush (#ef476f), Mustard (#ffd166), Medium Aquamarine (#06d6a0), Steel Blue (#118ab2) and Prussian Blue (#073b4c). Its dominant hue is pink.
The darkest color, Prussian Blue, on the lightest, Mustard, gives a 8.37:1 contrast ratio — enough for body text at WCAG AAA. 2 pairs in this palette pass AA for normal text. Blush (#ef476f) is its most saturated color and a natural choice for buttons and links.
Colors
- Blush
- Mustard
- Medium Aquamarine
- Steel Blue
- Prussian Blue
CSS Output
:root {
--retro-diner-1: #ef476f;
--retro-diner-2: #ffd166;
--retro-diner-3: #06d6a0;
--retro-diner-4: #118ab2;
--retro-diner-5: #073b4c;
}Retro Diner on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Prussian Blue on Mustard#073b4c on #ffd1668.37:1AAA
- Prussian Blue on Medium Aquamarine#073b4c on #06d6a06.40:1AA
- Prussian Blue on Blush#073b4c on #ef476f3.33:1AA Large
- Prussian Blue on Steel Blue#073b4c on #118ab23.04:1AA Large