Palette

Neon Urban Rain

The dazzling spectacle of city lights reflecting on wet pavement after a sudden rain shower.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6495ED#FF1493#39FF14#2F4F4F#FFD700

Palette guide

How to use Neon Urban Rain

Overview

The Neon Urban Rain palette captures the dazzling spectacle of city lights reflecting on wet pavement, blending cool tones with vibrant neons. It features a calming cornflower blue #6495ED, a lively hot pink #FF1493, an electrifying lime green #39FF14, a deep dark slate gray #2F4F4F, and a radiant gold #FFD700. This palette offers designers a unique balance between moody urban depth and energetic splashes of color, perfect for creating dynamic visual narratives. Developers can effectively use these hex codes to build interfaces that feel sophisticated yet playful, ideal for modern brands or digital experiences that require a blend of calm and excitement, particularly in dark mode applications.

Best used for

Urban-themed game environments and UI
Creative agency websites or portfolios
Music album art or concert posters
Modern art installations and digital displays
Fashion editorial layouts
Dynamic video intros and motion graphics

Suggested color roles

primary

#6495ED (Cornflower Blue) - Ideal for main backgrounds, larger content blocks, or primary navigational elements, offering a cool, reflective base.

secondary

#FF1493 (Hot Pink) - Use for impactful calls-to-action, key interactive elements, or headings that need to pop with energy.

accent

#39FF14 (Lime Green) - Perfect for notification indicators, subtle highlights, or graphic details to add a futuristic glow.

background

#2F4F4F (Dark Slate Gray) - A deep, versatile background color that enhances the vibrancy of the neon accents and provides an urban foundation.

text

#FFD700 (Radiant Gold) - Excellent for headlines, subheadings, or important data points. For body text, consider a clean white or light gray against #2F4F4F for readability.

Accessibility notes

Ensure good contrast for text, especially when using #FFD700 on #2F4F4F, targeting WCAG AA standards.
Avoid placing #FF1493 and #39FF14 directly adjacent without a buffer, as their similar intensity can cause visual vibration.
Use #6495ED as a background for lighter text, or with dark text for clear readability.
Always test font sizes and weights with chosen color combinations to optimize legibility across devices.

Recommended combinations

Pavement Glow

Creates a moody urban scene with a splash of vibrant pink, ideal for modern dark-themed interfaces or artistic visuals.

#2F4F4F · #6495ED · #FF1493

Rainy Neon

A striking combination for digital dashboards or gaming UIs, where green and gold provide clear, glowing indicators on a dark base.

#2F4F4F · #39FF14 · #FFD700

City Reflections

Energetic and bright, suitable for event promotions or creative branding that aims for a lively and modern feel.

#6495ED · #FFD700 · #FF1493

CSS variables

:root {
  --neon-urban-rain-1: #6495ED;
  --neon-urban-rain-2: #FF1493;
  --neon-urban-rain-3: #39FF14;
  --neon-urban-rain-4: #2F4F4F;
  --neon-urban-rain-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-urban-rain": {
        1: "#6495ED",
        2: "#FF1493",
        3: "#39FF14",
        4: "#2F4F4F",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#6495ED

Color 2#FF1493

Color 3#39FF14

Color 4#2F4F4F

Color 5#FFD700

Accessibility

Contrast checker

1.2:1Fail

2.2:1Fail

3:1AA18

2.1:1Fail

1.2:1Fail

2.7:1Fail

2.5:1Fail

2.6:1Fail

2.2:1Fail

2.7:1Fail

6.6:1AA

1:1Fail

3:1AA18

2.5:1Fail

6.6:1AA

6.4:1AA

2.1:1Fail

2.6:1Fail

1:1Fail

6.4:1AA

Similar palettes

More like Neon Urban Rain

View all vibrant

Electric City Pulse

Electric Metro Glow

Fluorescent Alley Beat

Neon City Rain

Rainy Neon Reflex

Alleyway Mural Splash