Back to palettes

Palette

Rainy City Noir

Captures the brooding, mysterious atmosphere of a rainy night in a film noir city.

darkdark5 colors
More dark 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

#3A4750#576574#A3ACB4#C0CCDA#1D262F

Palette guide

How to use Rainy City Noir

Overview

The Rainy City Noir palette masterfully captures the brooding, mysterious atmosphere of a rainy night in a film noir city. This collection revolves around deep, muted blue-greys, from the profound #1D262F and #3A4750 to the mid-tones of #576574. Lighter shades like #A3ACB4 and the very soft #C0CCDA introduce subtle hints of diffused light and misty reflections, preventing the palette from feeling too heavy. It's an impeccable choice for designers and developers aiming to evoke intrigue, sophistication, and a classic, dramatic aesthetic in their digital and print projects.

Best used for

  • Detective game UI and graphic design
  • Mystery novel covers and movie posters
  • Architectural visualization for urban settings
  • Sophisticated corporate branding
  • Film title sequences and cinematic graphics
  • Dark mode interfaces with an elegant edge

Suggested color roles

primary

Set #1D262F as the foundational dark blue-grey for main backgrounds, headers, or dominant design elements, providing deep gravity.

secondary

Employ #3A4750 for supporting sections, navigation bars, or secondary content blocks, maintaining the cohesive dark mood.

accent

Utilize #A3ACB4 for subtle highlights, interactive elements, or sub-headings, offering a gentle yet clear visual break.

background

Apply #576574 as a versatile mid-tone background for content areas, ensuring excellent contrast for lighter text.

text

For primary text on dark backgrounds, #C0CCDA offers superior legibility and a harmonious integration into the palette's mood.

Accessibility notes

  • Ensure sufficient contrast for all text, particularly when using #A3ACB4 on mid-tones like #576574.
  • Always use #C0CCDA or a bright white for body text on #1D262F and #3A4750 to meet WCAG contrast standards.
  • Avoid using #A3ACB4 for small text on similar background tones without rigorous contrast checks.
  • Consider larger font sizes for descriptive text to improve readability within this dark, atmospheric palette.

Recommended combinations

Dark Alleys

Creates a profound, layered depth, ideal for immersive backgrounds or defining distinct sections in a dark interface.

#1D262F · #3A4750 · #576574

Misty Streets

Evokes the diffused lights and misty atmosphere of a rainy night, perfect for main content areas or subtle gradients.

#576574 · #A3ACB4 · #C0CCDA

Noir Contrast

A balanced triad for clear visual hierarchy, combining a deep base with bright, legible text and a refined accent.

#1D262F · #C0CCDA · #A3ACB4

CSS variables

:root {
  --rainy-city-noir-1: #3A4750;
  --rainy-city-noir-2: #576574;
  --rainy-city-noir-3: #A3ACB4;
  --rainy-city-noir-4: #C0CCDA;
  --rainy-city-noir-5: #1D262F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-city-noir": {
        1: "#3A4750",
        2: "#576574",
        3: "#A3ACB4",
        4: "#C0CCDA",
        5: "#1D262F",
      }
    }
  }
}

Related searches

dark urban palettefilm noir colorsmysterious city schememoody blue greyatmospheric UI design

Palette colors

Hex values

Color 1#3A4750
·
Color 2#576574
·
Color 3#A3ACB4
·
Color 4#C0CCDA
·
Color 5#1D262F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
4.1:1AA18
5.9:1AA
1.6:1Fail
2
1.6:1Fail
2.6:1Fail
3.7:1AA18
2.6:1Fail
3
4.1:1AA18
2.6:1Fail
1.4:1Fail
6.7:1AA
4
5.9:1AA
3.7:1AA18
1.4:1Fail
9.4:1AAA
5
1.6:1Fail
2.6:1Fail
6.7:1AA
9.4:1AAA

Similar palettes

More like Rainy City Noir

View all dark
Noir Alley Nocturne
Noir Detective Mood
Noir Alley Shadows
Noir City Rain
Abyssal Luminous Flora
Abyssal Trench Mystery