Back to palettes

Palette

Synthwave Midnight Drive

Evokes the pulsating, artificial glow of an 80s inspired futuristic cityscape at midnight.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Synthwave Midnight Drive 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 Synthwave Midnight Drive.

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

Data visualization

#4C2A70#924FE8#00C8C8#F0F8FF#33A183

Palette guide

How to use Synthwave Midnight Drive

Overview

The "Synthwave Midnight Drive" palette perfectly captures the essence of a nocturnal journey through an 80s-inspired cityscape. Anchored by the deep, mysterious #4C2A70 (dark purple) and illuminated by the pulsating #924FE8 (bright violet), this collection balances dark sophistication with vibrant energy. The cool, refreshing #00C8C8 (teal) adds a digital glow, while #33A183 (sea green) offers an earthy yet futuristic contrast. A touch of near-white, #F0F8FF, provides crispness. Developers and designers can utilize these hex codes to build immersive UIs, atmospheric game environments, or sleek branding that evokes retro-futuristic elegance and energetic nostalgia.

Best used for

  • Retro-futuristic game environments and level design
  • Sleek app interfaces with a dark, sophisticated theme
  • Branding for upscale tech or entertainment companies
  • Animated title sequences and motion graphics
  • Virtual reality experiences set in futuristic cities
  • Album art for synthwave and electronic music

Suggested color roles

primary

#4C2A70 establishes a deep, luxurious base, ideal for backgrounds, main content panels, or large structural elements.

secondary

#924FE8 provides a compelling mid-tone, excellent for headers, important modules, or as a vibrant, yet not overwhelming, background element.

accent

#00C8C8 delivers a striking, electric highlight, perfect for interactive components, hover states, or focal points needing a digital pop.

background

#4C2A70 offers an immersive, dark canvas, enhancing the neon glow of brighter elements and creating a moody atmosphere.

text

#F0F8FF ensures crisp readability against the dark #4C2A70 or #33A183, suitable for body text, labels, and critical information.

Accessibility notes

  • #F0F8FF (near-white) on #4C2A70 (dark purple) or #33A183 (sea green) provides excellent contrast for text readability.
  • Be cautious when pairing #924FE8 (bright violet) with #00C8C8 (teal) for text, as their contrast might be insufficient for WCAG AA.
  • Ensure interactive elements using #00C8C8 or #924FE8 have adequate contrast against their immediate background.
  • For users with color vision deficiencies, rely on strong value contrast rather than just hue differences, especially with the blues and purples.

Recommended combinations

Cityscape Glow

Creates a classic dark mode aesthetic, with #4C2A70 as the base, #00C8C8 for highlights, and #F0F8FF for clear text and UI elements.

#4C2A70 · #00C8C8 · #F0F8FF

Violet Pulse

A dynamic trio for sections needing energy and depth, using #924FE8 as a dominant color, #33A183 for subtle contrast, and #4C2A70 for grounding.

#924FE8 · #33A183 · #4C2A70

Digital Horizon

Excellent for headers or graphical elements, with #00C8C8 as a primary visual, #F0F8FF for clean text, and #924FE8 as a secondary accent.

#00C8C8 · #F0F8FF · #924FE8

CSS variables

:root {
  --synthwave-midnight-drive-1: #4C2A70;
  --synthwave-midnight-drive-2: #924FE8;
  --synthwave-midnight-drive-3: #00C8C8;
  --synthwave-midnight-drive-4: #F0F8FF;
  --synthwave-midnight-drive-5: #33A183;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "synthwave-midnight-drive": {
        1: "#4C2A70",
        2: "#924FE8",
        3: "#00C8C8",
        4: "#F0F8FF",
        5: "#33A183",
      }
    }
  }
}

Related searches

dark synthwave color schemeretro cyberpunk palette80s futuristic UI colorsmidnight neon aestheticpurple teal design palette

Palette colors

Hex values

Color 1#4C2A70
·
Color 2#924FE8
·
Color 3#00C8C8
·
Color 4#F0F8FF
·
Color 5#33A183
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
5.4:1AA
10.5:1AAA
3.5:1AA18
2
2.4:1Fail
2.2:1Fail
4.3:1AA18
1.5:1Fail
3
5.4:1AA
2.2:1Fail
1.9:1Fail
1.5:1Fail
4
10.5:1AAA
4.3:1AA18
1.9:1Fail
3:1Fail
5
3.5:1AA18
1.5:1Fail
1.5:1Fail
3:1Fail

Similar palettes

More like Synthwave Midnight Drive

View all vibrant
Retro Future Drive
Retro Sunset Drive
Synthwave Neon Horizon
Synthwave Sunset Drive
Vaporwave Sunset Drive
Arcade Neon Dreams