Palette

Rain-Kissed Pavement

Muted and cool, reflecting the damp, reflective surfaces of city streets after a gentle rain.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rain-Kissed Pavement 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 Rain-Kissed Pavement.

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

Data visualization

#3A4A5A#6C7D8E#9CAABC#C5D2DE#E2E8EE

Palette guide

How to use Rain-Kissed Pavement

Overview

The Rain-Kissed Pavement palette offers muted and cool tones, reflecting the damp, reflective surfaces of city streets after a gentle rain. This collection, featuring blue-grays like #3A4A5A, #9CAABC, and #E2E8EE, provides a calm, urban, and subtly sophisticated aesthetic. Designers and developers can utilize this palette to create clean, modern, and professional visuals. Its cool, neutral nature makes it versatile for conveying stability, innovation, or a minimalist approach. The subtle variations in gray and blue allow for depth and structure without overwhelming the user, perfect for sophisticated digital interfaces.

Best used for

Urban planning and infrastructure websites
Modern architecture and design portfolios
Tech and software company interfaces and branding
Minimalist branding and product design
Automotive industry marketing materials
Professional stationery and corporate communications

Suggested color roles

primary

#3A4A5A serves as a deep, grounding blue-gray, ideal for main headings, brand logos, or prominent UI elements.

secondary

#6C7D8E offers a versatile mid-tone, perfect for subheadings, secondary buttons, or accent panels.

accent

#9CAABC provides a lighter, subtle highlight, excellent for interactive elements, hover states, or graphic details.

background

#E2E8EE creates a soft, reflective, and neutral base, offering a clean backdrop for darker text and UI elements.

text

#3A4A5A or black provides excellent contrast and ensures optimal readability on the lighter backgrounds.

Accessibility notes

Text on #E2E8EE and #C5D2DE will require dark text like #3A4A5A or black for strong contrast and readability.
#3A4A5A and #6C7D8E offer good contrast for text when placed against lighter backgrounds, but always verify WCAG standards.
Avoid using #9CAABC for small text against #C5D2DE or #E2E8EE without thorough contrast checks.
Ensure interactive elements are clearly discernible, especially with the subtle differences between lighter shades.

Recommended combinations

Urban Depth

Ideal for creating a structured and sophisticated visual hierarchy in sections like footers or deep content blocks.

#3A4A5A · #6C7D8E · #9CAABC

Misty Reflect

Use for a smooth, subtle gradient, perfect for backgrounds, banners, or illustrations with a modern, clean aesthetic.

#9CAABC · #C5D2DE · #E2E8EE

Modern Contrast

Pair the lightest shade with the primary and secondary for a clean, professional design with good readability.

#E2E8EE · #3A4A5A · #6C7D8E

CSS variables

:root {
  --rain-kissed-pavement-1: #3A4A5A;
  --rain-kissed-pavement-2: #6C7D8E;
  --rain-kissed-pavement-3: #9CAABC;
  --rain-kissed-pavement-4: #C5D2DE;
  --rain-kissed-pavement-5: #E2E8EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rain-kissed-pavement": {
        1: "#3A4A5A",
        2: "#6C7D8E",
        3: "#9CAABC",
        4: "#C5D2DE",
        5: "#E2E8EE",
      }
    }
  }
}

Hex values

Color 1#3A4A5A

Color 2#6C7D8E

Color 3#9CAABC

Color 4#C5D2DE

Color 5#E2E8EE

Accessibility

Contrast checker

2.2:1Fail

3.9:1AA18

5.9:1AA

7.4:1AAA

2.2:1Fail

1.8:1Fail

2.8:1Fail

3.4:1AA18

3.9:1AA18

1.8:1Fail

1.5:1Fail

1.9:1Fail

5.9:1AA

2.8:1Fail

1.5:1Fail

1.2:1Fail

7.4:1AAA

3.4:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Rain-Kissed Pavement

View all cool

Overcast Coast Serene

Rain Slicker Blue

Aegean Coastline Calm

Aegean Horizon

Aegean Isle Horizon

Aegean Sea Serene