Back to palettes

Palette

Rainy City Noir

A brooding, atmospheric palette reflecting the slick, reflective surfaces and dim lighting of a rainy city night.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#6A6A6A#778899#808080#2A2A2A

Palette guide

How to use Rainy City Noir

Overview

The Rainy City Noir palette delivers a brooding, atmospheric collection of greys and subtle blue-greys, perfectly mirroring the slick, reflective surfaces and dim lighting of a rainy urban night. With deep charcoal #2A2A2A providing a solid foundation, it transitions through mid-tones like #4A4A4A, #6A6A6A, and #808080. The subtle hint of blue in #778899 adds a sophisticated, cool dimension, preventing the palette from feeling flat. This collection is expertly curated for designers and developers seeking to create a cinematic, mysterious, and highly sophisticated visual experience, ideal for storytelling or luxury branding.

Best used for

  • Cinematic branding and film promotions
  • Sophisticated web and app themes
  • Luxury fashion editorial design
  • Architectural visualization and renders
  • Art installations and gallery websites
  • High-end automotive interfaces

Suggested color roles

primary

Anchor your design with #2A2A2A for backgrounds, main headers, or deep shadow areas, establishing a strong, dark presence.

secondary

Utilize #4A4A4A for supporting elements, sidebars, or content blocks, providing depth without overwhelming the primary color.

accent

Incorporate #778899 for subtle highlights, interactive elements, or graphic details to introduce a cool, refined accent.

background

Apply #6A6A6A as a versatile mid-grey background, offering a softer alternative to the darkest tones while maintaining atmosphere.

text

For primary text, use a crisp white or near-white for optimal legibility, or #808080 for secondary text on darker backgrounds.

Accessibility notes

  • Ensure sufficient contrast for all text, especially when using lighter greys like #808080 on mid-tones like #6A6A6A.
  • Always use white or a very light grey for body text on #2A2A2A and #4A4A4A to meet WCAG contrast guidelines.
  • Avoid using #778899 for small text on similar background tones without rigorous contrast checking.
  • Consider larger font sizes for descriptive text to enhance readability within this moody palette.

Recommended combinations

Noir Depths

Creates a profound, monochromatic depth, ideal for immersive backgrounds or sophisticated UI structures.

#2A2A2A · #4A4A4A · #6A6A6A

Reflective Sheen

Evokes the subtle reflections and diffused light of wet surfaces, perfect for layered graphics or interactive elements.

#6A6A6A · #778899 · #808080

Cinematic Mood

A balanced triad providing strong contrast with a cool accent, suitable for clear hierarchy and dramatic visual storytelling.

#2A2A2A · #778899 · #4A4A4A

CSS variables

:root {
  --rainy-city-noir-2-1: #4A4A4A;
  --rainy-city-noir-2-2: #6A6A6A;
  --rainy-city-noir-2-3: #778899;
  --rainy-city-noir-2-4: #808080;
  --rainy-city-noir-2-5: #2A2A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-city-noir-2": {
        1: "#4A4A4A",
        2: "#6A6A6A",
        3: "#778899",
        4: "#808080",
        5: "#2A2A2A",
      }
    }
  }
}

Related searches

film noir color schememoody grey blue paletteurban atmosphere colorsdark sophisticated themerainy city aesthetics

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#6A6A6A
·
Color 3#778899
·
Color 4#808080
·
Color 5#2A2A2A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
2.2:1Fail
1.6:1Fail
2
1.6:1Fail
1.5:1Fail
1.4:1Fail
2.7:1Fail
3
2.4:1Fail
1.5:1Fail
1.1:1Fail
3.9:1AA18
4
2.2:1Fail
1.4:1Fail
1.1:1Fail
3.6:1AA18
5
1.6:1Fail
2.7:1Fail
3.9:1AA18
3.6:1AA18

Similar palettes

More like Rainy City Noir

View all monochrome
Rainy City Reflections
Charcoal Smoke Hues
City Twilight Mist
Foggy London Alley
Gothic Cathedral Stone
Gothic Stone Hearth