Back to palettes

Palette

Rainy City Reflections

Soft, muted grays and blues reflecting the damp streets and diffused lights of a city after rain.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5B6B7C#8C99A8#BFCDD9#3A4652#A6B4C2

Palette guide

How to use Rainy City Reflections

Overview

The Rainy City Reflections palette gracefully captures the calm, diffused light and damp streets of a city after rain with soft, muted grays and blues. Featuring the deep #3A4652, it flows into the versatile mid-tones of #5B6B7C, #8C99A8, and #A6B4C2, culminating in the serene #BFCDD9. This collection is ideal for designers and developers aiming for an elegant, contemplative, and understated aesthetic. Its gentle yet sophisticated mood is perfectly suited for projects requiring a sense of calm, modernity, and subtle depth, from refined web designs to interior mood boards.

Best used for

  • Elegant web design and portfolio sites
  • Interior decor mood boards and renders
  • Sophisticated fashion and lifestyle branding
  • Contemplative art and photography projects
  • Minimalist product design and packaging
  • Calm and serene digital interfaces

Suggested color roles

primary

Anchor your design with #3A4652 for main backgrounds, headers, or dominant elements, providing deep, calm stability.

secondary

Employ #5B6B7C for supporting sections, navigation, or content blocks, creating a cohesive and harmonious flow.

accent

Utilize #A6B4C2 for subtle highlights, interactive states, or graphic details to introduce a gentle, diffused light effect.

background

Apply #8C99A8 as a versatile mid-tone background for content areas, ensuring excellent readability for darker text and an airy feel.

text

For primary text on dark backgrounds, #BFCDD9 offers superior legibility and a soft, integrated look within the palette.

Accessibility notes

  • Ensure sufficient contrast for all text; #BFCDD9 is ideal for text on #3A4652 or #5B6B7C.
  • Avoid using #A6B4C2 for small body text on #8C99A8, as contrast might be insufficient for readability.
  • Verify that interactive elements have distinct hover/focus states with adequate contrast for accessibility.
  • Consider using a slightly bolder font weight for lighter text on mid-tone backgrounds to improve legibility.

Recommended combinations

Calm Depths

Creates a layered, deep urban feel, ideal for immersive backgrounds or structuring distinct sections in a calm interface.

#3A4652 · #5B6B7C · #8C99A8

Soft Reflections

Evokes the subtle reflections and diffused light of wet city surfaces, perfect for main content areas or soft gradients.

#8C99A8 · #A6B4C2 · #BFCDD9

Muted Contrast

A balanced triad for clear visual hierarchy, combining a deep base with bright, legible text and a refined accent.

#3A4652 · #BFCDD9 · #5B6B7C

CSS variables

:root {
  --rainy-city-reflections-3-1: #5B6B7C;
  --rainy-city-reflections-3-2: #8C99A8;
  --rainy-city-reflections-3-3: #BFCDD9;
  --rainy-city-reflections-3-4: #3A4652;
  --rainy-city-reflections-3-5: #A6B4C2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-city-reflections-3": {
        1: "#5B6B7C",
        2: "#8C99A8",
        3: "#BFCDD9",
        4: "#3A4652",
        5: "#A6B4C2",
      }
    }
  }
}

Related searches

muted blue grey palettecalm city colorsrainy street reflectionssubtle cool toneselegant urban design

Palette colors

Hex values

Color 1#5B6B7C
·
Color 2#8C99A8
·
Color 3#BFCDD9
·
Color 4#3A4652
·
Color 5#A6B4C2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.4:1AA18
1.8:1Fail
2.6:1Fail
2
1.9:1Fail
1.8:1Fail
3.3:1AA18
1.4:1Fail
3
3.4:1AA18
1.8:1Fail
5.9:1AA
1.3:1Fail
4
1.8:1Fail
3.3:1AA18
5.9:1AA
4.6:1AA
5
2.6:1Fail
1.4:1Fail
1.3:1Fail
4.6:1AA

Similar palettes

More like Rainy City Reflections

View all cool
City Puddle Glimmer
Misty Sky Drizzle
Rainy Cobblestone Street
Alpine Mist
Arctic Tundra Bloom
Cherry Blossom Rain