Palette

Neon Synthwave Pulse

Bold, electrifying hues, perfect for a high-speed cruise through a neon-lit retro future.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#FFD700#8A2BE2#483D8B

Palette guide

How to use Neon Synthwave Pulse

Overview

The Neon Synthwave Pulse palette is a vibrant homage to the 80s retro-futuristic aesthetic, perfect for designs that need to pulse with electric energy. It combines the classic synthwave pairing of #FF00FF (Magenta) and #00FFFF (Cyan) with the striking #FFD700 (Gold) for a touch of digital shimmer. The deeper, more subdued #8A2BE2 (Blue Violet) and #483D8B (Dark Slate Blue) provide essential grounding, allowing the brighter neons to truly pop. This palette is invaluable for designers creating evocative interfaces, album art, or branding that captures the essence of a high-speed cruise through a neon-lit retro future.

Best used for

Synthwave music production branding
Retro gaming UI and assets
80s themed event graphics
Sci-fi digital art and illustrations
Motion graphics and animated logos
Cyberpunk aesthetic websites

Suggested color roles

primary

Use #FF00FF (Magenta) for dominant headings, calls-to-action, or key graphic elements to establish a bold, energetic presence.

secondary

Employ #00FFFF (Cyan) for secondary navigation, background accents, or supporting visual information.

accent

Leverage #FFD700 (Gold) for glowing highlights, interactive states, or subtle digital glints that catch the eye.

background

The deep #483D8B (Dark Slate Blue) or #8A2BE2 (Blue Violet) provide excellent, moody backgrounds that make neons shine.

text

For body text, a clean white or light gray works best. For headlines or interactive text, #FFD700 or #00FFFF can be highly effective against dark backgrounds.

Accessibility notes

Ensure high contrast for text, especially when pairing #FFD700 with other vibrant colors.
Use darker background colors like #483D8B to ensure the bright neons are legible and accessible.
Avoid using #FFD700 for small text on light backgrounds due to potential readability issues.
Test color combinations for potential visual vibration when highly saturated colors are placed side-by-side.

Recommended combinations

Retro Neon Glow

Ideal for creating dynamic gradients, futuristic UI elements, or vibrant headers.

#FF00FF · #00FFFF · #FFD700

Synthwave Depth

Perfect for deep, atmospheric backgrounds with glowing accents or text.

#483D8B · #8A2BE2 · #FF00FF

Electric Contrast

Use for striking logos, data visualizations, or focal points against a dark, rich backdrop.

#00FFFF · #FFD700 · #483D8B

CSS variables

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

Tailwind config

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

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFD700

Color 4#8A2BE2

Color 5#483D8B

Accessibility

Contrast checker

2.5:1Fail

2.2:1Fail

1.9:1Fail

2.9:1Fail

2.5:1Fail

1.1:1Fail

4.8:1AA

7.2:1AAA

2.2:1Fail

1.1:1Fail

4.2:1AA18

6.5:1AA

1.9:1Fail

4.8:1AA

4.2:1AA18

1.5:1Fail

2.9:1Fail

7.2:1AAA

6.5:1AA

1.5:1Fail

Similar palettes

More like Neon Synthwave Pulse

View all vibrant

Synthwave Sun Beam

80s Arcade Glow

Electric Synthwave Drive

Neon Dream Sequence

Neon Vapor Wave

Retro Glow Grid