Back to palettes

Palette

Puddle Reflection Grey

Cool, desaturated tones mirroring reflections in urban puddles on a cloudy day.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DCE0E6#A8B4BF#7A8C9B#4A5D6B#2D3E4C

Palette guide

How to use Puddle Reflection Grey

Overview

The "Puddle Reflection Grey" palette offers a sophisticated range of cool, desaturated greys and blues, reminiscent of urban landscapes after a rain shower. Featuring serene tones like the light #DCE0E6, a balanced mid-grey #A8B4BF, and deeper, moody shades such as #7A8C9B and the profound #2D3E4C, this collection brings a sense of calm and modern elegance. Designers can use these hex codes for minimalist, corporate, or tech-oriented interfaces that require a refined and professional aesthetic. Developers will find this palette excellent for creating clean UIs, dashboards, or dark modes, ensuring a consistent and unobtrusive user experience.

Best used for

  • Corporate websites and branding
  • Tech product interfaces
  • Minimalist app designs
  • Urban photography portfolios
  • Professional service websites
  • Dark mode UI themes

Suggested color roles

primary

#4A5D6B - A deep, cool grey-blue, ideal for main navigation, prominent headings, or background elements that require a strong, stable presence.

secondary

#7A8C9B - A balanced mid-tone grey-blue, effective for secondary content blocks, borders, or as a subtle background accent.

accent

#A8B4BF - A lighter, soft grey-blue, suitable for subtle highlights, interactive elements that don't need to pop aggressively, or background for focused content.

background

#DCE0E6 - A very light, airy cool grey, perfect for clean main page backgrounds, providing ample space for content and excellent readability.

text

#2D3E4C - The darkest shade in the palette, offering excellent contrast and readability for body text against the lighter backgrounds like #DCE0E6 or #A8B4BF.

Accessibility notes

  • Ensure #2D3E4C is used for body text on #DCE0E6 or #A8B4BF backgrounds for optimal readability.
  • Avoid using lighter greys like #A8B4BF for small text against #DCE0E6 without checking WCAG AA standards.
  • Contrast between adjacent mid-tones like #A8B4BF and #7A8C9B might be subtle; use for decorative elements rather than critical information.
  • For dark mode, pair the lightest colors (#DCE0E6) with the darkest (#2D3E4C) for text to maximize contrast.

Recommended combinations

Urban Depth

Excellent for creating dark mode interfaces or sophisticated data visualizations where depth and clarity are key.

#2D3E4C · #7A8C9B · #DCE0E6

Clean Professional

Ideal for corporate websites or minimalist apps, providing a clean background, strong headings, and subtle secondary elements.

#DCE0E6 · #4A5D6B · #A8B4BF

Subtle Contrast

Use for layered UI components, card designs, or subtle gradients where smooth transitions between cool greys are desired.

#A8B4BF · #7A8C9B · #4A5D6B

CSS variables

:root {
  --puddle-reflection-grey-1: #DCE0E6;
  --puddle-reflection-grey-2: #A8B4BF;
  --puddle-reflection-grey-3: #7A8C9B;
  --puddle-reflection-grey-4: #4A5D6B;
  --puddle-reflection-grey-5: #2D3E4C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "puddle-reflection-grey": {
        1: "#DCE0E6",
        2: "#A8B4BF",
        3: "#7A8C9B",
        4: "#4A5D6B",
        5: "#2D3E4C",
      }
    }
  }
}

Related searches

cool grey paletteurban color schememinimalist grey blueprofessional UI colorsdark mode grey palette

Palette colors

Hex values

Color 1#DCE0E6
·
Color 2#A8B4BF
·
Color 3#7A8C9B
·
Color 4#4A5D6B
·
Color 5#2D3E4C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
5.2:1AA
8.3:1AAA
2
1.6:1Fail
1.6:1Fail
3.2:1AA18
5.2:1AA
3
2.6:1Fail
1.6:1Fail
2:1Fail
3.2:1AA18
4
5.2:1AA
3.2:1AA18
2:1Fail
1.6:1Fail
5
8.3:1AAA
5.2:1AA
3.2:1AA18
1.6:1Fail

Similar palettes

More like Puddle Reflection Grey

View all neutral
Cityscape Rain Wash
Urban Rain Wash
Arctic Fox Fur
City Twilight Glow
Coastal Stone Haze
Coastal Stone Hearth