Back to palettes

Palette

Urban Puddle Reflection

Capturing the subdued, reflective beauty of city streets after a gentle rainfall.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#708090#2F4F4F#C0C0C0#4682B4

Palette guide

How to use Urban Puddle Reflection

Overview

The Urban Puddle Reflection palette captures the subdued, reflective beauty of city streets after rainfall. This cool, minimalist collection features deep slate #2F4F4F, versatile greys like #708090 and #A9A9A9, a bright #C0C0C0, and a striking steel blue #4682B4. It's ideal for designers and developers aiming for a sophisticated, understated aesthetic that conveys calm and modernity. The palette offers excellent depth and contrast, perfect for creating clean, professional interfaces, or evocative branding that speaks of urban tranquility and subtle elegance.

Best used for

  • Minimalist web design and app interfaces
  • Modern corporate branding and presentations
  • Photography portfolios (especially urban or landscape)
  • Architectural and interior design visualizations
  • Sustainable or eco-conscious product branding
  • Reflective art installations or digital galleries

Suggested color roles

primary

#2F4F4F - A deep, dark slate grey with a hint of green, excellent for foundational elements, dark mode backgrounds, or strong headings.

secondary

#708090 - A cool, medium slate grey, versatile for main content areas, navigation, or as a primary neutral in layouts.

accent

#4682B4 - A clear, striking steel blue, perfect for call-to-action buttons, interactive elements, or key highlights to add a pop of cool color.

background

#C0C0C0 - A bright, light silver, providing a clean, airy canvas for content, ensuring high readability and a fresh feel.

text

Dark charcoal or black on #C0C0C0, or #C0C0C0 for light text on dark backgrounds like #2F4F4F.

Accessibility notes

  • Text in #2F4F4F on #C0C0C0 provides excellent contrast for body copy.
  • Ensure #708090 text has sufficient contrast on #C0C0C0, especially for smaller fonts.
  • #4682B4 offers good visibility as an accent, but use it for larger text or interactive elements to ensure readability.
  • Avoid using #A9A9A9 for small text on #C0C0C0 as contrast may be insufficient.

Recommended combinations

Rainy Street

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

#2F4F4F · #708090 · #C0C0C0

Clear Reflection

Light and airy layouts, prominent call-to-actions, or highlighting key information.

#C0C0C0 · #A9A9A9 · #4682B4

Urban Depth

Subtle branding elements, background patterns, or accenting important data points.

#708090 · #2F4F4F · #4682B4

CSS variables

:root {
  --urban-puddle-reflection-1: #A9A9A9;
  --urban-puddle-reflection-2: #708090;
  --urban-puddle-reflection-3: #2F4F4F;
  --urban-puddle-reflection-4: #C0C0C0;
  --urban-puddle-reflection-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-puddle-reflection": {
        1: "#A9A9A9",
        2: "#708090",
        3: "#2F4F4F",
        4: "#C0C0C0",
        5: "#4682B4",
      }
    }
  }
}

Related searches

cool grey blue paletteminimalist urban designrainy city color schemeconcrete steel colorsmodern professional palette

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#708090
·
Color 3#2F4F4F
·
Color 4#C0C0C0
·
Color 5#4682B4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.8:1AA18
1.3:1Fail
1.7:1Fail
2
1.7:1Fail
2.2:1Fail
2.2:1Fail
1:1Fail
3
3.8:1AA18
2.2:1Fail
4.9:1AA
2.2:1Fail
4
1.3:1Fail
2.2:1Fail
4.9:1AA
2.3:1Fail
5
1.7:1Fail
1:1Fail
2.2:1Fail
2.3:1Fail

Similar palettes

More like Urban Puddle Reflection

View all cool
Metropolitan Dusk
Pavement Reflective Glow
Urban Rain Slicker
Urban Rain Slicker
Urban Steel Echo
Urban Teal Grunge