Palette

Vaporwave Synth Night

Electrifying neons and deep purples ignite the senses, reflecting a vibrant, futuristic city at dusk.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vaporwave Synth 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 Vaporwave Synth Night.

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

Data visualization

#C700D4#7E00DE#00FFC2#00D5FF#2C1F5C

Palette guide

How to use Vaporwave Synth Night

Overview

The Vaporwave Synth Night palette ignites the senses with electrifying neons and deep purples, reflecting a vibrant, futuristic city at dusk. Anchored by the profound #2C1F5C, it bursts with the intense magenta #C700D4 and the rich #7E00DE. Complementing these are the luminous #00FFC2 and the bright #00D5FF, creating a dynamic interplay of warm and cool neons. This collection is perfect for designers crafting evocative cyberpunk landscapes, high-energy brand identities, or captivating digital experiences that require a balance of depth and brilliant, electric highlights, truly bringing a digital night to life.

Best used for

Cyberpunk cityscapes and game environments
High-energy electronic music visuals
Dark-themed website interfaces
Brand identity for nightlife or tech
Motion graphics with glowing elements
Vibrant app designs and onboarding

Suggested color roles

primary

Utilize #C700D4 as the dominant color for headlines, key interactive elements, or focal points to establish a bold, electric presence.

secondary

Employ #00FFC2 for supporting visuals, subheadings, or background accents, providing a sharp, refreshing contrast.

accent

Reserve #00D5FF for high-impact accents, calls-to-action, or small, important icons, injecting a bright, cool blue pop.

background

Use #2C1F5C as the deep, atmospheric background color, allowing the brighter neons to radiate and create depth.

text

For body text, use a crisp white or very light gray for optimal legibility against the dark #2C1F5C background or other deep elements.

Accessibility notes

Ensure high contrast for white or light gray text on #2C1F5C to meet WCAG AA standards.
Avoid using #C700D4 or #7E00DE for extensive body text due to their high saturation, which can cause visual fatigue.
When using #00FFC2 for highlights, ensure it has enough contrast with its immediate background, especially if it's also bright.
Test contrast ratios for all text and interactive elements, particularly when using multiple bright colors in close proximity.

Recommended combinations

City Dusk

Ideal for hero sections, using the deep blue as a base, magenta for titles, and bright blue for striking accents.

#2C1F5C · #C700D4 · #00D5FF

Neon Flux

Excellent for gradients or layered graphic elements, blending purple, teal, and magenta for a dynamic, flowing effect.

#7E00DE · #00FFC2 · #C700D4

Synth Grid

Combine these for UI components or background patterns that evoke a glowing digital grid against a dark, nocturnal setting.

#2C1F5C · #00FFC2 · #00D5FF

CSS variables

:root {
  --vaporwave-synth-night-1: #C700D4;
  --vaporwave-synth-night-2: #7E00DE;
  --vaporwave-synth-night-3: #00FFC2;
  --vaporwave-synth-night-4: #00D5FF;
  --vaporwave-synth-night-5: #2C1F5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vaporwave-synth-night": {
        1: "#C700D4",
        2: "#7E00DE",
        3: "#00FFC2",
        4: "#00D5FF",
        5: "#2C1F5C",
      }
    }
  }
}

Hex values

Color 1#C700D4

Color 2#7E00DE

Color 3#00FFC2

Color 4#00D5FF

Color 5#2C1F5C

Accessibility

Contrast checker

1.5:1Fail

3.7:1AA18

2.7:1Fail

3:1AA18

1.5:1Fail

5.5:1AA

4.1:1AA18

2:1Fail

3.7:1AA18

5.5:1AA

1.3:1Fail

11:1AAA

2.7:1Fail

4.1:1AA18

1.3:1Fail

8.2:1AAA

3:1AA18

2:1Fail

11:1AAA

8.2:1AAA

Similar palettes

More like Vaporwave Synth Night

View all vibrant

Electro Arcade Surge

Neon Synthwave Wave

Synthwave Cyber Glitch

Synthwave Grid Glow

Synthwave Neon Glow

City Neon Jungle