Palette

Urban Rain Puddles

The sleek, reflective surfaces of a city street after a rainfall, imbued with a quiet urban mood.

Darkdark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#212121#00BFFF#778899#C0C0C0

Palette guide

How to use Urban Rain Puddles

Overview

The Urban Rain Puddles palette captures the sleek, reflective surfaces of a city street after rainfall, imbued with a quiet urban mood. It features profound darks like #212121 and #36454F, balanced with a vibrant electric blue #00BFFF, and softened by cool greys #778899 and #C0C0C0. This guide helps designers and developers craft sophisticated, moody, yet dynamic interfaces. Ideal for projects that require a strong, modern aesthetic with a touch of urban grit and a surprising pop of color, making it versatile for both dark and light themes.

Best used for

Modern tech or software company branding
Dark mode interfaces for apps and websites
Urban photography or creative portfolios
Contemporary fashion or streetwear e-commerce
Event promotions for urban music or art scenes
Dynamic data visualization dashboards

Suggested color roles

primary

#212121 - A true, deep black, serving as a powerful and sophisticated background or foundational element, especially for dark themes.

secondary

#36454F - A very dark slate grey-blue, excellent for main content areas, navigation, or as a dominant neutral in layouts.

accent

#00BFFF - A vivid, electric blue, perfect for call-to-action buttons, interactive elements, or key highlights to provide a striking contrast and energy.

background

#C0C0C0 - A crisp, light silver, providing a clean, neutral canvas for content, ensuring readability in a lighter context.

text

#C0C0C0 for light text on dark backgrounds like #212121, or dark charcoal/black on #C0C0C0.

Accessibility notes

#00BFFF is a vibrant accent; ensure it has sufficient contrast for text, especially small text, on any background. White text works well.
Text in #212121 on #C0C0C0 offers excellent readability for body copy.
#778899 text might need careful consideration on #C0C0C0 for contrast; use for larger headings or subtle details.
This palette provides strong options for high-contrast dark mode designs using #212121 with #C0C0C0 or #00BFFF.

Recommended combinations

Slick Night

Creating dramatic dark mode interfaces, striking headers, or call-to-action elements with high impact.

#212121 · #36454F · #00BFFF

Urban Mist

Clean, modern layouts, content cards, or subtle background elements in a lighter theme.

#C0C0C0 · #778899 · #36454F

Electric Rain

Interactive elements, hover states, or graphic overlays that demand attention and energy.

#36454F · #00BFFF · #C0C0C0

CSS variables

:root {
  --urban-rain-puddles-1: #36454F;
  --urban-rain-puddles-2: #212121;
  --urban-rain-puddles-3: #00BFFF;
  --urban-rain-puddles-4: #778899;
  --urban-rain-puddles-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-puddles": {
        1: "#36454F",
        2: "#212121",
        3: "#00BFFF",
        4: "#778899",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#212121

Color 3#00BFFF

Color 4#778899

Color 5#C0C0C0

Accessibility

Contrast checker

1.6:1Fail

4.7:1AA

2.7:1Fail

5.4:1AA

1.6:1Fail

7.6:1AAA

4.4:1AA18

8.9:1AAA

4.7:1AA

7.6:1AAA

1.7:1Fail

1.2:1Fail

2.7:1Fail

4.4:1AA18

1.7:1Fail

2:1Fail

5.4:1AA

8.9:1AAA

1.2:1Fail

2:1Fail

Similar palettes

More like Urban Rain Puddles

View all Dark

Rainy City Nights

Midnight Ocean Depths

Night City Gleam

Arid Dusk Hues

City Puddle Reflection

Dusky Harbor Twilight