Palette

Urban Rain Wash

Cool, varied greys depicting the subtle reflections and dampened tones of a city street after rain.

monochromecalm5 colors

More monochrome 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

#696969#808080#A9A9A9#C0C0C0#D3D3D3

Palette guide

How to use Urban Rain Wash

Overview

The Urban Rain Wash palette is a cool, monochromatic collection of grays, meticulously crafted to depict the subtle reflections and dampened tones of a city street after rain. Ranging from the deep #696969 to the very light #D3D3D3, with versatile mid-tones like #808080, #A9A9A9, and #C0C0C0, this palette offers designers and developers a refined selection for creating minimalist and sophisticated designs. Its cohesive nature ensures harmony across various elements, making it ideal for projects that require a calm, modern, and understated aesthetic without sacrificing depth or visual interest. It embodies a serene urban mood.

Best used for

Minimalist web and app interfaces
Architectural renderings and portfolios
Technical documentation and reports
Art gallery websites
Clean data visualization
Sophisticated personal branding

Suggested color roles

primary

Utilize #696969 (Dim Gray) for main headings, primary text, and foundational elements to establish a strong, stable base.

secondary

Employ #808080 (Gray) for subheadings, secondary information, or subtle dividers to add hierarchy and gentle contrast.

accent

Apply #A9A9A9 (Dark Gray) for interactive elements like buttons, borders, or hover states, offering a clear but subdued accent.

background

Designate #D3D3D3 (Light Gray) as the main background color, providing a clean, neutral, and expansive canvas for content.

text

For body text, #696969 (Dim Gray) ensures excellent readability on light backgrounds, or use black for maximum contrast.

Accessibility notes

Ensure sufficient contrast between #696969 text and the #D3D3D3 background for optimal readability.
Be cautious when using #C0C0C0 or #A9A9A9 for small text on light backgrounds, as contrast may be low.
Provide clear visual indicators (e.g., bolding, underlines) for interactive elements that use mid-tone grays.
Test different gray pairings to ensure distinctness between UI elements and prevent visual ambiguity.

Recommended combinations

Dampened Contrast

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

#696969 · #D3D3D3 · #808080

Subtle UI Depth

Perfect for card backgrounds, borders, or subtle interactive elements, offering gentle tonal variation.

#A9A9A9 · #C0C0C0 · #808080

Monochrome Harmony

Use for headers or footers, combining a medium gray background with dark text and a light accent.

#808080 · #D3D3D3 · #696969

CSS variables

:root {
  --urban-rain-wash-2-1: #696969;
  --urban-rain-wash-2-2: #808080;
  --urban-rain-wash-2-3: #A9A9A9;
  --urban-rain-wash-2-4: #C0C0C0;
  --urban-rain-wash-2-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-wash-2": {
        1: "#696969",
        2: "#808080",
        3: "#A9A9A9",
        4: "#C0C0C0",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#696969

Color 2#808080

Color 3#A9A9A9

Color 4#C0C0C0

Color 5#D3D3D3

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3:1AA18

3.7:1AA18

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.6:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

1.6:1Fail

3:1AA18

2.2:1Fail

1.3:1Fail

1.2:1Fail

3.7:1AA18

2.6:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Urban Rain Wash