Back to palettes

Palette

Grayscale City Rain

The muted urban landscape on a rainy day, evoking quiet reflections and serene stillness.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grayscale City Rain 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 Grayscale City Rain.

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

Data visualization

#696969#A9A9A9#808080#4C4C4C#B0C4DE

Palette guide

How to use Grayscale City Rain

Overview

The Grayscale City Rain palette captures the muted, reflective atmosphere of an urban landscape on a rainy day, offering a sense of quiet calm and serene stillness. This unique collection blends classic greys like #696969, #A9A9A9, and the slightly darker #4C4C4C with a notable cool, blue-tinged grey, #B0C4DE. The presence of #808080 provides a balanced mid-tone. This palette is ideal for designers and developers aiming to evoke a sophisticated, contemplative, and somewhat melancholic mood. The subtle hint of blue adds a refreshing depth that differentiates it from purely achromatic palettes, perfect for modern, atmospheric designs.

Best used for

  • Urban-themed photography portfolios
  • Abstract art or design showcases
  • Indie game interfaces or visual novels
  • Fashion or lifestyle blogs with a modern edge
  • Editorial designs requiring a sophisticated, understated look
  • Architectural visualization projects

Suggested color roles

primary

Use #4C4C4C for strong elements, titles, or primary calls-to-action, providing depth and clear focus.

secondary

Apply #696969 for supporting text, subheadings, or background elements, maintaining a cohesive urban feel.

accent

#B0C4DE serves as a distinctive, cool accent for interactive elements, highlights, or subtle graphic details, adding a touch of color.

background

#A9A9A9 or #808080 can provide a solid, neutral base, allowing other elements to stand out with subtle contrast.

text

For primary text, #4C4C4C offers excellent readability. For lighter backgrounds, a dark charcoal or black works well. On darker greys, use #A9A9A9 or a near-white.

Accessibility notes

  • Ensure #4C4C4C text on #A9A9A9 background has sufficient contrast for readability, especially for body text.
  • #B0C4DE may not have enough contrast for small text against very light greys; use it for larger elements or accents.
  • Test all color pairings to ensure they meet WCAG contrast guidelines, particularly for interactive components.
  • Consider using robust typography and clear visual hierarchy to support readability in a low-saturation palette.

Recommended combinations

Rainy Street

Excellent for main UI, combining a dark base with a lighter background and a cool, subtle accent.

#4C4C4C · #A9A9A9 · #B0C4DE

Urban Fog

Suited for content blocks and layering, creating a diffused, atmospheric depth without strong contrast.

#696969 · #808080 · #A9A9A9

Reflective Puddle

Perfect for banners, headers, or interactive cards where the cool blue-grey can provide a unique visual anchor.

#B0C4DE · #4C4C4C · #696969

CSS variables

:root {
  --grayscale-city-rain-1: #696969;
  --grayscale-city-rain-2: #A9A9A9;
  --grayscale-city-rain-3: #808080;
  --grayscale-city-rain-4: #4C4C4C;
  --grayscale-city-rain-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grayscale-city-rain": {
        1: "#696969",
        2: "#A9A9A9",
        3: "#808080",
        4: "#4C4C4C",
        5: "#B0C4DE",
      }
    }
  }
}

Related searches

urban grey color schemerainy city palettecool grey design colorsmonochromatic blue-greyatmospheric grey branding

Palette colors

Hex values

Color 1#696969
·
Color 2#A9A9A9
·
Color 3#808080
·
Color 4#4C4C4C
·
Color 5#B0C4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
1.4:1Fail
1.6:1Fail
3.1:1AA18
2
2.3:1Fail
1.7:1Fail
3.7:1AA18
1.3:1Fail
3
1.4:1Fail
1.7:1Fail
2.2:1Fail
2.2:1Fail
4
1.6:1Fail
3.7:1AA18
2.2:1Fail
4.8:1AA
5
3.1:1AA18
1.3:1Fail
2.2:1Fail
4.8:1AA

Similar palettes

More like Grayscale City Rain

View all monochrome
Rainy Window Pane
Azure Ripple Effect
Contemplative Stone Flow
Dusky Meadow Mist
Foggy Shore Serene
Grey Cloud Cascade