Back to palettes

Palette

Rainy Pavement Gray

The muted, reflective hues of a city pavement on a rainy day, with soft, cool tones.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainy Pavement Gray 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 Rainy Pavement Gray.

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

Data visualization

#4E5968#717A88#97A0AA#BBC4CB#D9E0E6

Palette guide

How to use Rainy Pavement Gray

Overview

The Rainy Pavement Gray palette offers a refined, cool monochrome gradient, perfectly encapsulating the subtle, diffused light of a rainy city street. From the deep, anchoring #4E5968 to the airy #D9E0E6, this collection of cool grays provides a sophisticated and understated foundation for any design. Designers and developers will find these hues excellent for creating clean, minimalist UIs, architectural renders, or branding that conveys stability and quiet elegance. The gradual shift through #717A88, #97A0AA, and #BBC4CB allows for excellent visual hierarchy and a sense of calm, reflective depth, making it ideal for professional and serene digital environments.

Best used for

  • Minimalist web design
  • Architectural visualizations
  • Corporate identity and branding
  • Clean mobile app interfaces
  • Editorial layouts for serious topics
  • Product design for tech gadgets

Suggested color roles

primary

#4E5968 - A strong, dark cool gray, serving as a solid anchor for backgrounds, navigation, or headings.

secondary

#717A88 - A versatile mid-tone gray, ideal for secondary content blocks, borders, or subtle distinctions.

accent

#97A0AA - A lighter, gentle gray that can be used for interactive elements, hover states, or to provide a subtle lift.

background

#D9E0E6 - The lightest shade, providing a clean, bright, and open canvas for content.

text

#4E5968 - Offers excellent readability on lighter backgrounds like #D9E0E6, ensuring clear and crisp text.

Accessibility notes

  • Ensure sufficient contrast when using adjacent grays, especially #97A0AA on #BBC4CB, for readability.
  • The darkest shade, #4E5968, provides strong contrast against #D9E0E6 for body text.
  • Avoid using lighter grays as text on similarly light backgrounds; always check contrast ratios.
  • Consider using a stark black or pure white for critical text elements if the palette's grays don't meet strict contrast guidelines.

Recommended combinations

Core Contrast

Establishes strong visual hierarchy with dark text on light backgrounds, complemented by a mid-tone for elements.

#4E5968 · #D9E0E6 · #717A88

Subtle Layers

Creates smooth, almost imperceptible gradients and layering effects for a refined, understated look.

#717A88 · #97A0AA · #BBC4CB

Grounded Header

Perfect for headers and footers, using the darkest shade for prominence and lighter shades for secondary information.

#4E5968 · #D9E0E6 · #97A0AA

CSS variables

:root {
  --rainy-pavement-gray-1: #4E5968;
  --rainy-pavement-gray-2: #717A88;
  --rainy-pavement-gray-3: #97A0AA;
  --rainy-pavement-gray-4: #BBC4CB;
  --rainy-pavement-gray-5: #D9E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-pavement-gray": {
        1: "#4E5968",
        2: "#717A88",
        3: "#97A0AA",
        4: "#BBC4CB",
        5: "#D9E0E6",
      }
    }
  }
}

Related searches

cool gray palettemonochromatic urban colorsrainy day design paletteminimalist professional colorssubtle grey UI scheme

Palette colors

Hex values

Color 1#4E5968
·
Color 2#717A88
·
Color 3#97A0AA
·
Color 4#BBC4CB
·
Color 5#D9E0E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4:1AA18
5.3:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.3:1AA18
3
2.7:1Fail
1.6:1Fail
1.5:1Fail
2:1Fail
4
4:1AA18
2.5:1Fail
1.5:1Fail
1.3:1Fail
5
5.3:1AA
3.3:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Rainy Pavement Gray

View all monochrome
Rainy Day Grey
Ancient Forest Myst
Dusky Meadow Mist
Foggy Mountain Ascent
Ink Wash Serenity
Lunar Moth Serene