Back to palettes

Palette

Cityscape Rain Wash

Muted greys and blues capture the somber yet peaceful atmosphere of a city under a rainy, overcast sky.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cityscape Rain Wash 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 Cityscape Rain Wash.

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

Data visualization

#3A4C5B#5C6C7B#8A9BAA#B9C2CD#DDE2E7

Palette guide

How to use Cityscape Rain Wash

Overview

The "Cityscape Rain Wash" palette captures the muted, tranquil atmosphere of an urban landscape under a rainy, overcast sky. This cool, neutral gradient ranges from a deep, anchoring blue-gray #3A4C5B to a very light, almost white gray #DDE2E7. Intermediate shades like #5C6C7B, #8A9BAA, and #B9C2CD provide smooth transitions, making it ideal for creating depth and a serene, professional ambiance. Designers and developers can leverage this palette for elegant, calming interfaces, sophisticated branding, or any project requiring a modern, understated aesthetic that conveys tranquility and subtle sophistication.

Best used for

  • Corporate websites and applications
  • Modern architecture portfolios
  • Minimalist UI design
  • Luxury product showcases
  • Professional branding
  • Financial services platforms

Suggested color roles

primary

#3A4C5B - A strong, deep blue-gray, ideal for foundational elements, headers, or robust typography.

secondary

#5C6C7B - A slightly lighter cool gray, perfect for secondary panels, navigation, or subtle dividers.

accent

#8A9BAA - A versatile mid-tone gray, suitable for interactive elements, borders, or subtle highlights.

background

#DDE2E7 - A very light, airy gray, providing a clean and expansive canvas for content.

text

#3A4C5B - For highly readable body text on light backgrounds, or a crisp white for headers on dark elements.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #B9C2CD or #DDE2E7 for text on similar light backgrounds.
  • Darker colors like #3A4C5B provide excellent contrast for light text (e.g., white), enhancing readability.
  • Avoid using mid-tones for small text on closely related mid-tone backgrounds, as this can reduce legibility.
  • Utilize clear visual cues beyond color, such as underlines for links or bolding for emphasis, especially across the lighter shades.

Recommended combinations

Washed Depth

Ideal for dark-themed interfaces, creating visual hierarchy and a sense of robust construction.

#3A4C5B · #5C6C7B · #8A9BAA

Rain Clean

Excellent for light mode applications, using the lightest for background and the darkest for key text.

#DDE2E7 · #B9C2CD · #3A4C5B

Subtle Mist

Use for delicate borders, hover effects, or to add slight dimensionality to elements without harsh contrast.

#5C6C7B · #8A9BAA · #B9C2CD

CSS variables

:root {
  --cityscape-rain-wash-1: #3A4C5B;
  --cityscape-rain-wash-2: #5C6C7B;
  --cityscape-rain-wash-3: #8A9BAA;
  --cityscape-rain-wash-4: #B9C2CD;
  --cityscape-rain-wash-5: #DDE2E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cityscape-rain-wash": {
        1: "#3A4C5B",
        2: "#5C6C7B",
        3: "#8A9BAA",
        4: "#B9C2CD",
        5: "#DDE2E7",
      }
    }
  }
}

Related searches

cool grey blue palettemodern minimalist colorscorporate UI paletterainy city aestheticprofessional web design colors

Palette colors

Hex values

Color 1#3A4C5B
·
Color 2#5C6C7B
·
Color 3#8A9BAA
·
Color 4#B9C2CD
·
Color 5#DDE2E7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.1:1AA18
4.9:1AA
6.8:1AA
2
1.6:1Fail
1.9:1Fail
3:1AA18
4.1:1AA18
3
3.1:1AA18
1.9:1Fail
1.6:1Fail
2.2:1Fail
4
4.9:1AA
3:1AA18
1.6:1Fail
1.4:1Fail
5
6.8:1AA
4.1:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Cityscape Rain Wash

View all neutral
Puddle Reflection Grey
Urban Rain Wash
Cloudy Day Serene
Coastal Cliffs
Faded Denim
Meditative Rock Pool