Palette

Synthwave Cyber Neon

A dazzling journey into a futuristic metropolis, with electric neon hues illuminating digital nights.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#FF0077#77FFFF#330033

Palette guide

How to use Synthwave Cyber Neon

Overview

The Synthwave Cyber Neon palette offers a dazzling journey into a futuristic metropolis, where electric neon hues illuminate digital nights. This scheme features the intense #FF00FF magenta, a brilliant #00FFFF cyan, and a punchy #FF0077 pink, all harmonized with a lighter #77FFFF blue. A very deep purple, #330033, serves as the grounding force, providing a rich, mysterious backdrop that makes the neons truly pop. Ideal for designers and developers crafting immersive digital experiences, this palette captures the energetic and sleek essence of cyberpunk aesthetics combined with classic 80s synthwave allure. It's a bold statement for any project.

Best used for

Electronic music visuals and album artwork
Tech event branding and promotional materials
Interactive digital experiences and game interfaces
Streetwear and edgy fashion design
Gaming peripherals and hardware aesthetics
Virtual reality and augmented reality interfaces

Suggested color roles

primary

Utilize #330033 as a deep, mysterious purple-black base, providing a stable yet atmospheric foundation for designs.

secondary

Employ #FF00FF as the dominant neon, perfect for energetic calls to action, prominent logos, or striking graphic elements.

accent

Leverage #00FFFF for electric blue highlights, digital glow effects, or secondary interactive components, offering a crisp, cool contrast.

background

Apply #330033 as the primary background color, creating a dark, rich canvas that amplifies the luminosity of the neon elements.

text

Use #77FFFF for light, vibrant text on dark backgrounds, or opt for a clean white or light gray for general body copy to ensure optimal readability.

Accessibility notes

Ensure #77FFFF and #FF0077 have sufficient contrast against #330033 for all text and UI elements (WCAG AA).
Avoid placing #FF00FF directly on #00FFFF for text, as the low color difference can hinder readability.
For smaller text, consider using a contrasting neutral like white or charcoal to maintain legibility.
Always use a contrast checker to validate combinations, especially for interactive components and critical information.

Recommended combinations

Night Grid

A dark, immersive backdrop with vibrant magenta and electric cyan for key elements and glowing lines.

#330033 · #FF00FF · #00FFFF

Neon Pulse

Energetic pink and cool blue accents on a dark purple base, perfect for dynamic highlights or data visualization.

#FF0077 · #77FFFF · #330033

Digital Layers

Layered neon effect, combining the brightest hues for striking overlays, gradients, or artistic compositions.

#00FFFF · #FF00FF · #77FFFF

CSS variables

:root {
  --synthwave-cyber-neon-1: #FF00FF;
  --synthwave-cyber-neon-2: #00FFFF;
  --synthwave-cyber-neon-3: #FF0077;
  --synthwave-cyber-neon-4: #77FFFF;
  --synthwave-cyber-neon-5: #330033;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "synthwave-cyber-neon": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FF0077",
        4: "#77FFFF",
        5: "#330033",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FF0077

Color 4#77FFFF

Color 5#330033

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

2.6:1Fail

5.6:1AA

2.5:1Fail

3:1AA18

1:1Fail

14.1:1AAA

1.2:1Fail

3:1AA18

3.2:1AA18

4.6:1AA

2.6:1Fail

1:1Fail

3.2:1AA18

14.8:1AAA

5.6:1AA

14.1:1AAA

4.6:1AA

14.8:1AAA

Similar palettes

More like Synthwave Cyber Neon