Palette

Synthwave City Lights

Electric purples, fuchsias, and cyan ignite, bringing to life the glow of a futuristic city at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1D0C42#6C0B57#CE0F7B#F677A0#00F9F5

Palette guide

How to use Synthwave City Lights

Overview

The Synthwave City Lights palette ignites with electric purples, fuchsias, and cyan, bringing to life the glow of a futuristic city at night. Featuring a deep #1D0C42, a mysterious #6C0B57, a vibrant #CE0F7B, a soft #F677A0, and an electrifying #00F9F5, this collection is genuinely useful for designers and developers seeking an energetic, retro-inspired, and cyberpunk aesthetic. These high-contrast colors are excellent for sci-fi interfaces, nightclub branding, or any project needing to convey a sense of nocturnal excitement and digital mystique. It's a versatile mix that promises to create immersive, visually stunning experiences that hark back to the iconic 80s synthwave era.

Best used for

Sci-fi game interfaces and concept art
Nightclub and music festival branding
Futuristic UI/UX design concepts
Retro 80s-themed websites and apps
Cyberpunk fashion and digital media
Virtual event and streaming channel graphics

Suggested color roles

primary

Utilize #1D0C42 as a deep, immersive primary color for backgrounds, main content areas, or structural elements, setting a nocturnal, futuristic stage.

secondary

Employ #CE0F7B for prominent headlines, interactive elements, or key graphic features, demanding attention with its vibrant fuchsia glow.

accent

Introduce #00F9F5 as a striking accent for calls to action, highlights, or data visualizations, providing a stark, electric contrast.

background

The deep #1D0C42 makes an ideal dark, enveloping background, allowing the neon colors to pop and create a sense of infinite depth.

text

Pair with white or a bright shade of #00F9F5 or #CE0F7B for optimal readability on dark backgrounds, achieving that signature synthwave glow.

Accessibility notes

Ensure high contrast for text; always use light text (white or light neon) on the dark #1D0C42 background.
Avoid using vibrant neon colors like #CE0F7B or #00F9F5 for large blocks of body text to prevent eye strain.
Ensure interactive elements have distinct hover/focus states, as the intense colors can sometimes blend without clear feedback.
Be cautious when pairing vibrant colors directly against each other; use #1D0C42 as a separator for better readability.

Recommended combinations

Neon Night

Excellent for creating a dramatic, high-contrast base for hero sections, main navigation, or impactful visual elements.

#1D0C42 · #CE0F7B · #00F9F5

Electric Glow

Perfect for highlighting data, interactive components, or decorative lines that need to convey digital energy and vibrancy.

#00F9F5 · #F677A0 · #6C0B57

Retro Pulse

Use for calls to action, alert messages, or elements that require maximum visibility and an unmistakable retro-futuristic flair.

#1D0C42 · #CE0F7B · #F677A0

CSS variables

:root {
  --synthwave-city-lights-1: #1D0C42;
  --synthwave-city-lights-2: #6C0B57;
  --synthwave-city-lights-3: #CE0F7B;
  --synthwave-city-lights-4: #F677A0;
  --synthwave-city-lights-5: #00F9F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "synthwave-city-lights": {
        1: "#1D0C42",
        2: "#6C0B57",
        3: "#CE0F7B",
        4: "#F677A0",
        5: "#00F9F5",
      }
    }
  }
}

Hex values

Color 1#1D0C42

Color 2#6C0B57

Color 3#CE0F7B

Color 4#F677A0

Color 5#00F9F5

Accessibility

Contrast checker

1.5:1Fail

3.4:1AA18

6.8:1AA

13.4:1AAA

1.5:1Fail

2.2:1Fail

4.4:1AA18

8.7:1AAA

3.4:1AA18

2.2:1Fail

2:1Fail

4:1AA18

6.8:1AA

4.4:1AA18

2:1Fail

13.4:1AAA

8.7:1AAA

4:1AA18

2:1Fail

Similar palettes

More like Synthwave City Lights

Synthwave City Lights

See it in context.

Ready when you are.

Built with Synthwave City Lights.

How to use Synthwave City Lights

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Neon Night

Electric Glow

Retro Pulse

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Synthwave City Lights