Palette

Cyberpunk City Rain

Gloomy blacks pierced by shocking purples, greens, and blues, like a rainy cyberpunk night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#8A2BE2#4BE84E#FFD700#00FFFF

Palette guide

How to use Cyberpunk City Rain

Overview

The "Cyberpunk City Rain" palette evokes gloomy blacks pierced by shocking purples, greens, and blues, perfectly capturing a rainy cyberpunk night. This collection centers around #000000 (pure black), contrasted sharply with #8A2BE2 (blue violet), #4BE84E (bright green), #FFD700 (gold), and #00FFFF (cyan). It's an exceptional choice for designers aiming to convey a sense of mystery, urban grit, and high-tech drama. Developers will find these colors highly effective for creating distinct UI elements, urgent notifications, and captivating visual effects in games or applications. The intense contrast ensures that key elements pop, making this palette ideal for interfaces that demand attention and a compelling, immersive user experience.

Best used for

Dystopian game environments and character design
Noir-themed app interfaces and dashboards
Digital art and graphic novels with a dark mood
Sci-fi cinematic concept art
Urban exploration game branding
Music album covers for electronic genres

Suggested color roles

primary

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

secondary

Apply #8A2BE2 (Blue Violet) for secondary calls to action, important notifications, or vibrant accents that add depth.

accent

Employ #FFD700 (Gold) for energetic highlights, warning indicators, or elements needing a sharp, luxurious pop.

background

Use #000000 (Pure Black) as the dominant background, providing a deep, shadowy canvas for the neon lights.

text

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

Accessibility notes

Ensure very high contrast between neon colors and #000000 background for all text and interactive elements.
Avoid using #4BE84E or #FFD700 for small body text; they are best reserved for larger headings or accents.
Test color combinations for color blindness, especially with #4BE84E (green) and #FFD700 (gold).
The dark background helps visual comfort, but strategic use of bright neons is key to prevent visual fatigue.

Recommended combinations

Rain Slick

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

#00FFFF · #8A2BE2 · #000000

Electric Storm

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

#4BE84E · #FFD700 · #000000

Urban Glitch

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

#8A2BE2 · #00FFFF · #4BE84E

CSS variables

:root {
  --cyberpunk-city-rain-1: #000000;
  --cyberpunk-city-rain-2: #8A2BE2;
  --cyberpunk-city-rain-3: #4BE84E;
  --cyberpunk-city-rain-4: #FFD700;
  --cyberpunk-city-rain-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-city-rain": {
        1: "#000000",
        2: "#8A2BE2",
        3: "#4BE84E",
        4: "#FFD700",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#8A2BE2

Color 3#4BE84E

Color 4#FFD700

Color 5#00FFFF

Accessibility

Contrast checker

3.5:1AA18

13:1AAA

15:1AAA

16.7:1AAA

3.5:1AA18

3.7:1AA18

4.2:1AA18

4.8:1AA

13:1AAA

3.7:1AA18

1.2:1Fail

1.3:1Fail

15:1AAA

4.2:1AA18

1.2:1Fail

1.1:1Fail

16.7:1AAA

4.8:1AA

1.3:1Fail

1.1:1Fail

Similar palettes

More like Cyberpunk City Rain

City Puddle Reflection

Cosmic Void Enigma