Back to palettes

Palette

Cyberpunk Synthwave City

Electric neon brights against deep, dark purples evoke the pulsating, futuristic aesthetic of a cyberpunk city at night.

Vibrantenergetic5 colors
More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyberpunk Synthwave City 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 Cyberpunk Synthwave City.

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

Data visualization

#FF00FF#00FFFF#00FF00#FFD700#330066

Palette guide

How to use Cyberpunk Synthwave City

Overview

The Cyberpunk Synthwave City palette is an electrifying fusion of intense neons and a deep, mysterious dark purple, embodying the pulsating energy of a retro-futuristic metropolis. It showcases vivid magenta (#FF00FF), brilliant cyan (#00FFFF), luminous green (#00FF00), and glowing gold (#FFD700), all set against a rich, dark indigo-purple (#330066). This palette is perfect for designers and developers aiming to create immersive gaming environments, dynamic digital interfaces, or compelling branding that evokes a nostalgic yet cutting-edge synthwave aesthetic.

Best used for

  • Synthwave and retro-futuristic designs
  • Gaming UI and visual effects
  • Music album art and event promotions
  • Motion graphics and animated logos
  • Dark mode applications with vibrant accents
  • Sci-fi themed digital illustrations

Suggested color roles

primary

#FF00FF (Magenta) for primary calls to action or hero elements, providing a strong visual anchor.

secondary

#00FFFF (Cyan) can highlight secondary information or interactive components, offering a cool, digital contrast.

accent

#FFD700 (Gold) for alerts, important notifications, or subtle glowing details.

background

#330066 (Dark Indigo-Purple) provides a deep, atmospheric backdrop that makes the neons pop intensely.

text

White (#FFFFFF) or a very light grey is essential for body text to ensure readability against the dark background.

Accessibility notes

  • Ensure all neon text colors, especially #00FF00 and #FFD700, have sufficient contrast against #330066.
  • Avoid using color as the sole indicator for interactive states or important information; use icons or text.
  • Be mindful of potential color confusion for colorblind users when differentiating between #FF00FF and #00FFFF.
  • Test legibility of text and UI elements on various screen types and brightness settings.

Recommended combinations

Neon Grid

Ideal for dark mode interfaces, creating a striking and energetic visual appeal.

#330066 · #FF00FF · #00FFFF

Synth Glow

Excellent for progress bars, loading animations, or dynamic highlights in a futuristic UI.

#00FF00 · #FFD700 · #FF00FF

Cyber Drive

Use for layered graphical elements, data visualizations, or abstract background patterns.

#00FFFF · #FFD700 · #330066

CSS variables

:root {
  --cyberpunk-synthwave-city-1: #FF00FF;
  --cyberpunk-synthwave-city-2: #00FFFF;
  --cyberpunk-synthwave-city-3: #00FF00;
  --cyberpunk-synthwave-city-4: #FFD700;
  --cyberpunk-synthwave-city-5: #330066;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-synthwave-city": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#00FF00",
        4: "#FFD700",
        5: "#330066",
      }
    }
  }
}

Related searches

synthwave color palettecyberpunk neon darkretro futuristic colorsvibrant purple neon themegaming ui color scheme

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#00FF00
·
Color 4#FFD700
·
Color 5#330066
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.3:1Fail
2.2:1Fail
5:1AA
2
2.5:1Fail
1.1:1Fail
1.1:1Fail
12.6:1AAA
3
2.3:1Fail
1.1:1Fail
1:1Fail
11.5:1AAA
4
2.2:1Fail
1.1:1Fail
1:1Fail
11.2:1AAA
5
5:1AA
12.6:1AAA
11.5:1AAA
11.2:1AAA

Similar palettes

More like Cyberpunk Synthwave City

View all Vibrant
Neon Future Circuit
Electric Cyber Wave
Electric Funfair Lights
Cybernetic Vista Glow
Glitch System Interface
Street Art Canvas