Palette

Synthwave City Pop

A vibrant blast from the past, combining electric neons with deep purples for a city glow.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#8A2BE2#FF00FF#00FFFF#FFFF00

Palette guide

How to use Synthwave City Pop

Overview

The Synthwave City Pop palette is a vibrant blast from the past, perfectly capturing the electric glow of an 80s metropolis. This scheme combines deep, mysterious black (#000000) with electrifying neons like the vivid fuchsia of #FF00FF, the bright cyan of #00FFFF, and the intense yellow of #FFFF00. A rich violet, #8A2BE2, grounds the palette, adding depth to the energetic pops of color. Ideal for designers and developers aiming for a retro-futuristic aesthetic, this palette evokes nostalgia while remaining undeniably bold and modern. It's a dynamic choice for projects requiring high energy and a distinctive visual identity.

Best used for

Retro-themed video game interfaces and assets
80s inspired music album covers and promotional materials
Vibrant event posters and digital advertisements
Cyberpunk or vaporwave aesthetic branding
Dynamic web design and mobile app themes
Animated short films and motion graphics

Suggested color roles

primary

Use #8A2BE2 as a foundational, atmospheric purple, providing depth and a mystical undertone for large areas or key elements.

secondary

Employ #FF00FF to introduce energetic contrast and a strong pop of color, ideal for primary calls to action or prominent graphic elements.

accent

Leverage #00FFFF for electric highlights, glowing effects, or secondary interactive elements, offering a cool, crisp contrast.

background

Utilize #000000 as the primary background color to make the vibrant neons truly pop, creating a stark, dramatic canvas.

text

Apply #FFFF00 for bright, highly visible text on dark backgrounds, or use a clean white or near-white for general body copy to ensure readability.

Accessibility notes

Ensure #FFFF00 and #00FFFF have sufficient contrast against #000000 for text and interactive elements (WCAG AA).
Avoid placing #FF00FF directly on #8A2BE2 for small text due to potential low contrast issues.
For critical information, consider using larger font sizes or bolder weights with neon colors to enhance readability.
Test all text and background color combinations using a contrast checker to meet accessibility standards.

Recommended combinations

City Night Glow

A classic synthwave base: deep black with a rich purple foundation and a vibrant pink accent for energetic pop.

#000000 · #8A2BE2 · #FF00FF

Electric Sunset

Maximal neon impact, ideal for bold headlines, graphic overlays, or striking visual effects.

#FF00FF · #FFFF00 · #00FFFF

Retro Grid

High-contrast, glowing lines and text on a dark canvas, perfect for digital interfaces or game elements.

#000000 · #00FFFF · #FFFF00

CSS variables

:root {
  --synthwave-city-pop-1: #000000;
  --synthwave-city-pop-2: #8A2BE2;
  --synthwave-city-pop-3: #FF00FF;
  --synthwave-city-pop-4: #00FFFF;
  --synthwave-city-pop-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "synthwave-city-pop": {
        1: "#000000",
        2: "#8A2BE2",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#8A2BE2

Color 3#FF00FF

Color 4#00FFFF

Color 5#FFFF00

Accessibility

Contrast checker

3.5:1AA18

6.7:1AA

16.7:1AAA

19.6:1AAA

3.5:1AA18

1.9:1Fail

4.8:1AA

5.5:1AA

6.7:1AA

1.9:1Fail

2.5:1Fail

2.9:1Fail

16.7:1AAA

4.8:1AA

2.5:1Fail

1.2:1Fail

19.6:1AAA

5.5:1AA

2.9:1Fail

1.2:1Fail

Similar palettes

More like Synthwave City Pop