Palette

Retro Diner Dream

A bold and cheerful palette evoking the iconic colors of a classic 1950s American diner.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Diner Dream reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Retro Diner Dream.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#E71D36#FF9F1C#2EC4B6#131B23#C8D8E4

Palette guide

How to use Retro Diner Dream

Overview

The Retro Diner Dream palette is a bold and cheerful collection that perfectly captures the vibrant energy of a classic 1950s American diner. It features a striking Scarlet Red (#E71D36) and a warm, inviting Orange (#FF9F1C), creating an immediate sense of nostalgia and fun. A refreshing Teal (#2EC4B6) introduces a cool, unexpected contrast, while a deep Charcoal (#131B23) provides strong grounding and sophistication. The soft Powder Blue (#C8D8E4) offers a light, airy background. This palette is ideal for designers seeking to infuse projects with a lively, dynamic retro aesthetic, perfect for branding, digital interfaces, or print media that needs to make a memorable, energetic statement.

Best used for

Vibrant retro branding
Modern vintage website design
Youth-focused marketing campaigns
Mobile game UI with a playful feel
Animated explainer videos
Themed event promotions

Suggested color roles

primary

Use #E71D36 (Scarlet Red) for impactful headlines, main calls to action, or prominent brand elements, conveying immediate energy.

secondary

Apply #FF9F1C (Orange) for cheerful highlights, secondary buttons, or energetic visual accents, adding warmth and approachability.

accent

Leverage #2EC4B6 (Teal) for interactive elements, strategic contrast, or unique design features, providing a cool and modern pop.

background

Employ #C8D8E4 (Powder Blue) as a soft, inviting background, ensuring readability and a gentle, expansive feel.

text

Utilize #131B23 (Charcoal) for all primary body text, ensuring excellent readability and a sophisticated contrast against lighter backgrounds.

Accessibility notes

Ensure #131B23 text on #C8D8E4 background provides optimal readability (WCAG AAA compliant).
The vibrant colors (#E71D36, #FF9F1C, #2EC4B6) offer strong contrast against #C8D8E4 for headings.
Avoid using #FF9F1C for small text on #C8D8E4 due to potential low contrast; it's best for larger elements.
Consider using white text on #E71D36 or #131B23 for maximum legibility on darker elements.

Recommended combinations

Dynamic Duo

Bold headlines, energetic calls to action, and cheerful content areas for high impact.

#E71D36 · #FF9F1C · #C8D8E4

Cool Contrast

Clean informational sections, navigation elements, and legible body text with a modern touch.

#2EC4B6 · #131B23 · #C8D8E4

Retro Pop

Striking graphic elements, vibrant icons, or powerful branding statements with strong visual appeal.

#E71D36 · #2EC4B6 · #FF9F1C

CSS variables

:root {
  --retro-diner-dream-2-1: #E71D36;
  --retro-diner-dream-2-2: #FF9F1C;
  --retro-diner-dream-2-3: #2EC4B6;
  --retro-diner-dream-2-4: #131B23;
  --retro-diner-dream-2-5: #C8D8E4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-dream-2": {
        1: "#E71D36",
        2: "#FF9F1C",
        3: "#2EC4B6",
        4: "#131B23",
        5: "#C8D8E4",
      }
    }
  }
}

Hex values

Color 1#E71D36

Color 2#FF9F1C

Color 3#2EC4B6

Color 4#131B23

Color 5#C8D8E4

Accessibility

Contrast checker

2.2:1Fail

2.1:1Fail

3.8:1AA18

3.1:1AA18

2.2:1Fail

1.1:1Fail

8.5:1AAA

1.4:1Fail

2.1:1Fail

1.1:1Fail

8:1AAA

1.5:1Fail

3.8:1AA18

8.5:1AAA

8:1AAA

11.9:1AAA

3.1:1AA18

1.4:1Fail

1.5:1Fail

11.9:1AAA

Similar palettes

More like Retro Diner Dream