Back to palettes

Palette

Rainy Metropolis Neon

Vivid blues portray a bustling city street illuminated by neon lights reflecting in the rain.

coolenergetic5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainy Metropolis Neon 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 Rainy Metropolis Neon.

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

Data visualization

#00BFFF#1E90FF#0000FF#4169E1#000080

Palette guide

How to use Rainy Metropolis Neon

Overview

The "Rainy Metropolis Neon" palette is a dynamic and vibrant collection of blues, capturing the energetic and futuristic glow of city lights reflecting in the rain. Ranging from the bright, electric #00BFFF to the deep, intense #000080, this palette offers a compelling spectrum for creating high-impact and modern designs. The varying shades of blue, including the striking #0000FF and #4169E1, provide excellent depth and contrast, perfect for digital interfaces that demand attention. This palette is ideal for projects that aim to evoke excitement, technology, urban sophistication, or a futuristic aesthetic.

Best used for

  • Tech and gaming industry branding
  • Modern digital art and interactive installations
  • Event promotion for nightlife or urban festivals
  • Futuristic UI/UX designs
  • Science fiction-themed media
  • Sports and e-sports marketing

Suggested color roles

primary

#0000FF serves as a bold, energetic primary color for main branding, key calls to action, or prominent headlines, demanding attention.

secondary

#1E90FF or #00BFFF are excellent for subheadings, navigation, or interactive elements, maintaining high energy and clarity.

accent

#4169E1 can be used for subtle highlights, hover states, or graphic details, adding depth while keeping the vibrant blue theme.

background

#000080 provides a deep, immersive background that enhances the neon effect of the brighter blues and creates a dramatic canvas.

text

For dark backgrounds like #000080, use #00BFFF or a bright white for primary text. For light backgrounds, a very dark blue or black offers good contrast.

Accessibility notes

  • The vibrancy of these blues requires careful contrast checks, especially for text on other blues. Use a bright white for text on darker blues like #000080.
  • Avoid using similar mid-tones like #1E90FF and #4169E1 for text and background combinations without sufficient contrast.
  • Ensure interactive elements have clear visual states beyond just color, such as underlines or icons, for accessibility.
  • The bright blue #00BFFF might be too intense for extensive body text; reserve for headlines or accents.

Recommended combinations

Electric Contrast

Creates a high-impact, futuristic look with deep dark blue for background, electric blue for accents, and a vibrant blue for headings.

#000080 · #00BFFF · #1E90FF

Neon Glow

Ideal for creating dynamic gradients, glowing effects, or layered UI components that mimic city neon lights.

#1E90FF · #00BFFF · #4169E1

Urban Energy

A bold primary blue for key elements, a deep dark blue for contrast and background, and an electric blue for striking highlights.

#0000FF · #000080 · #00BFFF

CSS variables

:root {
  --rainy-metropolis-neon-1: #00BFFF;
  --rainy-metropolis-neon-2: #1E90FF;
  --rainy-metropolis-neon-3: #0000FF;
  --rainy-metropolis-neon-4: #4169E1;
  --rainy-metropolis-neon-5: #000080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-metropolis-neon": {
        1: "#00BFFF",
        2: "#1E90FF",
        3: "#0000FF",
        4: "#4169E1",
        5: "#000080",
      }
    }
  }
}

Related searches

neon blue color paletteurban futuristic designvibrant city colorstech ui blue schemeenergetic blue branding

Palette colors

Hex values

Color 1#00BFFF
·
Color 2#1E90FF
·
Color 3#0000FF
·
Color 4#4169E1
·
Color 5#000080
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
4:1AA18
2.3:1Fail
7.5:1AAA
2
1.5:1Fail
2.7:1Fail
1.5:1Fail
4.9:1AA
3
4:1AA18
2.7:1Fail
1.8:1Fail
1.9:1Fail
4
2.3:1Fail
1.5:1Fail
1.8:1Fail
3.3:1AA18
5
7.5:1AAA
4.9:1AA
1.9:1Fail
3.3:1AA18

Similar palettes

More like Rainy Metropolis Neon

View all cool
Urban Rain Slicker
Digital Circuit Glow
Electric City Drive
Abstract Ocean Currents
Aegean Blue Depths
Aqua Marine Sparkle