Back to palettes

Palette

Urban Rain Glimmer

Reflects the subtle shimmer of a wet city street at dusk, with cool, damp tones.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#7C888E#B6D1D9#E0E7EB#2F3B42

Palette guide

How to use Urban Rain Glimmer

Overview

The Urban Rain Glimmer palette evokes the subtle shimmer of a wet city street at dusk, combining cool, damp tones with refined elegance. From the deep, grounding #2F3B42 and versatile #4A4A4A, it progresses through the serene #7C888E and #B6D1D9 to the airy #E0E7EB. This guide empowers designers and developers to create clean, modern, and understated interfaces. It's perfectly suited for projects demanding a sophisticated, minimalist aesthetic that conveys calm, clarity, and a subtle touch of urban chic without being overtly dark or moody.

Best used for

  • Minimalist web and mobile application design
  • Contemporary corporate or professional branding
  • Clean and modern e-commerce platforms
  • Architectural portfolios and urban planning visuals
  • Digital publishing and editorial design
  • High-tech product interfaces with a soft touch

Suggested color roles

primary

#2F3B42 - A deep, cool charcoal-blue, ideal for foundational elements, headers, or backgrounds in a sophisticated dark mode.

secondary

#4A4A4A - A balanced, dark grey, perfect for main content sections, navigation, or as a dominant neutral in layouts.

accent

#7C888E - A soft, cool mid-grey, excellent for subtle interactive elements, secondary call-to-actions, or graphic details that need gentle emphasis.

background

#E0E7EB - A very light, almost white grey-blue, providing a clean, expansive backdrop for content, enhancing readability.

text

Dark charcoal or black on #E0E7EB, or #E0E7EB for light text on dark backgrounds like #2F3B42.

Accessibility notes

  • Text in #2F3B42 on #E0E7EB ensures excellent readability for body copy.
  • #4A4A4A text on #E0E7EB provides good contrast for headings and important information.
  • Be cautious with #B6D1D9 on #E0E7EB for small text, as contrast might be low; use for larger elements or backgrounds.
  • Use #7C888E for interactive elements to ensure clear distinction against lighter backgrounds.

Recommended combinations

Dusk Street

Creating a dark, sophisticated theme for headers, footers, and main content blocks.

#2F3B42 · #4A4A4A · #E0E7EB

Clean Glimmer

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

#E0E7EB · #B6D1D9 · #7C888E

Urban Reflection

Subtle branding accents, secondary navigation, or data visualization elements.

#4A4A4A · #7C888E · #B6D1D9

CSS variables

:root {
  --urban-rain-glimmer-1: #4A4A4A;
  --urban-rain-glimmer-2: #7C888E;
  --urban-rain-glimmer-3: #B6D1D9;
  --urban-rain-glimmer-4: #E0E7EB;
  --urban-rain-glimmer-5: #2F3B42;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-glimmer": {
        1: "#4A4A4A",
        2: "#7C888E",
        3: "#B6D1D9",
        4: "#E0E7EB",
        5: "#2F3B42",
      }
    }
  }
}

Related searches

minimalist grey blue palettemodern urban neutral colorsclean sophisticated uiwet street color schemesubtle professional design

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#7C888E
·
Color 3#B6D1D9
·
Color 4#E0E7EB
·
Color 5#2F3B42
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
5.5:1AA
7.1:1AAA
1.3:1Fail
2
2.4:1Fail
2.3:1Fail
2.9:1Fail
3.2:1AA18
3
5.5:1AA
2.3:1Fail
1.3:1Fail
7.2:1AAA
4
7.1:1AAA
2.9:1Fail
1.3:1Fail
9.2:1AAA
5
1.3:1Fail
3.2:1AA18
7.2:1AAA
9.2:1AAA

Similar palettes

More like Urban Rain Glimmer

View all neutral