Back to palettes

Palette

Retro Drive-In

Captures the nostalgic charm of a 1950s drive-in cinema, with bright lights and classic cars.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Drive-In 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 Drive-In.

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

Data visualization

#E74C3C#3498DB#F1C40F#BDC3C7#ECBABA

Palette guide

How to use Retro Drive-In

Overview

The Retro Drive-In palette evokes the timeless appeal of 1950s Americana, perfect for designers seeking a vibrant, nostalgic aesthetic. Featuring a lively red, #E74C3C, a classic blue, #3498DB, and a cheerful yellow, #F1C40F, it captures the essence of vintage signage and classic cars. Subtle supporting tones like the soft pink, #ECBABA, and the cool gray, #BDC3C7, ground the bolder hues, offering versatility for various applications. This palette is ideal for projects aiming to infuse a sense of playful history and iconic charm, providing a balanced yet energetic foundation for brand identity or digital interfaces.

Best used for

  • 1950s themed branding and logos
  • Vintage poster and illustration design
  • Diner or retro restaurant interior concepts
  • Event invitations for classic car shows or themed parties
  • Mobile game UI with a nostalgic, playful feel
  • Theatrical or film set design for historical periods

Suggested color roles

primary

Use #E74C3C (Red) for primary calls-to-action, prominent headlines, or main brand elements to capture immediate attention and convey energy.

secondary

Employ #3498DB (Blue) for complementary sections, secondary buttons, or large background blocks where a stable, classic feel is desired.

accent

Apply #F1C40F (Yellow) sparingly for highlights, small icons, or decorative elements to add a cheerful, playful pop.

background

Utilize #ECBABA (Light Pink) or #BDC3C7 (Light Gray) as soft, neutral backgrounds that allow the vibrant primary and secondary colors to stand out.

text

For optimal readability, use a dark charcoal or black text. Alternatively, #3498DB can work for headings on light backgrounds like #ECBABA.

Accessibility notes

  • Avoid placing #F1C40F (Yellow) directly on #ECBABA (Light Pink) or #BDC3C7 (Light Gray) for text, as contrast will be insufficient for readability.
  • Ensure sufficient contrast when pairing #E74C3C (Red) with #ECBABA (Light Pink) for body text; it's generally best for larger headings or accents.
  • Test all text elements against their backgrounds using WCAG guidelines; #3498DB (Blue) on #ECBABA (Light Pink) may require larger font sizes.
  • For small text, stick to high-contrast combinations like black or dark gray on #BDC3C7 or #ECBABA to meet accessibility standards.

Recommended combinations

Classic Diner

Ideal for bold headers, playful illustrations, and clear content divisions, evoking a fun, retro vibe.

#E74C3C · #F1C40F · #BDC3C7

Cool Nostalgia

Suitable for softer backgrounds, secondary information, or a more subdued, elegant retro aesthetic in UI elements.

#3498DB · #ECBABA · #BDC3C7

Bold Primary

A high-energy trio for marketing collateral, event branding, or any design needing an immediate, impactful retro statement.

#E74C3C · #3498DB · #F1C40F

CSS variables

:root {
  --retro-drive-in-1: #E74C3C;
  --retro-drive-in-2: #3498DB;
  --retro-drive-in-3: #F1C40F;
  --retro-drive-in-4: #BDC3C7;
  --retro-drive-in-5: #ECBABA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-drive-in": {
        1: "#E74C3C",
        2: "#3498DB",
        3: "#F1C40F",
        4: "#BDC3C7",
        5: "#ECBABA",
      }
    }
  }
}

Related searches

1950s color schemesretro diner color palettevintage drive-in aestheticclassic car colorsnostalgic design palette

Palette colors

Hex values

Color 1#E74C3C
·
Color 2#3498DB
·
Color 3#F1C40F
·
Color 4#BDC3C7
·
Color 5#ECBABA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2.3:1Fail
2.1:1Fail
2.2:1Fail
2
1.2:1Fail
1.9:1Fail
1.8:1Fail
1.8:1Fail
3
2.3:1Fail
1.9:1Fail
1.1:1Fail
1:1Fail
4
2.1:1Fail
1.8:1Fail
1.1:1Fail
1:1Fail
5
2.2:1Fail
1.8:1Fail
1:1Fail
1:1Fail

Similar palettes

More like Retro Drive-In

View all vibrant
Diner Jukebox Pop
Diner Booth Vinyl
Jukebox Soda Pop
Retro Diner Booth
Retro Diner Booth
Retro Diner Glaze