Palette

Rainy City Streets

The cool, muted tones of city streets on a rainy day, reflective and calm.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainy City Streets 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 City Streets.

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

Data visualization

#4F4F4F#6A6A6A#8F8F8F#B0C4DE#DCDCDC

Palette guide

How to use Rainy City Streets

Overview

The "Rainy City Streets" palette offers a sophisticated blend of cool greys and a subtle blue-grey, evoking the serene yet reflective mood of urban environments after a rain shower. Anchored by the solid #4F4F4F and extending to the bright #DCDCDC, this palette provides versatility for both dark and light-themed designs. The inclusion of #B0C4DE, a muted steel blue, adds a unique cool dimension, distinguishing it from a purely monochromatic grey scale. This palette is ideal for projects seeking a calm, contemporary, and slightly somber aesthetic, perfect for conveying professionalism and understated elegance.

Best used for

Corporate websites and branding
Urban photography showcase platforms
Modern architectural renderings
Digital magazine layouts
UI/UX designs for productivity apps
Lifestyle and fashion blogs with a cool aesthetic

Suggested color roles

primary

Use #4F4F4F for primary headings, navigation bars, or as a strong background in dark mode, providing a solid, dependable feel.

secondary

#6A6A6A or #8F8F8F are excellent for subheadings, secondary buttons, or content containers, offering clear hierarchy.

accent

#B0C4DE acts as a gentle, cool accent for interactive elements, data visualization, or subtle graphic detailing, adding a touch of color.

background

#DCDCDC provides a clean, neutral background for most content, ensuring high readability and a spacious layout.

text

For light backgrounds like #DCDCDC, use #4F4F4F for primary text. For darker backgrounds, #DCDCDC or a crisp white offers good contrast.

Accessibility notes

Ensure #4F4F4F text on #DCDCDC background meets WCAG AA contrast standards.
Avoid using #8F8F8F or #B0C4DE for small text on very light backgrounds like #DCDCDC due to potential readability issues.
The muted blue #B0C4DE might require careful contrast checks when used for text or interactive elements.
Always test contrast ratios for all text and interactive elements against their respective backgrounds.

Recommended combinations

Urban Serenity

Creates a balanced, modern look with strong dark text, light background, and a calming blue accent for links or highlights.

#4F4F4F · #DCDCDC · #B0C4DE

Grey Depth

Ideal for building visual depth in sections, card backgrounds, or subtle gradients, moving from dark to light grey.

#4F4F4F · #6A6A6A · #8F8F8F

Cool Accents

Use the light grey as a base, the blue-grey for secondary information or borders, and the dark grey for crisp headings.

#DCDCDC · #B0C4DE · #4F4F4F

CSS variables

:root {
  --rainy-city-streets-1: #4F4F4F;
  --rainy-city-streets-2: #6A6A6A;
  --rainy-city-streets-3: #8F8F8F;
  --rainy-city-streets-4: #B0C4DE;
  --rainy-city-streets-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-city-streets": {
        1: "#4F4F4F",
        2: "#6A6A6A",
        3: "#8F8F8F",
        4: "#B0C4DE",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#6A6A6A

Color 3#8F8F8F

Color 4#B0C4DE

Color 5#DCDCDC

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

4.6:1AA

6:1AA

1.5:1Fail

1.7:1Fail

3:1AA18

3.9:1AA18

2.5:1Fail

1.7:1Fail

1.8:1Fail

2.4:1Fail

4.6:1AA

3:1AA18

1.8:1Fail

1.3:1Fail

6:1AA

3.9:1AA18

2.4:1Fail

1.3:1Fail

Similar palettes

More like Rainy City Streets

View all Cool

Frosted Winter Evergreen

Aegean Coastline Muse

Alpine Lake Dawn

Ancient Cypress Shade

Ancient Indigo Dye

Aqua Marine Dream