Back to palettes

Palette

Urban Grey Wash

A chic and refined grayscale palette inspired by rain-washed city streets and minimalist architecture.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#B0C4DE#DCDCDC#A9A9A9

Palette guide

How to use Urban Grey Wash

Overview

The Urban Grey Wash palette offers a chic and refined grayscale experience, inspired by rain-washed city streets and minimalist architecture. It features cool, deep tones like #2F4F4F and #708090, which blend seamlessly with the softer #A9A9A9, #B0C4DE, and the very light #DCDCDC. This collection is ideal for designers and developers aiming for a sophisticated, calm, and contemporary aesthetic. Its cool undertones provide a refreshing feel, perfect for clean interfaces, elegant branding, and projects that require a modern yet approachable visual language, maintaining an understated beauty.

Best used for

  • Minimalist web design
  • Luxury lifestyle branding
  • Spa or wellness application interfaces
  • Modern architectural portfolios
  • Clean editorial layouts
  • Tech product landing pages

Suggested color roles

primary

Use #2F4F4F (Dark Slate Gray) for dominant elements, headers, or strong branding to establish a deep, cool foundation.

secondary

Apply #708090 (Slate Gray) for supporting content blocks, navigation, or dividers, offering a softer yet distinct separation.

accent

Employ #A9A9A9 (Dark Gray) for subtle highlights, interactive elements, or icons that need to stand out gently.

background

Utilize #DCDCDC (Gainsboro) as a clean, bright background for main content areas, ensuring excellent readability and a spacious feel.

text

For primary text on light backgrounds, #2F4F4F provides excellent contrast. For secondary text, #708090 works well. On dark backgrounds, use #DCDCDC.

Accessibility notes

  • Ensure #2F4F4F text on #DCDCDC background meets WCAG AA contrast for body text.
  • Be cautious with #A9A9A9 text on #B0C4DE backgrounds; test contrast thoroughly for readability.
  • Use sufficient font size or bolding when using lighter grays for text, especially for headings.
  • Maintain clear visual hierarchy by varying shades appropriately to distinguish interactive elements.

Recommended combinations

Deep & Cool

A strong, cool base with a light contrast, suitable for headers and main content areas.

#2F4F4F · #708090 · #DCDCDC

Soft Layers

Creates subtle depth for UI components or layered content panels, maintaining a gentle, refined look.

#708090 · #A9A9A9 · #B0C4DE

Airy & Clean

Ideal for a predominantly light design, using darker grays for text and a soft blue-gray accent.

#2F4F4F · #B0C4DE · #DCDCDC

CSS variables

:root {
  --urban-grey-wash-1: #2F4F4F;
  --urban-grey-wash-2: #708090;
  --urban-grey-wash-3: #B0C4DE;
  --urban-grey-wash-4: #DCDCDC;
  --urban-grey-wash-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grey-wash": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#B0C4DE",
        4: "#DCDCDC",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

cool gray paletterain washed city colorsminimalist sophisticated schememodern concrete toneselegant gray blue

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#B0C4DE
·
Color 4#DCDCDC
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
5:1AA
6.5:1AA
3.8:1AA18
2
2.2:1Fail
2.3:1Fail
3:1Fail
1.7:1Fail
3
5:1AA
2.3:1Fail
1.3:1Fail
1.3:1Fail
4
6.5:1AA
3:1Fail
1.3:1Fail
1.7:1Fail
5
3.8:1AA18
1.7:1Fail
1.3:1Fail
1.7:1Fail

Similar palettes

More like Urban Grey Wash

View all monochrome
Modernist Concrete Art
Urban Cement Edge
Urban Graphite Canvas
Urban Grid Minimal
City Grayscale View
City Loft Minimal