Palette

Neon Rain City

Electrifying and vivid, inspired by the intense, glowing lights of a futuristic city reflecting on wet streets at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#FFFF00#00FF00#0000FF

Palette guide

How to use Neon Rain City

Overview

The "Neon Rain City" palette is electrifying and vivid, inspired by the intense, glowing lights of a futuristic city reflecting on wet streets at night. It features #00FFFF (electric cyan), #FF00FF (vibrant magenta), #FFFF00 (bright yellow), #00FF00 (luminous green), and #0000FF (deep electric blue). This palette is a powerhouse for designers and developers creating cyberpunk aesthetics, urban digital art, or any project that demands a sense of artificial light and dynamic reflections. The high saturation and luminosity of these colors against a dark backdrop create a truly immersive and energetic visual narrative, capturing the essence of a bustling, rain-slicked metropolis.

Best used for

Cyberpunk game environments and character design
Digital art and futuristic cityscapes
Film title sequences and motion graphics
Tech product showcases and advertising
Urban fashion branding and editorial
Interactive installations with light effects

Suggested color roles

primary

Utilize #00FFFF as the dominant electric cyan, setting the cool, artificial tone and evoking the reflective surfaces of a rainy city.

secondary

Employ #FF00FF for vibrant magenta accents and #0000FF for deep electric blue elements, adding depth and dynamic contrast.

accent

Apply #FFFF00 for the brightest highlights and #00FF00 for luminous green glows, drawing attention and simulating city lights.

background

A deep black or very dark charcoal is essential as a background to make these luminous colors pop and simulate the dark, wet streets.

text

For headings and crucial information, use #FFFF00 or #00FFFF against a dark background for excellent readability. For body text, a crisp white or light grey works well.

Accessibility notes

Ensure very high contrast for all text against a dark background (WCAG AA minimum), especially with #0000FF.
Avoid using #00FF00 and #FF00FF directly adjacent for critical information due to potential color vision deficiency issues.
Consider using larger font sizes and increased letter spacing for text in these luminous colors to improve readability.
The intense brightness can cause eye strain; use these colors judiciously for large blocks or interactive elements.

Recommended combinations

City Reflections

Ideal for main UI components or backgrounds, capturing the core urban neon feel with a blend of cool and vibrant electric hues.

#00FFFF · #FF00FF · #0000FF

Electric Glow

Excellent for creating luminous effects, interactive states, or energy indicators, simulating the brightest artificial lights of a city.

#FFFF00 · #00FF00 · #00FFFF

Deep City

Use this for atmospheric backgrounds, layered graphics, or elements requiring intense depth and a mysterious, rain-soaked urban ambiance.

#0000FF · #FF00FF · #00FFFF

CSS variables

:root {
  --neon-rain-city-1: #00FFFF;
  --neon-rain-city-2: #FF00FF;
  --neon-rain-city-3: #FFFF00;
  --neon-rain-city-4: #00FF00;
  --neon-rain-city-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-rain-city": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#00FF00",
        5: "#0000FF",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#00FF00

Color 5#0000FF

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.1:1Fail

6.9:1AA

2.5:1Fail

2.9:1Fail

2.3:1Fail

2.7:1Fail

1.2:1Fail

2.9:1Fail

1.3:1Fail

8:1AAA

1.1:1Fail

2.3:1Fail

1.3:1Fail

6.3:1AA

6.9:1AA

2.7:1Fail

8:1AAA

6.3:1AA

Similar palettes

More like Neon Rain City

Cybernetic Spectrum Surge