ع

Retro Diner

Red, cream and blue reminiscent of mid-century diners.

≈ Error Red
≈ Honeydew
≈ Powder Blue
≈ Cerulean
≈ Royal Navy

Color codes

HEXRGBHSLCMYK
hsl(355, 78%, 56%)cmyk(0%, 75%, 70%, 10%)
hsl(105, 55%, 96%)cmyk(4%, 0%, 5%, 2%)
hsl(182, 43%, 76%)cmyk(24%, 1%, 0%, 14%)
hsl(203, 39%, 44%)cmyk(56%, 22%, 0%, 38%)
hsl(215, 50%, 23%)cmyk(67%, 39%, 0%, 66%)

CSS

:root {
  --retro-diner-1: #E63946;
  --retro-diner-2: #F1FAEE;
  --retro-diner-3: #A8DADC;
  --retro-diner-4: #457B9D;
  --retro-diner-5: #1D3557;
}

How these colors work together

It pairs opposite hues on the color wheel for strong, lively contrast. Overall it reads cool. Lightness spans 73 points, which sets how much contrast you can create.

2 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#F1FAEE⁩ on ⁦#1D3557⁩ (11.56:1).

Retro Diner — readable text using the best pair.

Suggested applications

  • Retro posters, cafés and nostalgic branding.
  • Interface themes: use the lightest color for backgrounds and the darkest for text.
  • Brand kits, social graphics and presentations.

#retro#red#blue

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Retro Diner palette?
The Retro Diner palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use ⁦#F1FAEE⁩ on ⁦#1D3557⁩: it has a contrast ratio of 11.56:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

More palettes

Faded Postcard#D8C3A5 #E98074 #8E8D8A #E85A4F #EAE7DCSeventies Living#6B4226 #D4A017 #E07B39 #8A9A5B #F2E3C6Old Map#F4E9CD #C9B37E #8C7851 #5A4A32 #2F4858Black and Gold#0B0B0C #1E1E20 #3A3631 #B08D57 #E8D5A6Desert Dunes#F2D6B3 #E0A96D #C2763B #8C4A2F #3B2A20Concrete and Coral#2B2D42 #8D99AE #EDF2F4 #EF233C #D90429