Back to palettes

Palette

City Rain Puddle

Captures the reflective, muted beauty of a city street after a downpour, with deep, shimmering puddles.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4682B4#6A5ACD#778899#A9A9A9

Palette guide

How to use City Rain Puddle

Overview

The "City Rain Puddle" palette captures the serene yet melancholic beauty of a city after a downpour. It features deep slate gray #2F4F4F and steel blue #4682B4, complemented by a rich slate blue-violet #6A5ACD, a soft light slate gray #778899, and a classic dark gray #A9A9A9. This combination offers designers and developers a versatile array of cool, muted tones, perfect for creating atmospheric digital experiences. The palette excels in conveying a sense of calm, depth, and urban sophistication, ideal for projects that require a thoughtful, modern, and slightly moody aesthetic.

Best used for

  • Editorial design for online magazines
  • Photography exhibition websites
  • Weather app interfaces
  • Art gallery branding
  • Luxury automotive marketing
  • Meditation and wellness apps

Suggested color roles

primary

#2F4F4F - A deep, anchoring slate gray, providing a stable foundation for backgrounds or main sections.

secondary

#4682B4 - A strong steel blue, excellent for headers, navigation, or prominent graphic elements.

accent

#6A5ACD - A unique slate blue-violet, perfect for calls-to-action, interactive states, or subtle highlights.

background

#A9A9A9 - A versatile medium gray, suitable for light-themed designs or as a neutral base.

text

#2F4F4F - For dark, readable body text on lighter backgrounds, or a crisp white on darker elements.

Accessibility notes

  • Ensure good contrast when pairing mid-tones like #778899 or #A9A9A9 with each other, especially for text.
  • #6A5ACD on #2F4F4F might require careful testing for readability, using larger font sizes for important text.
  • For body text on backgrounds like #A9A9A9, use a dark color such as #2F4F4F or black for optimal readability.
  • Consider alternative text descriptions for any color-coded information, especially given the muted nature of some hues.

Recommended combinations

Deep Reflect

Ideal for a sophisticated dark theme, layering blues and grays for depth and visual interest.

#2F4F4F · #4682B4 · #6A5ACD

Muted Urban

Excellent for lighter interfaces, using the darker gray for text and lighter grays for backgrounds/elements.

#778899 · #A9A9A9 · #2F4F4F

Puddle Shimmer

A distinctive combination for accents or graphic elements, bringing subtle color pops to a neutral base.

#4682B4 · #6A5ACD · #A9A9A9

CSS variables

:root {
  --city-rain-puddle-1: #2F4F4F;
  --city-rain-puddle-2: #4682B4;
  --city-rain-puddle-3: #6A5ACD;
  --city-rain-puddle-4: #778899;
  --city-rain-puddle-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-rain-puddle": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#778899",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

moody blue gray paletterainy city aestheticcool urban UIsophisticated dark greymuted modern colors

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#4682B4
·
Color 3#6A5ACD
·
Color 4#778899
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
1.7:1Fail
2.5:1Fail
3.8:1AA18
2
2.2:1Fail
1.3:1Fail
1.1:1Fail
1.7:1Fail
3
1.7:1Fail
1.3:1Fail
1.5:1Fail
2.3:1Fail
4
2.5:1Fail
1.1:1Fail
1.5:1Fail
1.5:1Fail
5
3.8:1AA18
1.7:1Fail
2.3:1Fail
1.5:1Fail

Similar palettes

More like City Rain Puddle

View all dark
Acid Rain Gloom
City Night Concrete
Urban Grunge Soul
Basalt Edge
Blackwater Grotto Gloom
City After Hours