Back to palettes

Palette

Neon City Rain

Electrifying colors of a futuristic city at night, vibrant reflections dancing on wet streets.

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

#00FF00#FF1493#00BFFF#FFD700#9400D3

Palette guide

How to use Neon City Rain

Overview

The Neon City Rain palette delivers an electrifying and vibrant experience, channeling the dynamic energy of a futuristic urban landscape at night. This collection of intense neon hues, including #00FF00 (lime green), #FF1493 (deep pink), #00BFFF (deep sky blue), #FFD700 (gold), and #9400D3 (dark violet), is perfect for creating high-impact visuals. Without a built-in dark background, it thrives when paired with deep charcoals or true blacks, allowing its brilliant colors to truly pop. Designers can use this palette to evoke a sense of energetic wonder, ideal for projects aiming for a bold, modern, or cyberpunk aesthetic.

Best used for

  • High-energy event branding and promotions
  • Gaming UI and immersive digital experiences
  • Motion graphics and animated sequences
  • Abstract digital art and cyberpunk illustrations
  • Music festival visuals and club aesthetics
  • Fashion and streetwear design accents

Suggested color roles

primary

These colors are best used as vibrant accents against a very dark background (e.g., black or #1A1A1A).

secondary

All colors function as primary accents; consider choosing one dominant neon like #00FF00 or #FF1493 for a specific project focus.

accent

Utilize #00FF00, #FF1493, #00BFFF, #FFD700, and #9400D3 for all interactive elements, highlights, and key visual points.

background

It's recommended to pair this palette with a deep charcoal or pure black background (e.g., #101010) to maximize the luminescence of the neon hues.

text

For main text, use a bright white or very light gray on a dark background. Reserve neon colors like #FFD700 or #00FF00 for headlines, calls-to-action, or important alerts.

Accessibility notes

  • Always ensure these vibrant neon colors are used on very dark backgrounds to meet WCAG contrast guidelines.
  • Avoid using multiple neon colors for essential body text; reserve them for headings or highlights.
  • Be cautious when pairing two highly saturated neons directly against each other, as it can cause visual vibration.
  • Consider providing a non-neon alternative for text on elements that might use these colors to accommodate color blindness.

Recommended combinations

Electric Pair

Dynamic duo on a dark canvas: #FF1493 for primary focus, #00FF00 for secondary, #00BFFF for subtle glow.

#FF1493 · #00FF00 · #00BFFF

Night Glow

Layered effects: #9400D3 for a deep accent, #FFD700 for a bright light source, #FF1493 for a vibrant outline.

#9400D3 · #FFD700 · #FF1493

Future Pulse

Data visualization: #00BFFF as base, #00FF00 for active data, #FFD700 for critical alerts.

#00BFFF · #00FF00 · #FFD700

CSS variables

:root {
  --neon-city-rain-1: #00FF00;
  --neon-city-rain-2: #FF1493;
  --neon-city-rain-3: #00BFFF;
  --neon-city-rain-4: #FFD700;
  --neon-city-rain-5: #9400D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-rain": {
        1: "#00FF00",
        2: "#FF1493",
        3: "#00BFFF",
        4: "#FFD700",
        5: "#9400D3",
      }
    }
  }
}

Related searches

bright cyberpunk paletteelectric neon color schemefuturistic rain aestheticvibrant ui colorscolorful night city design

Palette colors

Hex values

Color 1#00FF00
·
Color 2#FF1493
·
Color 3#00BFFF
·
Color 4#FFD700
·
Color 5#9400D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.7:1Fail
1.5:1Fail
1:1Fail
4.8:1AA
2
2.7:1Fail
1.7:1Fail
2.6:1Fail
1.8:1Fail
3
1.5:1Fail
1.7:1Fail
1.5:1Fail
3.1:1AA18
4
1:1Fail
2.6:1Fail
1.5:1Fail
4.7:1AA
5
4.8:1AA
1.8:1Fail
3.1:1AA18
4.7:1AA

Similar palettes

More like Neon City Rain

View all vibrant
Cyber Glow Spectrum
Cyberpunk Alley Neon
Electric City Neon
Neo Tokyo Pop
Neo Tokyo Rush
Neon City Rain