Palette

Synthwave Neon Glow

Pulsating neons against a deep twilight backdrop, capturing the electric, futuristic energy of the 80s synthwave era.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Synthwave Neon 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 Synthwave Neon Glow.

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

Data visualization

#000033#FF00FF#00FFFF#8A2BE2#FFD700

Palette guide

How to use Synthwave Neon Glow

Overview

The "Synthwave Neon Glow" palette plunges into the heart of 80s cyberpunk, offering a powerful contrast between a deep, inky backdrop and explosive neon accents. Dominated by the profound #000033 (dark navy), it sets the stage for the electric vibrancy of #FF00FF (magenta), #00FFFF (cyan), and #8A2BE2 (electric violet). The addition of #FFD700 (gold) introduces a metallic, arcade-like gleam. This collection provides designers and developers with the perfect hex codes to craft high-energy UIs, dramatic game assets, or captivating branding that screams retro-futurism and vibrant digital landscapes, ensuring every element pops with intensity.

Best used for

Cyberpunk video game interfaces and environments
Dark mode applications requiring vibrant accents
Motion graphics and animated intros for tech content
Branding for nightclubs, music festivals, or esports
Digital art and illustrations with a strong neon focus
Website hero sections that demand immediate attention

Suggested color roles

primary

#000033 serves as the foundational, almost black, background, providing maximum contrast for the radiant neon colors.

secondary

#8A2BE2 (electric violet) offers a deeper, vibrant color for secondary panels, large text, or atmospheric gradients.

accent

#FF00FF (magenta) and #00FFFF (cyan) are ideal for creating powerful, glowing accents, interactive elements, or key visual highlights.

background

#000033 is the ultimate choice for a dark, immersive background, allowing all the neon elements to truly pop and command attention.

text

#FFD700 (gold) provides excellent readability and a distinct metallic feel against #000033, suitable for headers and important information, while #00FFFF works well for body text.

Accessibility notes

#FFD700 on #000033 offers strong contrast for text, meeting WCAG AA standards for most sizes.
Be cautious with #FF00FF or #00FFFF for small text on dark backgrounds; ensure large enough font sizes or check contrast ratios.
Avoid using multiple neon colors in close proximity for critical information, as their intensity can cause visual fatigue.
Ensure interactive elements have distinct hover/focus states, as some bright colors like #FF00FF and #8A2BE2 might have similar luminance.

Recommended combinations

Cyberpunk Core

The quintessential dark mode with vibrant highlights, using #000033 as base, #FF00FF for primary accents, and #00FFFF for secondary glows.

#000033 · #FF00FF · #00FFFF

Electric Grid

For dynamic headers or graphical elements, with #8A2BE2 creating a vibrant field, #FFD700 as a striking accent, and #000033 for depth.

#8A2BE2 · #FFD700 · #000033

Neon Burst

A high-energy combination for calls-to-action or animated effects, layering magenta, cyan, and gold for maximum visual impact.

#FF00FF · #00FFFF · #FFD700

CSS variables

:root {
  --synthwave-neon-glow-1: #000033;
  --synthwave-neon-glow-2: #FF00FF;
  --synthwave-neon-glow-3: #00FFFF;
  --synthwave-neon-glow-4: #8A2BE2;
  --synthwave-neon-glow-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "synthwave-neon-glow": {
        1: "#000033",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#8A2BE2",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#000033

Color 2#FF00FF

Color 3#00FFFF

Color 4#8A2BE2

Color 5#FFD700

Accessibility

Contrast checker

6.4:1AA

16:1AAA

3.4:1AA18

14.3:1AAA

6.4:1AA

2.5:1Fail

1.9:1Fail

2.2:1Fail

16:1AAA

2.5:1Fail

4.8:1AA

1.1:1Fail

3.4:1AA18

1.9:1Fail

4.8:1AA

4.2:1AA18

14.3:1AAA

2.2:1Fail

1.1:1Fail

4.2:1AA18

Similar palettes

More like Synthwave Neon Glow

View all vibrant

Synthwave City Lights

Vaporwave Synth Night

Cyberpunk Electric Surge

Electric City Neon

Electro Arcade Surge

Neon City Glow