Palette

Urban Rain Wash

Soft, muted grays and blues that capture the reflective, serene mood of a rainy city street.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CDD1D3#A8B1B6#829097#5D6E77#394D58

Palette guide

How to use Urban Rain Wash

Overview

The Urban Rain Wash palette presents a collection of soft, muted grays and blues, expertly capturing the reflective, serene mood of a rainy city street. From the deep, contemplative #394D58 to the airy #CDD1D3, and encompassing the versatile mid-tones of #5D6E77, #829097, and #A8B1B6, this palette offers a sophisticated range. Designers and developers will find its cohesive, gentle tones perfect for creating calm, elegant, and modern interfaces. It's an ideal choice for projects that aim to evoke a sense of quiet sophistication and atmospheric depth, reflecting the subtle beauty of an urban downpour.

Best used for

Calm corporate websites
Educational platforms
Personal branding and portfolios
Sophisticated mobile interfaces
Art galleries and exhibition sites
Wellness and mindfulness apps

Suggested color roles

primary

Utilize #394D58 (Deep Blue-Gray) for primary headings, important text, and structural elements to establish a strong, contemplative foundation.

secondary

Employ #5D6E77 (Medium Dark Blue-Gray) for subheadings, secondary information, or subtle dividers to add hierarchy with a soft touch.

accent

Apply #A8B1B6 (Soft Blue-Gray) to interactive elements like buttons, links, or progress indicators for a gentle, inviting highlight.

background

Designate #CDD1D3 (Light Gray-Blue) as the main background color, providing a soft, neutral, and expansive canvas for content.

text

For body text, #394D58 (Deep Blue-Gray) offers excellent readability on light backgrounds, or use black for maximum contrast.

Accessibility notes

Ensure #394D58 text on #CDD1D3 meets WCAG AA contrast standards for optimal legibility, especially for body text.
Be cautious when using #A8B1B6 or #829097 for small text on very light backgrounds, as contrast may be low.
Provide clear visual indicators for interactive elements that use mid-tone grays to ensure usability.
Test color pairings to maintain visual hierarchy and prevent elements from blending into each other.

Recommended combinations

Serene Content

Ideal for main content blocks: dark text on a very light background with a medium blue-gray for supporting details.

#394D58 · #CDD1D3 · #829097

Muted Navigation

Perfect for navigation menus or interactive cards, combining muted tones for a gentle user experience.

#5D6E77 · #A8B1B6 · #CDD1D3

Atmospheric Layers

Use for subtle background patterns, section dividers, or light UI components that need gentle definition.

#829097 · #CDD1D3 · #A8B1B6

CSS variables

:root {
  --urban-rain-wash-1: #CDD1D3;
  --urban-rain-wash-2: #A8B1B6;
  --urban-rain-wash-3: #829097;
  --urban-rain-wash-4: #5D6E77;
  --urban-rain-wash-5: #394D58;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-wash": {
        1: "#CDD1D3",
        2: "#A8B1B6",
        3: "#829097",
        4: "#5D6E77",
        5: "#394D58",
      }
    }
  }
}

Hex values

Color 1#CDD1D3

Color 2#A8B1B6

Color 3#829097

Color 4#5D6E77

Color 5#394D58

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.4:1AA18

5.7:1AA

1.4:1Fail

1.5:1Fail

2.4:1Fail

4.1:1AA18

2.1:1Fail

1.5:1Fail

1.6:1Fail

2.7:1Fail

3.4:1AA18

2.4:1Fail

1.6:1Fail

1.7:1Fail

5.7:1AA

4.1:1AA18

2.7:1Fail

1.7:1Fail

Similar palettes

More like Urban Rain Wash

View all neutral

Cityscape Rain Wash

Puddle Reflection Grey