Back to palettes

Palette

Noir City Rain

Atmospheric and moody shades reminiscent of a film noir scene, dark streets reflecting city lights.

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

#1E1E1E#36454F#5B6D7D#FF8C00#2C3539

Palette guide

How to use Noir City Rain

Overview

The Noir City Rain palette (version 2) offers an atmospheric and moody collection of dark shades, reminiscent of film noir scenes with dark streets reflecting city lights, punctuated by a striking accent. Anchored by deep tones like #1E1E1E and #2C3539, and featuring the rich #36454F, this palette introduces a vibrant #FF8C00 orange as a powerful accent. Designers and developers can leverage this scheme to create dramatic app UIs, urban photography websites, or any project requiring a sophisticated dark aesthetic with a bold, impactful point of focus.

Best used for

  • Urban photography websites
  • Dramatic app interfaces
  • Event promotion materials
  • Gaming UI with impact
  • Modern tech branding
  • Film noir inspired marketing

Suggested color roles

primary

Utilize #1E1E1E as the foundational background for intense darkness and dramatic effect.

secondary

Employ #36454F for main content areas, panels, or secondary background sections, offering a dark blue-grey.

accent

Reserve #FF8C00 for key calls to action, interactive elements, or critical highlights to provide a vibrant contrast.

background

The primary canvas should be #1E1E1E or #2C3539 for a consistent dark, urban theme.

text

For primary text, use #5B6D7D on dark backgrounds. A near-white can be used for maximum readability, especially on #FF8C00.

Accessibility notes

  • Ensure #5B6D7D provides sufficient contrast against #1E1E1E and #36454F for all text elements.
  • Verify #FF8C00 contrast for text or interactive elements; consider white text on #FF8C00 for optimal readability.
  • Avoid using #2C3539 as text on #1E1E1E due to potential low contrast and readability issues.
  • Always test the vibrant #FF8C00 accent for accessibility, especially when used for small text or icons.

Recommended combinations

Urban Foundation

Creates layered backgrounds, UI sections, and deep, atmospheric gradients for an urban feel.

#1E1E1E · #36454F · #2C3539

City Glow

Ideal for content cards, secondary information, and vibrant calls to action, like a city light in the rain.

#36454F · #5B6D7D · #FF8C00

Striking Contrast

Use for headers, primary buttons, and main text on a dark base for a dramatic and impactful statement.

#1E1E1E · #FF8C00 · #5B6D7D

CSS variables

:root {
  --noir-city-rain-2-1: #1E1E1E;
  --noir-city-rain-2-2: #36454F;
  --noir-city-rain-2-3: #5B6D7D;
  --noir-city-rain-2-4: #FF8C00;
  --noir-city-rain-2-5: #2C3539;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-city-rain-2": {
        1: "#1E1E1E",
        2: "#36454F",
        3: "#5B6D7D",
        4: "#FF8C00",
        5: "#2C3539",
      }
    }
  }
}

Related searches

dark urban orange palettemoody city colorsnoir theme with accentdramatic UI designnight city vibrant colors

Palette colors

Hex values

Color 1#1E1E1E
·
Color 2#36454F
·
Color 3#5B6D7D
·
Color 4#FF8C00
·
Color 5#2C3539
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
7.1:1AAA
1.3:1Fail
2
1.7:1Fail
1.9:1Fail
4.2:1AA18
1.3:1Fail
3
3.1:1AA18
1.9:1Fail
2.3:1Fail
2.3:1Fail
4
7.1:1AAA
4.2:1AA18
2.3:1Fail
5.4:1AA
5
1.3:1Fail
1.3:1Fail
2.3:1Fail
5.4:1AA

Similar palettes

More like Noir City Rain

View all dark
Noir Detective Mood
City Neon Rain
City Puddle Reflection
Desert Night Cactus
Downtown Neon Noir
Midnight Urban Glow