Back to palettes

Palette

Noir City Rain

Somber, cool grays reflecting the shadowy, reflective streets of a rain-slicked film noir cityscape.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C2833#34495E#5D6D7E#85929E#212F3D

Palette guide

How to use Noir City Rain

Overview

The Noir City Rain palette offers somber, cool grays that perfectly reflect the shadowy, reflective streets of a rain-slicked film noir cityscape. With deep blue-blacks like #1C2833 and #212F3D, and lighter, misty shades such as #5D6D7E and #85929E, this palette provides a sophisticated foundation for immersive and moody designs. Designers and developers can leverage its nuanced cool tones to create atmospheric app UIs, cinematic websites, or urban-themed branding that evokes drama, introspection, and classic elegance, all within a cohesive dark aesthetic.

Best used for

  • Cinematic website design
  • Moody photography portfolios
  • Sophisticated app UIs
  • Urban-themed branding
  • Dark mode interfaces
  • Dramatic game environments

Suggested color roles

primary

Utilize #1C2833 as the foundational background for profound depth and a strong, dark blue-black aesthetic.

secondary

Employ #212F3D for main content areas, panels, or secondary background sections, offering a subtle shift.

accent

Reserve #85929E for key highlights, interactive elements, or crucial calls to action to ensure clear visibility.

background

The primary canvas should be #1C2833 or #212F3D for a consistent dark, moody theme.

text

For primary text, use #85929E on dark backgrounds. #5D6D7E can be used for secondary or less critical information.

Accessibility notes

  • Ensure #85929E provides sufficient contrast against #1C2833 and #212F3D for all text elements.
  • Use #5D6D7E for secondary text, but carefully verify contrast on darker elements like #212F3D.
  • Avoid using #34495E as text on #212F3D due to potential low contrast and readability issues.
  • Prioritize the lightest shades for all critical text and interactive elements to maintain readability.

Recommended combinations

Rain-slicked Streets

Creates layered backgrounds, UI sections, and deep, atmospheric gradients, mimicking wet streets.

#1C2833 · #212F3D · #34495E

Distant Lights

Ideal for content cards, secondary information, and subtle highlights, like distant city lights.

#212F3D · #5D6D7E · #85929E

Reflective Contrast

Use for prominent headers, calls to action, and main text on a dark base for a reflective impact.

#1C2833 · #85929E · #5D6D7E

CSS variables

:root {
  --noir-city-rain-1: #1C2833;
  --noir-city-rain-2: #34495E;
  --noir-city-rain-3: #5D6D7E;
  --noir-city-rain-4: #85929E;
  --noir-city-rain-5: #212F3D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-city-rain": {
        1: "#1C2833",
        2: "#34495E",
        3: "#5D6D7E",
        4: "#85929E",
        5: "#212F3D",
      }
    }
  }
}

Related searches

dark blue grey citynoir film palettemoody urban UIreflective street colorssophisticated dark mode

Palette colors

Hex values

Color 1#1C2833
·
Color 2#34495E
·
Color 3#5D6D7E
·
Color 4#85929E
·
Color 5#212F3D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.7:1AA
1.1:1Fail
2
1.6:1Fail
1.7:1Fail
2.9:1Fail
1.5:1Fail
3
2.8:1Fail
1.7:1Fail
1.7:1Fail
2.6:1Fail
4
4.7:1AA
2.9:1Fail
1.7:1Fail
4.3:1AA18
5
1.1:1Fail
1.5:1Fail
2.6:1Fail
4.3:1AA18

Similar palettes

More like Noir City Rain

View all dark
City Puddle Reflection
Gothic Library Study
Noir Alley Shadows
Noir City Rain
Noir Detective Mood
Acid Rain Gloom