Palette

Neon City Rain

Cool, subdued blues and grays with hints of soft light, like neon reflections on a wet city street at night.

cooldark5 colors

More cool 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

#1E1E2C#3A3A4A#5F5F7A#A1A1CC#E0E0FF

Palette guide

How to use Neon City Rain

Overview

The Neon City Rain palette offers a subdued yet sophisticated aesthetic, perfect for designs requiring a touch of urban melancholy and cool-toned elegance. Featuring deep blues and grays like #1E1E2C and #3A3A4A, it evokes the quiet glow of neon reflections on a wet city street at night. Lighter tones such as #A1A1CC and the ethereal #E0E0FF provide gentle highlights, making this palette ideal for creating depth without harsh contrasts. Designers can leverage its subtle transitions to craft atmospheric digital interfaces, moody branding, or evocative art, where a sense of calm and introspection prevails.

Best used for

Dark mode UI themes and dashboards
Melancholic or atmospheric digital art
Branding for sophisticated tech or urban lifestyle products
Background graphics for introspective content
Subtle game environments or visual novels
Editorial designs with a cool, modern edge

Suggested color roles

primary

Use #1E1E2C as the foundational dark background, providing a deep, stable base for elements.

secondary

Employ #3A3A4A for secondary backgrounds, panels, or subtle divisions, offering a slight lift from the primary dark.

accent

Apply #A1A1CC for soft, reflective accents, iconography, or subtle hover states, providing a gentle glow.

background

The deep #1E1E2C is ideal for primary backgrounds, establishing a dark, moody ambiance. For lighter darks, #3A3A4A works well.

text

Utilize #E0E0FF for primary text on dark backgrounds for excellent readability. For less critical or placeholder text, #5F5F7A offers a softer contrast.

Accessibility notes

Ensure #E0E0FF text on #1E1E2C or #3A3A4A backgrounds meets WCAG AA contrast ratios.
Avoid using #5F5F7A for small body text on #3A3A4A due to insufficient contrast.
Use #A1A1CC sparingly as an accent on darker tones; it may not provide enough contrast for essential information.
Prioritize larger font sizes or bolder weights when using mid-tones like #5F5F7A for readability on similar darks.

Recommended combinations

Deep Night Base

For core UI elements: #1E1E2C as background, #E0E0FF for text, and #A1A1CC for highlights.

#1E1E2C · #E0E0FF · #A1A1CC

Subtle Depth

Layered interface panels: #3A3A4A for a card background, #5F5F7A for secondary text, #E0E0FF for primary text.

#3A3A4A · #5F5F7A · #E0E0FF

Melancholy Glow

Atmospheric graphics: #1E1E2C as a deep backdrop, #A1A1CC for a soft light source, #5F5F7A for subtle detail.

#1E1E2C · #A1A1CC · #5F5F7A

CSS variables

:root {
  --neon-city-rain-3-1: #1E1E2C;
  --neon-city-rain-3-2: #3A3A4A;
  --neon-city-rain-3-3: #5F5F7A;
  --neon-city-rain-3-4: #A1A1CC;
  --neon-city-rain-3-5: #E0E0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-rain-3": {
        1: "#1E1E2C",
        2: "#3A3A4A",
        3: "#5F5F7A",
        4: "#A1A1CC",
        5: "#E0E0FF",
      }
    }
  }
}

Hex values

Color 1#1E1E2C

Color 2#3A3A4A

Color 3#5F5F7A

Color 4#A1A1CC

Color 5#E0E0FF

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

6.6:1AA

12.7:1AAA

1.5:1Fail

1.8:1Fail

4.5:1AA

8.6:1AAA

2.7:1Fail

1.8:1Fail

2.5:1Fail

4.8:1AA

6.6:1AA

4.5:1AA

2.5:1Fail

1.9:1Fail

12.7:1AAA

8.6:1AAA

4.8:1AA

1.9:1Fail

Similar palettes

More like Neon City Rain

Rainy City Reflections

Twilight Metropolis Blue