Palette

Cyberpunk City Lights

Deep purples and dark blues clash with electric pinks and bright cyan, capturing a futuristic cityscape at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A0D2A#3D1A5C#6A3DAF#FF00FF#00FFFF

Palette guide

How to use Cyberpunk City Lights

Overview

The "Cyberpunk City Lights" palette creates a mesmerizing visual of a futuristic cityscape at night, where deep purples and dark blues clash with electric pinks and bright cyan. This collection features #1A0D2A (very dark purple), #3D1A5C (dark purple), #6A3DAF (medium purple), #FF00FF (magenta), and #00FFFF (cyan). It's an exceptional choice for designers aiming to convey a sense of mystery, technological advancement, and vibrant urban energy. Developers will find these colors highly effective for creating distinct UI elements, atmospheric backgrounds, and captivating visual effects in games or applications. The blend of dark, rich tones with intense neons ensures depth and striking visual pop, making it ideal for immersive and sophisticated digital experiences.

Best used for

Sci-fi game environments and character design
Futuristic app interfaces and dashboards
Digital art and concept illustration
Music video aesthetics and album covers
Event branding for tech conferences or festivals
Dark mode application themes with depth

Suggested color roles

primary

Utilize #00FFFF (Cyan) for main interactive elements, primary branding, or prominent headings to establish a clear focal point.

secondary

Apply #FF00FF (Magenta) for secondary calls to action, important notifications, or vibrant accents that demand attention.

accent

Employ #6A3DAF (Medium Purple) for subtle glows, interactive highlights, or supporting visual elements.

background

Use #1A0D2A (Very Dark Purple) as the foundational background, providing a deep, mysterious canvas for the neon lights.

text

For optimal legibility on dark backgrounds, use white (#FFFFFF) or a very light gray. For headings, #00FFFF or #FF00FF are impactful.

Accessibility notes

Ensure very high contrast between neon colors and #1A0D2A background for all text and interactive elements.
Avoid using #6A3DAF for small body text on darker purple backgrounds; aim for significant luminance difference.
Test combinations for color blindness, especially with the various shades of purple, to ensure distinguishability.
The deep purple background offers visual comfort, but strategic use of bright neons is key to prevent visual fatigue.

Recommended combinations

Deep Cyber

Excellent for creating atmospheric backgrounds, subtle digital glows, or tech interfaces in dark modes.

#00FFFF · #6A3DAF · #1A0D2A

Neon Flare

Ideal for striking call-to-action buttons, energetic data visualizations, or spotlight effects.

#FF00FF · #00FFFF · #3D1A5C

Urban Pulse

Perfect for vibrant gradients, interactive states, or highlighting key features in a futuristic interface.

#6A3DAF · #3D1A5C · #FF00FF

CSS variables

:root {
  --cyberpunk-city-lights-1: #1A0D2A;
  --cyberpunk-city-lights-2: #3D1A5C;
  --cyberpunk-city-lights-3: #6A3DAF;
  --cyberpunk-city-lights-4: #FF00FF;
  --cyberpunk-city-lights-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-city-lights": {
        1: "#1A0D2A",
        2: "#3D1A5C",
        3: "#6A3DAF",
        4: "#FF00FF",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#1A0D2A

Color 2#3D1A5C

Color 3#6A3DAF

Color 4#FF00FF

Color 5#00FFFF

Accessibility

Contrast checker

1.3:1Fail

2.6:1Fail

5.9:1AA

14.8:1AAA

1.3:1Fail

1.9:1Fail

4.5:1AA18

11.2:1AAA

2.6:1Fail

1.9:1Fail

2.3:1Fail

5.8:1AA

5.9:1AA

4.5:1AA18

2.3:1Fail

2.5:1Fail

14.8:1AAA

11.2:1AAA

5.8:1AA

2.5:1Fail

Similar palettes

More like Cyberpunk City Lights

View all vibrant

Cyberpunk City Glow

Cyberpunk Glitch Glow

Cyberpunk Street Haze

Neon Grid Overload

Celestial Aurora Burst

Cyber Glow Graffiti