Palette

City Neon Rain

Blurry electric lights on a dark, rainy urban night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#8A2BE2#FF1493#ADFF2F#191970

Palette guide

How to use City Neon Rain

Overview

The "City Neon Rain" palette captures the blurry electric lights on a dark, rainy urban night with a vibrant and energetic mix of neon tones. Featuring dazzling #00FFFF (cyan), rich #8A2BE2 (blue violet), intense #FF1493 (deep pink), and lively #ADFF2F (chartreuse), all grounded by a deep #191970 (midnight blue), this palette is designed for high impact. Designers can leverage these vivid colors to create dynamic interfaces, eye-catching branding, and digital experiences that pulse with artificial light and energy. Developers will find these hex codes perfect for implementing glow effects, interactive highlights, and visually stunning UI elements, ideal for entertainment, gaming, or futuristic digital art projects.

Best used for

Cyberpunk game environments
Electronic music event branding
Futuristic UI/UX designs
Vibrant digital art showcases
Nightclub promotional materials
Dynamic streaming platform themes

Suggested color roles

primary

#00FFFF - A brilliant cyan, excellent for main calls-to-action, primary headlines, or key brand elements that need to radiate.

secondary

#8A2BE2 - A rich blue violet, perfect for supporting interactive elements, subheadings, or as a sophisticated contrasting color.

accent

#FF1493 - An intense deep pink, ideal for drawing immediate attention to alerts, notifications, or as a powerful visual accent.

background

#191970 - A deep, dark midnight blue, serving as the perfect shadowed canvas for the neon colors to intensely glow and reflect.

text

White or #ADFF2F - Use white for primary body text against #191970 for maximum readability. #ADFF2F can be used for highlighted text or important informational elements.

Accessibility notes

Ensure significant contrast between neon colors and #191970 for all text and interactive elements.
Avoid using multiple bright neon colors for extensive blocks of text to prevent eye strain.
Provide clear non-color-based indicators (e.g., icons) for interactive states to aid users with color vision deficiencies.
Use a true black or charcoal for critical legal or warning text if the palette's darker shades don't provide sufficient contrast.

Recommended combinations

Neon City Glow

Ideal for creating striking dark mode interfaces, evoking a vibrant, rainy city night mood.

#191970 · #00FFFF · #FF1493

Electric Pulse

Perfect for drawing attention to specific features, dynamic content, or interactive elements with a lively feel.

#191970 · #8A2BE2 · #ADFF2F

Urban Radiance

Great for creating energetic visual branding, impactful web banners, or game UI elements that need to stand out.

#00FFFF · #FF1493 · #ADFF2F

CSS variables

:root {
  --city-neon-rain-1: #00FFFF;
  --city-neon-rain-2: #8A2BE2;
  --city-neon-rain-3: #FF1493;
  --city-neon-rain-4: #ADFF2F;
  --city-neon-rain-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-neon-rain": {
        1: "#00FFFF",
        2: "#8A2BE2",
        3: "#FF1493",
        4: "#ADFF2F",
        5: "#191970",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#8A2BE2

Color 3#FF1493

Color 4#ADFF2F

Color 5#191970

Accessibility

Contrast checker

4.8:1AA

2.9:1Fail

1:1Fail

11.8:1AAA

4.8:1AA

1.6:1Fail

4.9:1AA

2.5:1Fail

2.9:1Fail

1.6:1Fail

3:1Fail

4.1:1AA18

1:1Fail

4.9:1AA

3:1Fail

12.1:1AAA

11.8:1AAA

2.5:1Fail

4.1:1AA18

12.1:1AAA

Similar palettes

More like City Neon Rain

Cybernetic Voltage Surge

Electric City Night