Palette

Urban Rain Wash

A tranquil urban palette reflecting the subtle beauty of a rainy city day, with muted greys and a deep blue undertone.

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

#6B7A8F#8C9FA7#A5B5B5#D1D9D9#1F3041

Palette guide

How to use Urban Rain Wash

Overview

The Urban Rain Wash palette is a tranquil urban collection, reflecting the subtle beauty of a rainy city day with muted grays and a deep blue undertone. Anchored by the profound #1F3041, it offers a solid, sophisticated base. The palette gracefully transitions through the muted blue-grays of #6B7A8F, #8C9FA7, and #A5B5B5, culminating in the serene lightness of #D1D9D9. This harmonious blend provides designers and developers with a calming and sophisticated toolkit, ideal for crafting experiences that evoke quiet contemplation, modern elegance, and a peaceful connection to the urban environment after a gentle rain.

Best used for

Serene web experiences and blogs
Meditation and wellness applications
Interior design mood boards
Thoughtful corporate branding
Eco-conscious product design
Artistic and cultural platforms

Suggested color roles

primary

Utilize #1F3041 (Deep Blue-Gray) for primary headings, brand logos, and foundational elements to establish a strong, sophisticated presence.

secondary

Employ #6B7A8F (Muted Blue-Gray) for main body text, navigation items, or distinct content sections for clear hierarchy.

accent

Apply #8C9FA7 (Soft Blue-Gray) for subtle interactive elements like links, buttons, or highlights that require a gentle touch.

background

Designate #D1D9D9 (Very Light Gray-Blue) as the main background color, providing a clean, tranquil, and expansive canvas.

text

For body text, #1F3041 (Deep Blue-Gray) offers excellent readability on light backgrounds, or use a dark charcoal for optimal contrast.

Accessibility notes

Ensure #1F3041 text on #D1D9D9 meets WCAG AA contrast standards for all content, especially body text.
Be cautious when using #A5B5B5 or #8C9FA7 for small text on very light backgrounds, as contrast may be insufficient.
Provide clear visual indicators (e.g., bolding, underlines) for interactive elements that use mid-tone grays.
Test color pairings thoroughly to maintain legibility and prevent visual fatigue in extended reading.

Recommended combinations

Tranquil Focus

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

#1F3041 · #D1D9D9 · #6B7A8F

Soft Navigation

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

#6B7A8F · #8C9FA7 · #D1D9D9

Quiet Contrast

Use for subtle branding elements or background patterns, layering a mid-tone with deep and light hues.

#A5B5B5 · #1F3041 · #D1D9D9

CSS variables

:root {
  --urban-rain-wash-3-1: #6B7A8F;
  --urban-rain-wash-3-2: #8C9FA7;
  --urban-rain-wash-3-3: #A5B5B5;
  --urban-rain-wash-3-4: #D1D9D9;
  --urban-rain-wash-3-5: #1F3041;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-wash-3": {
        1: "#6B7A8F",
        2: "#8C9FA7",
        3: "#A5B5B5",
        4: "#D1D9D9",
        5: "#1F3041",
      }
    }
  }
}

Hex values

Color 1#6B7A8F

Color 2#8C9FA7

Color 3#A5B5B5

Color 4#D1D9D9

Color 5#1F3041

Accessibility

Contrast checker

1.6:1Fail

2.1:1Fail

3:1AA18

3.1:1AA18

1.6:1Fail

1.3:1Fail

1.9:1Fail

4.9:1AA

2.1:1Fail

1.3:1Fail

1.5:1Fail

6.3:1AA

3:1AA18

1.9:1Fail

1.5:1Fail

9.4:1AAA

3.1:1AA18

4.9:1AA

6.3:1AA

9.4:1AAA

Similar palettes

More like Urban Rain Wash