Back to palettes

Palette

Pavement Reflective Glow

Cool, muted blues and greys, mirroring the subtle reflections and slick surfaces of a city after a rain shower.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pavement Reflective Glow 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 Pavement Reflective Glow.

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

Data visualization

#4F5D75#7D8CA2#AABBD0#D5E1EF#2C3E50

Palette guide

How to use Pavement Reflective Glow

Overview

The Pavement Reflective Glow palette captures the serene beauty of a city street after rain, offering cool, muted blues and greys perfect for modern, sophisticated designs. Featuring the deep blue-grey of #4F5D75 and the lighter #7D8CA2, this collection provides a calming, contemplative foundation. Developers can leverage these colors to craft sleek user interfaces for corporate sites, tech products, or elegant lifestyle brands. The very light #D5E1EF offers an airy, almost white base, while the dark #2C3E50 provides a strong anchor, ensuring a cohesive and polished visual experience with a subtle, reflective quality.

Best used for

  • Corporate websites and dashboards
  • Tech product interfaces
  • Elegant lifestyle and fashion brands
  • Automotive or luxury vehicle showcases
  • Architectural visualization
  • Serene meditation apps

Suggested color roles

primary

A deep, muted blue-grey, excellent for main content areas, headers, and primary branding: #4F5D75.

secondary

A lighter, versatile blue-grey, suitable for secondary sections, navigation, or subtle backgrounds: #7D8CA2.

accent

A very dark navy, offering a strong, sophisticated contrast for important call-to-actions or impactful icons: #2C3E50.

background

A very light, cool off-white that provides a clean, airy, and easily readable canvas: #D5E1EF.

text

This deep navy offers excellent contrast and readability on lighter backgrounds like #D5E1EF or #AABBD0: #2C3E50.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #7D8CA2 on #AABBD0 (aim for darker text).
  • White text on #2C3E50 or #4F5D75 will provide excellent contrast.
  • The very light #D5E1EF is an ideal background for dark text.
  • For interactive elements, ensure clear visual feedback, perhaps by darkening on hover or adding a subtle glow.

Recommended combinations

Cool Core

A strong combination for main branding, text, and clean, sophisticated layouts.

#4F5D75 · #D5E1EF · #2C3E50

Reflective Layers

Ideal for creating visual depth, subtle background patterns, or layered content blocks.

#7D8CA2 · #AABBD0 · #D5E1EF

Deep Contrast

Use for sections requiring more gravitas, such as footers, emphasized content, or bold headlines.

#2C3E50 · #4F5D75 · #AABBD0

CSS variables

:root {
  --pavement-reflective-glow-1: #4F5D75;
  --pavement-reflective-glow-2: #7D8CA2;
  --pavement-reflective-glow-3: #AABBD0;
  --pavement-reflective-glow-4: #D5E1EF;
  --pavement-reflective-glow-5: #2C3E50;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pavement-reflective-glow": {
        1: "#4F5D75",
        2: "#7D8CA2",
        3: "#AABBD0",
        4: "#D5E1EF",
        5: "#2C3E50",
      }
    }
  }
}

Related searches

cool grey blue color paletteurban reflective UIsophisticated cool tonesrain inspired color schemecorporate web design colors

Palette colors

Hex values

Color 1#4F5D75
·
Color 2#7D8CA2
·
Color 3#AABBD0
·
Color 4#D5E1EF
·
Color 5#2C3E50
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.4:1AA18
5:1AA
1.7:1Fail
2
1.9:1Fail
1.7:1Fail
2.6:1Fail
3.2:1AA18
3
3.4:1AA18
1.7:1Fail
1.5:1Fail
5.6:1AA
4
5:1AA
2.6:1Fail
1.5:1Fail
8.3:1AAA
5
1.7:1Fail
3.2:1AA18
5.6:1AA
8.3:1AAA

Similar palettes

More like Pavement Reflective Glow

View all cool