Palette

Neon City Rain

Blinding neons pierce through dark, electric purples, a cyberpunk cityscape under digital rain.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#8A2BE2#32CD32#FF4500

Palette guide

How to use Neon City Rain

Overview

The Neon City Rain palette features blinding neons piercing through dark, electric purples, capturing a cyberpunk cityscape under digital rain. With #00FFFF (cyan), #FF00FF (magenta), #8A2BE2 (blue-violet), #32CD32 (lime green), and #FF4500 (orange-red), this palette is intensely atmospheric and energetic. Designers and developers can leverage these vivid contrasts to create immersive cyberpunk game UIs, sci-fi art, or dynamic digital event promotion materials. It's an excellent choice for projects demanding a bold, futuristic, and visually striking aesthetic that evokes mystery and high-tech glow, ensuring a compelling user experience.

Best used for

Cyberpunk game interfaces and environments
Sci-fi themed digital art and illustrations
Digital event promotion and concert visuals
Tech startup branding with an edgy aesthetic
Interactive experiences and virtual reality interfaces
Fashion and lifestyle brands with a futuristic theme

Suggested color roles

primary

Use #8A2BE2 (Blue-Violet) as the deep, mysterious base color for large sections or primary backgrounds, setting an atmospheric tone.

secondary

Employ #00FFFF (Cyan) for bright, cool digital accents, secondary navigation, or as a striking glow effect, reminiscent of rain.

accent

Apply #FF4500 (Orange-Red) for fiery, high-impact highlights, crucial call-to-action buttons, or urgent alerts.

background

Utilize #8A2BE2 (Blue-Violet) as a darker, atmospheric background, or pair with black/dark gray for even deeper contrast.

text

For headlines, #00FFFF (Cyan) or #32CD32 (Lime Green) offer excellent visibility. For body text, white or a light gray ensures readability on dark backgrounds.

Accessibility notes

Ensure all neon colors have high contrast against #8A2BE2 or a dark background; most will meet WCAG AA standards.
Avoid using #32CD32 (Lime Green) and #FF4500 (Orange-Red) for small, critical text due to potential contrast issues or for colorblind users.
For long-form content, use a neutral light color like white or light gray on dark backgrounds for optimal readability.
Be mindful of the contrast between #00FFFF and #32CD32 if used near each other, as their distinction might be difficult for some users.

Recommended combinations

Rainy Glow Interface

Ideal for main UI layouts, atmospheric backgrounds, and primary interactive components in a dark, glowing design.

#8A2BE2 · #00FFFF · #FF00FF

Digital Accent

Perfect for interactive elements, data visualization, and dynamic progress indicators that need to pop.

#32CD32 · #FF4500 · #8A2BE2

Electric Contrast

Excellent for striking headers, vibrant graphic overlays, or hero sections that demand immediate attention and energy.

#FF00FF · #00FFFF · #FF4500

CSS variables

:root {
  --neon-city-rain-2-1: #00FFFF;
  --neon-city-rain-2-2: #FF00FF;
  --neon-city-rain-2-3: #8A2BE2;
  --neon-city-rain-2-4: #32CD32;
  --neon-city-rain-2-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-rain-2": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#8A2BE2",
        4: "#32CD32",
        5: "#FF4500",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#8A2BE2

Color 4#32CD32

Color 5#FF4500

Accessibility

Contrast checker

2.5:1Fail

4.8:1AA

1.7:1Fail

2.7:1Fail

2.5:1Fail

1.9:1Fail

1.5:1Fail

1.1:1Fail

4.8:1AA

1.9:1Fail

2.8:1Fail

1.7:1Fail

1.5:1Fail

2.8:1Fail

1.6:1Fail

2.7:1Fail

1.1:1Fail

1.7:1Fail

1.6:1Fail

Similar palettes

More like Neon City Rain

Neon City Rain

See it in context.

Ready when you are.

Built with Neon City Rain.

How to use Neon City Rain

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Rainy Glow Interface

Digital Accent

Electric Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Neon City Rain