Palette

Vaporwave Synth Gloom

Electric, futuristic colors glowing with the nostalgic, yet eerie, essence of vaporwave aesthetics.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F3D#300060#A020F0#FF00FF#00FFF0

Palette guide

How to use Vaporwave Synth Gloom

Overview

The Vaporwave Synth Gloom palette delivers electric, futuristic colors glowing with a nostalgic yet eerie essence, perfect for a modern vaporwave aesthetic. Grounded by deep, almost black tones like #0F0F3D and #300060, it introduces striking neons: the vibrant #A020F0, the intense #FF00FF, and the luminous #00FFF0. This collection creates a captivating sense of depth and digital glow, ideal for designers crafting dark-themed interfaces, cyberpunk visuals, or evocative digital art. It perfectly balances the mysterious with the electric, offering a distinct and memorable visual experience that is both retro and cutting-edge.

Best used for

Dark mode website themes
Cyberpunk game environments
Vaporwave digital art and illustrations
Brand identity for tech or gaming
Motion graphics with glowing effects
Event promotions for electronic music

Suggested color roles

primary

Utilize #A020F0 as the primary color for prominent headings, key interactive elements, or focal points to create a vibrant anchor.

secondary

Employ #FF00FF for secondary accents, highlighted text, or graphical overlays, delivering an intense, electric pop.

accent

Reserve #00FFF0 for high-impact accents, small icons, or subtle glow effects, providing a sharp, luminous contrast.

background

Use #0F0F3D as the main background color to establish a deep, atmospheric gloom that makes all neons truly radiate.

text

For body text, use a pure white or very light gray for maximum contrast against the dark background, ensuring optimal legibility.

Accessibility notes

Ensure white or light gray text on #0F0F3D or #300060 meets WCAG AA contrast standards for readability.
Avoid using #FF00FF or #A020F0 for extensive body text; their high saturation can cause visual fatigue.
When using #00FFF0 for highlights, ensure it has enough contrast with its immediate background, especially if it's also bright.
The dark backgrounds provide excellent opportunities for accessible design when paired with light text.

Recommended combinations

Gloom Pop

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

#0F0F3D · #A020F0 · #FF00FF

Cyber Glow

Excellent for gradients or layered elements, blending the dark purple with the luminous cyan and bright purple for a digital glow.

#300060 · #00FFF0 · #A020F0

Neon Pulse

Combine these for dynamic UI components or graphic overlays, where the bright neons stand out against the deep, dark background.

#FF00FF · #00FFF0 · #0F0F3D

CSS variables

:root {
  --vaporwave-synth-gloom-1: #0F0F3D;
  --vaporwave-synth-gloom-2: #300060;
  --vaporwave-synth-gloom-3: #A020F0;
  --vaporwave-synth-gloom-4: #FF00FF;
  --vaporwave-synth-gloom-5: #00FFF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vaporwave-synth-gloom": {
        1: "#0F0F3D",
        2: "#300060",
        3: "#A020F0",
        4: "#FF00FF",
        5: "#00FFF0",
      }
    }
  }
}

Hex values

Color 1#0F0F3D

Color 2#300060

Color 3#A020F0

Color 4#FF00FF

Color 5#00FFF0

Accessibility

Contrast checker

1.1:1Fail

3.4:1AA18

5.8:1AA

14.3:1AAA

1.1:1Fail

3.1:1AA18

5.2:1AA

12.8:1AAA

3.4:1AA18

3.1:1AA18

1.7:1Fail

4.2:1AA18

5.8:1AA

5.2:1AA

1.7:1Fail

2.5:1Fail

14.3:1AAA

12.8:1AAA

4.2:1AA18

2.5:1Fail

Similar palettes

More like Vaporwave Synth Gloom

Electric Synthwave Drive

Neon Dream Sequence

Neon Synthwave Pulse