Palette

Rainy Pavement Gleam

Muted, cool tones reflecting the shimmering surfaces and subdued light of a city street after rain.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A5A6D#7D8CB0#A6B0C7#D4DBE0#2C3A4F

Palette guide

How to use Rainy Pavement Gleam

Overview

The Rainy Pavement Gleam palette captures the serene, reflective mood of a city street after rain, offering a sophisticated range of cool grays and muted blues. Starting with the deep, anchoring #2C3A4F, it transitions through mid-tones like #4A5A6D and #7D8CB0, culminating in the soft, luminous #D4DBE0. This palette is incredibly versatile for designs needing a calm, modern, and understated elegance. Developers and designers can use it to create clean UIs, background textures, or brand identities that convey stability and a quiet, contemplative atmosphere, reminiscent of wet urban surfaces shimmering under a diffused sky.

Best used for

Corporate and professional websites
Architectural and design portfolios
Calm and minimalist app UIs
Editorial design for sophisticated content
Luxury brand packaging
Urban lifestyle blogs

Suggested color roles

primary

#2C3A4F - A deep, cool blue-gray, excellent for robust backgrounds, primary navigation, or strong brand anchors.

secondary

#4A5A6D - A versatile mid-tone cool gray, perfect for secondary content areas, panels, or subtle data visualization.

accent

#7D8CB0 - A soft, slightly lighter blue-gray that can be used for interactive elements, hover states, or a gentle highlight.

background

#D4DBE0 - A very light, airy gray, ideal for clean, open layouts that need a bright yet muted base.

text

#2C3A4F - This deep blue-gray offers excellent readability on lighter backgrounds like #D4DBE0, or a classic charcoal for contrast.

Accessibility notes

Ensure sufficient contrast when using lighter tones like #A6B0C7 or #D4DBE0 for text on other light backgrounds.
#2C3A4F provides strong contrast for text on #D4DBE0, ensuring high readability.
Avoid using #7D8CB0 as text on #A6B0C7 without careful contrast checking, especially for small font sizes.
This palette generally offers good contrast potential between its darkest and lightest shades for accessible design.

Recommended combinations

Urban Serenity

Creates a sophisticated, clean look, ideal for professional websites or minimalist interfaces needing depth and clarity.

#2C3A4F · #4A5A6D · #D4DBE0

Reflective Layers

Provides subtle visual hierarchy and smooth transitions, perfect for layered UI elements or background textures.

#4A5A6D · #7D8CB0 · #A6B0C7

Gleaming Highlight

Uses the darkest and lightest tones for strong contrast, with a mid-tone for accents or secondary information.

#2C3A4F · #D4DBE0 · #7D8CB0

CSS variables

:root {
  --rainy-pavement-gleam-1: #4A5A6D;
  --rainy-pavement-gleam-2: #7D8CB0;
  --rainy-pavement-gleam-3: #A6B0C7;
  --rainy-pavement-gleam-4: #D4DBE0;
  --rainy-pavement-gleam-5: #2C3A4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-pavement-gleam": {
        1: "#4A5A6D",
        2: "#7D8CB0",
        3: "#A6B0C7",
        4: "#D4DBE0",
        5: "#2C3A4F",
      }
    }
  }
}

Hex values

Color 1#4A5A6D

Color 2#7D8CB0

Color 3#A6B0C7

Color 4#D4DBE0

Color 5#2C3A4F

Accessibility

Contrast checker

2.1:1Fail

3.2:1AA18

5:1AA

1.6:1Fail

2.1:1Fail

1.5:1Fail

2.4:1Fail

3.4:1AA18

3.2:1AA18

1.5:1Fail

1.6:1Fail

5.3:1AA

5:1AA

2.4:1Fail

1.6:1Fail

8.2:1AAA

1.6:1Fail

3.4:1AA18

5.3:1AA

8.2:1AAA

Similar palettes

More like Rainy Pavement Gleam

Rainy Pavement Gleam

See it in context.

Ready when you are.

Built with Rainy Pavement Gleam.

How to use Rainy Pavement Gleam

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Urban Serenity

Reflective Layers

Gleaming Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Rainy Pavement Gleam