Back to palettes

Palette

Rainy City Nights

A moody collection of deep greys and near-blacks, reflecting the slick, mysterious aura of a city at night after rain.

Darkdark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainy City Nights 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 City Nights.

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

Data visualization

#0A0A0A#1C1C1C#2F4F4F#696969#708090

Palette guide

How to use Rainy City Nights

Overview

The Rainy City Nights palette captures the mysterious, slick aura of an urban landscape after dark, drenched in rain. This moody collection features deep greys and near-blacks, from the profound #0A0A0A and #1C1C1C to the dark slate of #2F4F4F. Lighter greys like #696969 and the subtle blue-grey of #708090 add reflective qualities, mimicking wet surfaces and diffused city lights. It's an exceptional choice for designers and developers aiming to evoke sophistication, mystery, and a sleek, modern aesthetic, particularly suited for high-end digital interfaces or dramatic branding.

Best used for

  • Sophisticated dark mode UI/UX design
  • Luxury automotive branding
  • Film noir aesthetics and graphic novels
  • Urban photography portfolios
  • Premium product packaging
  • Event branding for exclusive night events

Suggested color roles

primary

Designate #0A0A0A as the foundational black for backgrounds, headers, or bold graphic elements, conveying ultimate depth.

secondary

Employ #1C1C1C for supporting sections, sub-panels, or subtle textural elements, maintaining a continuous dark theme.

accent

Use #708090 for subtle highlights, interactive states, or key information that needs a refined, understated pop.

background

Apply #2F4F4F as a rich, dark background for content areas, offering a softer alternative to pure black while maintaining mood.

text

For primary text, use a bright white or off-white for maximum legibility, or #696969 for secondary text on darker backgrounds.

Accessibility notes

  • Crucial to ensure high contrast for all text on dark backgrounds; bright white is often necessary.
  • Avoid using #696969 or #708090 for small text on #2F4F4F, as contrast might be insufficient.
  • Ensure interactive elements have distinct hover/focus states with adequate contrast.
  • Provide sufficient spacing and line height for text against dark backgrounds to improve readability.

Recommended combinations

Urban Depths

Creates a seamless, dark, and mysterious gradient, perfect for immersive backgrounds or cinematic visuals.

#0A0A0A · #1C1C1C · #2F4F4F

Reflective Street

Evokes the subtle reflections and diffused light of wet city streets, ideal for UI elements or layered graphics.

#2F4F4F · #696969 · #708090

Sleek Contrast

Provides a strong base with sophisticated lighter accents, suitable for clear visual hierarchy and modern aesthetics.

#0A0A0A · #708090 · #696969

CSS variables

:root {
  --rainy-city-nights-1: #0A0A0A;
  --rainy-city-nights-2: #1C1C1C;
  --rainy-city-nights-3: #2F4F4F;
  --rainy-city-nights-4: #696969;
  --rainy-city-nights-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-city-nights": {
        1: "#0A0A0A",
        2: "#1C1C1C",
        3: "#2F4F4F",
        4: "#696969",
        5: "#708090",
      }
    }
  }
}

Related searches

dark city color palettemoody grey schemeurban noir colorssophisticated dark moderainy night aesthetic

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#1C1C1C
·
Color 3#2F4F4F
·
Color 4#696969
·
Color 5#708090
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2.2:1Fail
3.6:1AA18
4.9:1AA
2
1.2:1Fail
1.9:1Fail
3.1:1AA18
4.2:1AA18
3
2.2:1Fail
1.9:1Fail
1.6:1Fail
2.2:1Fail
4
3.6:1AA18
3.1:1AA18
1.6:1Fail
1.4:1Fail
5
4.9:1AA
4.2:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Rainy City Nights

View all Dark
Midnight Ocean Depths
Urban Rain Puddles
Arid Dusk Hues
Gothic Garden Nocturne
Night City Gleam
Volcanic Glass Beach