Palette

Retro Drive-In Night

Bright, contrasting colors recalling the nostalgic fun of a 1950s drive-in movie theater at night.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E63C3B#F6C85F#5AD2F4#FF00FF#333333

Palette guide

How to use Retro Drive-In Night

Overview

The Retro Drive-In Night palette offers a vibrant and cinematic experience, recalling the nostalgic fun of a 1950s drive-in movie theater at night. This collection features a striking red (#E63C3B), a warm golden yellow (#F6C85F), a bright sky blue (#5AD2F4), an electric magenta (#FF00FF), and a grounding dark charcoal (#333333). It's a high-energy palette, genuinely useful for designers and developers aiming to evoke a sense of pop-culture excitement and vintage neon glow. The strong contrasts and vivid hues are perfect for creating dynamic and memorable visual narratives across various digital and print applications.

Best used for

Movie posters and film branding
Retro gaming interfaces
Event promotions and flyers
Digital art and illustrations
Music album covers
Youth-oriented branding

Suggested color roles

primary

Use #E63C3B as a vibrant primary color for dominant elements, headlines, or calls-to-action.

secondary

Employ #5AD2F4 for cool, balancing sections, subheadings, or as a contrasting background element.

accent

Apply #FF00FF for electric highlights, neon effects, or small, attention-grabbing interactive components.

background

A deep #333333 provides a dramatic, 'night sky' background, allowing the brighter colors to glow intensely.

text

For optimal readability, use white or #F6C85F for text on dark backgrounds. Use #333333 for text on lighter hues like #F6C85F.

Accessibility notes

Ensure #F6C85F (golden yellow) is always paired with dark text (e.g., #333333) for sufficient contrast.
Electric magenta (#FF00FF) is best used as an accent, not for long blocks of text, due to its intensity.
Test text legibility on #5AD2F4, especially for smaller font sizes, to ensure it meets contrast standards.
The dark #333333 provides excellent contrast for bright text, ensuring good readability.

Recommended combinations

Neon Glow

Creates a dark, electric atmosphere reminiscent of glowing neon signs at night.

#333333 · #FF00FF · #5AD2F4

Vibrant Pop

Ideal for energetic, bright elements that need to convey excitement and dynamism.

#E63C3B · #F6C85F · #5AD2F4

Cinematic Contrast

Provides a bold, dramatic look, perfect for titles, posters, or striking visual sections.

#333333 · #E63C3B · #F6C85F

CSS variables

:root {
  --retro-drive-in-night-2-1: #E63C3B;
  --retro-drive-in-night-2-2: #F6C85F;
  --retro-drive-in-night-2-3: #5AD2F4;
  --retro-drive-in-night-2-4: #FF00FF;
  --retro-drive-in-night-2-5: #333333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-drive-in-night-2": {
        1: "#E63C3B",
        2: "#F6C85F",
        3: "#5AD2F4",
        4: "#FF00FF",
        5: "#333333",
      }
    }
  }
}

Hex values

Color 1#E63C3B

Color 2#F6C85F

Color 3#5AD2F4

Color 4#FF00FF

Color 5#333333

Accessibility

Contrast checker

2.6:1Fail

2.4:1Fail

1.3:1Fail

3.1:1AA18

2.6:1Fail

1.1:1Fail

2:1Fail

8:1AAA

2.4:1Fail

1.1:1Fail

1.8:1Fail

7.2:1AAA

1.3:1Fail

2:1Fail

1.8:1Fail

4:1AA18

3.1:1AA18

8:1AAA

7.2:1AAA

4:1AA18

Similar palettes

More like Retro Drive-In Night

Mid-Century Atomic Pop

Neon Arcade Buzz