Palette

Vaporwave Synth Glow

A shocking burst of digital colors, reminiscent of an arcade game from a dystopian future.

VibrantRetro5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#8A2BE2#FF1493#00FF7F

Palette guide

How to use Vaporwave Synth Glow

Overview

The Vaporwave Synth Glow palette is a shocking burst of digital colors, reminiscent of an arcade game from a dystopian future. Featuring intense magentas like #FF00FF and #FF1493, alongside vibrant cyan #00FFFF and electric green #00FF7F, it creates an exhilarating, high-energy visual experience. The grounding violet #8A2BE2 provides a crucial anchor, allowing the brighter neons to truly pop. This collection is perfect for designers seeking to evoke a powerful retro-futuristic, cyberpunk aesthetic, ideal for dynamic interfaces, bold branding, or captivating digital art that demands attention and pulsates with digital energy.

Best used for

Cyberpunk game interfaces and HUDs
Vibrant digital art and illustrations
High-energy event branding
Motion graphics and video game intros
Brand identity for gaming or tech
Interactive web elements with glow effects

Suggested color roles

primary

Utilize #FF00FF as the dominant color for headlines, key interactive elements, or large graphic features to establish a bold, electric presence.

secondary

Employ #00FFFF for supporting visuals, subheadings, or background accents, providing a cool, vibrant contrast to the magenta.

accent

Reserve #00FF7F for high-impact accents, calls-to-action, or small, important icons, injecting a sharp, energetic green pop.

background

Use #8A2BE2 as a deep, atmospheric background color, allowing the brighter neons to radiate and create depth.

text

For body text, use white or a light gray against the #8A2BE2 background, or a dark charcoal for contrast on the brightest neons.

Accessibility notes

Ensure sufficient contrast when pairing #00FF7F with other bright neons; it works best as an accent on darker backgrounds.
The #8A2BE2 background provides good contrast for white or light-colored text, enhancing readability.
Avoid using #FF00FF or #FF1493 for extensive body text due to their high saturation, which can cause visual fatigue.
Test contrast ratios for all text and interactive elements, especially when using multiple bright colors in close proximity.

Recommended combinations

Arcade Glow

Ideal for header sections or game menus, using the purple as a base, magenta for titles, and cyan for interactive elements.

#8A2BE2 · #FF00FF · #00FFFF

Neon Burst

Excellent for graphic overlays or call-out boxes, where the bright pink and green stand out against the deeper purple.

#FF1493 · #00FF7F · #8A2BE2

Digital Pulse

Combine these for dynamic UI components or animated elements, creating a vibrant, pulsating effect.

#FF00FF · #00FF7F · #00FFFF

CSS variables

:root {
  --vaporwave-synth-glow-1: #FF00FF;
  --vaporwave-synth-glow-2: #00FFFF;
  --vaporwave-synth-glow-3: #8A2BE2;
  --vaporwave-synth-glow-4: #FF1493;
  --vaporwave-synth-glow-5: #00FF7F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vaporwave-synth-glow": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#8A2BE2",
        4: "#FF1493",
        5: "#00FF7F",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#8A2BE2

Color 4#FF1493

Color 5#00FF7F

Accessibility

Contrast checker

2.5:1Fail

1.9:1Fail

1.2:1Fail

2.3:1Fail

2.5:1Fail

4.8:1AA

2.9:1Fail

1.1:1Fail

1.9:1Fail

4.8:1AA

1.6:1Fail

4.4:1AA18