Back to palettes

Palette

Neon City Rain

Electric hues brilliantly reflect off wet city streets, capturing the dynamic and futuristic glow of a rainy neon cityscape.

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

#FF0066#00FFFF#FFD700#2B2B2B#666666

Palette guide

How to use Neon City Rain

Overview

The Neon City Rain palette is a dynamic and energetic collection of electric hues set against a modern dark backdrop. With vibrant accents like #FF0066 (magenta), #00FFFF (cyan), and #FFD700 (gold), this palette captures the essence of a futuristic, rain-slicked cityscape illuminated by brilliant neon signs. Grounded by the deep #2B2B2B and supportive #666666 grays, it provides excellent contrast for high-impact visual design. Ideal for projects demanding a bold, cyberpunk aesthetic, it enables designers to create striking interfaces, captivating digital art, and energetic branding that truly pops.

Best used for

  • Cyberpunk game interfaces and streaming overlays
  • Vibrant event posters and digital advertisements
  • Futuristic tech branding and product launches
  • Energetic digital art and motion graphics
  • Dark mode applications requiring bright accents
  • Music visuals for electronic or synthwave genres

Suggested color roles

primary

Use #2B2B2B as the dominant background color, providing a strong, dark foundation for vibrant elements.

secondary

Apply #666666 for subtle UI elements, secondary text, or panel borders, adding depth without overpowering the neons.

accent

Deploy #FF0066, #00FFFF, and #FFD700 as primary accent colors for interactive elements, highlights, and calls to action.

background

The deep #2B2B2B serves as the main background, ensuring maximum contrast for the bright neon colors.

text

For critical information, use #FFD700 or #00FFFF on #2B2B2B. For general body text, a bright white or light gray provides optimal readability.

Accessibility notes

  • Ensure all neon accent colors (#FF0066, #00FFFF, #FFD700) have sufficient contrast against #2B2B2B for readability.
  • Avoid using #666666 for small or essential text on #2B2B2B, as contrast may be insufficient.
  • Be mindful of color blindness when pairing neon hues; provide alternative visual cues if possible.
  • Use a vibrant neon for key interactive elements, ensuring they stand out clearly against the dark background.

Recommended combinations

Cyberpunk Base

Primary UI: #2B2B2B for background, #FF0066 for main CTA, #00FFFF for secondary interactive elements.

#2B2B2B · #FF0066 · #00FFFF

Energetic Highlight

Info cards: #666666 for card background, #FFD700 for headings, #FF0066 for small icons.

#666666 · #FFD700 · #FF0066

Dynamic Duo

Title screens or hero sections: #2B2B2B for deep space, #FFD700 for primary title, #00FFFF for glowing subtitle.

#2B2B2B · #FFD700 · #00FFFF

CSS variables

:root {
  --neon-city-rain-4-1: #FF0066;
  --neon-city-rain-4-2: #00FFFF;
  --neon-city-rain-4-3: #FFD700;
  --neon-city-rain-4-4: #2B2B2B;
  --neon-city-rain-4-5: #666666;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-rain-4": {
        1: "#FF0066",
        2: "#00FFFF",
        3: "#FFD700",
        4: "#2B2B2B",
        5: "#666666",
      }
    }
  }
}

Related searches

cyberpunk color schemevibrant neon uifuturistic game paletteelectric city colorsdark mode neon accents

Palette colors

Hex values

Color 1#FF0066
·
Color 2#00FFFF
·
Color 3#FFD700
·
Color 4#2B2B2B
·
Color 5#666666
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.1:1AA18
2.8:1Fail
3.7:1AA18
1.5:1Fail
2
3.1:1AA18
1.1:1Fail
11.3:1AAA
4.6:1AA
3
2.8:1Fail
1.1:1Fail
10.1:1AAA
4.1:1AA18
4
3.7:1AA18
11.3:1AAA
10.1:1AAA
2.5:1Fail
5
1.5:1Fail
4.6:1AA
4.1:1AA18
2.5:1Fail

Similar palettes

More like Neon City Rain

View all vibrant
Cyber Glow Graffiti
Electric Future Drive
Neon Alley Pulse
Neon City Rain
City Lights Energy
City Neon Jungle