Palette

Retro Drive-In Night

Evokes the nostalgic glow of a retro drive-in cinema under a starlit, summer night sky.

retroretro5 colors

More retro 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

#191970#DC143C#00CED1#FFFF00#8A2BE2

Palette guide

How to use Retro Drive-In Night

Overview

The Retro Drive-In Night palette evokes the nostalgic glow of a retro drive-in cinema under a starlit summer night sky. This dramatic collection features a deep indigo (#191970), a bold crimson (#DC143C), a bright turquoise (#00CED1), a vivid yellow (#FFFF00), and a royal purple (#8A2BE2). It's a moody yet vibrant palette, genuinely useful for designers and developers aiming to create atmospheric, synthwave-inspired, or retro-futuristic designs. The strong contrasts and rich jewel tones are perfect for crafting immersive digital environments, unique branding, or captivating visual stories that stand out with a distinct vintage night-time allure.

Best used for

Synthwave and cyberpunk art
Retro video game aesthetics
Dark mode UI/UX design
Music festival branding
Sci-fi illustrations and animations
Themed event websites

Suggested color roles

primary

Utilize #191970 as a dominant, atmospheric background, setting a deep, immersive night-time scene.

secondary

Employ #DC143C for energetic focal points, important notifications, or dynamic headings.

accent

Apply #00CED1 or #FFFF00 for glowing elements, neon lines, or interactive highlights to create visual pop.

background

The deep #191970 serves as the primary background, providing a rich canvas for the vibrant accents.

text

For optimal readability, use #FFFF00 or white for text on #191970. For lighter backgrounds (if used), a very dark gray is recommended.

Accessibility notes

Ensure #FFFF00 is used on sufficiently dark backgrounds (like #191970) for adequate contrast.
Test text legibility for #8A2BE2, especially against mid-tone backgrounds, to ensure accessibility.
Avoid using #00CED1 as a primary text color for large blocks of text; it's best for accents.
Maintain high contrast ratios, particularly for essential information, on the dark #191970 background.

Recommended combinations

Synthwave Night

Creates a dark, glowing, and mysterious atmosphere, perfect for futuristic retro themes.

#191970 · #00CED1 · #8A2BE2

Bold & Bright

Ideal for high-contrast, energetic elements that need to grab attention against a dark base.

#DC143C · #FFFF00 · #191970

Moody Glow

Provides a dramatic look with vibrant accents, suitable for striking visual compositions.

#191970 · #DC143C · #00CED1

CSS variables

:root {
  --retro-drive-in-night-3-1: #191970;
  --retro-drive-in-night-3-2: #DC143C;
  --retro-drive-in-night-3-3: #00CED1;
  --retro-drive-in-night-3-4: #FFFF00;
  --retro-drive-in-night-3-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-drive-in-night-3": {
        1: "#191970",
        2: "#DC143C",
        3: "#00CED1",
        4: "#FFFF00",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#DC143C

Color 3#00CED1

Color 4#FFFF00

Color 5#8A2BE2

Accessibility

Contrast checker

3:1Fail

7.6:1AAA

13.8:1AAA

2.5:1Fail

3:1Fail

2.6:1Fail

4.6:1AA

1.2:1Fail

7.6:1AAA

2.6:1Fail

1.8:1Fail

3:1AA18

13.8:1AAA

4.6:1AA

1.8:1Fail

5.5:1AA

2.5:1Fail

1.2:1Fail

3:1AA18

5.5:1AA

Similar palettes

More like Retro Drive-In Night

Diner Booth Nostalgia

Faded Circus Poster