Back to palettes

Palette

Urban Rain Reflection

Captures the quiet, introspective mood of a city street on a rainy day, reflecting muted lights and greys.

neutraldark5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Rain Reflection 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 Urban Rain Reflection.

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

Data visualization

#4F4F4F#7F7F7F#BFBFBF#8C9DB0#454B4C

Palette guide

How to use Urban Rain Reflection

Overview

The Urban Rain Reflection palette captures the quiet, introspective mood of a city street on a rainy day, reflecting muted lights and greys. Dominated by versatile greys like #4F4F4F, #7F7F7F, and #BFBFBF, it introduces a subtle cool blue-grey in #8C9DB0, anchored by the deep #454B4C. This guide assists designers and developers in creating sophisticated, understated, and timeless interfaces. It's ideal for projects that require a minimalist, elegant, and calm aesthetic, perfect for conveying professionalism, introspection, or a refined urban sensibility.

Best used for

  • Minimalist web design and sophisticated app interfaces
  • Corporate branding and professional presentations
  • Photography and art portfolios with a subdued aesthetic
  • Architectural and interior design visualizations
  • Luxury product packaging or high-end retail websites
  • Editorial design for modern publications

Suggested color roles

primary

#454B4C - A deep, cool charcoal-grey, perfect for foundational elements, dark mode backgrounds, or strong, elegant headings.

secondary

#4F4F4F - A balanced, dark grey, suitable for main content areas, navigation, or as a dominant neutral in a sleek layout.

accent

#7F7F7F - A versatile mid-grey, excellent for subtle interactive elements, secondary text, or graphic details that need gentle emphasis.

background

#BFBFBF - A light, soft silver-grey, providing a clean, expansive backdrop for content, enhancing readability and a calm feel.

text

Dark charcoal or black on #BFBFBF, or #BFBFBF for light text on dark backgrounds like #454B4C.

Accessibility notes

  • Text in #454B4C on #BFBFBF offers excellent contrast for body copy.
  • Ensure #4F4F4F text on #BFBFBF provides good readability for headings.
  • Be cautious using #7F7F7F or #8C9DB0 for small text on #BFBFBF; best for larger elements or accents.
  • This palette excels at creating harmonious contrast within a subdued, monochromatic scheme.

Recommended combinations

Muted Urban

Creating a sophisticated dark theme, main content blocks, or professional dashboards with subtle depth.

#454B4C · #4F4F4F · #BFBFBF

Soft Reflection

Light and airy interfaces, content cards, or subtle background patterns for a clean, minimalist feel.

#BFBFBF · #7F7F7F · #8C9DB0

Rainy Grey

Subtle branding accents, secondary navigation, or data visualization elements in a cool, refined tone.

#4F4F4F · #8C9DB0 · #7F7F7F

CSS variables

:root {
  --urban-rain-reflection-1: #4F4F4F;
  --urban-rain-reflection-2: #7F7F7F;
  --urban-rain-reflection-3: #BFBFBF;
  --urban-rain-reflection-4: #8C9DB0;
  --urban-rain-reflection-5: #454B4C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-reflection": {
        1: "#4F4F4F",
        2: "#7F7F7F",
        3: "#BFBFBF",
        4: "#8C9DB0",
        5: "#454B4C",
      }
    }
  }
}

Related searches

muted grey paletteminimalist rainy citysophisticated neutral colorscool urban grey designintrospective dark palette

Palette colors

Hex values

Color 1#4F4F4F
·
Color 2#7F7F7F
·
Color 3#BFBFBF
·
Color 4#8C9DB0
·
Color 5#454B4C
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.5:1AA18
3:1Fail
1.1:1Fail
2
2:1Fail
2.2:1Fail
1.4:1Fail
2.2:1Fail
3
4.5:1AA18
2.2:1Fail
1.5:1Fail
4.8:1AA
4
3:1Fail
1.4:1Fail
1.5:1Fail
3.2:1AA18
5
1.1:1Fail
2.2:1Fail
4.8:1AA
3.2:1AA18

Similar palettes

More like Urban Rain Reflection

View all neutral
Urban Grime Blues
Urban Alley Grit
Urban Canyon Rust
Gargoyle Grey
Haunted Library Pages
Moonlit Canyon Path