Palette

City Puddle Reflection

A moody urban palette capturing the muted tones and reflective surfaces of a city in the rain.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C1C1C#333333#4D4D4D#2F4F4F#B0C4DE

Palette guide

How to use City Puddle Reflection

Overview

The "City Puddle Reflection" palette captures the moody, reflective essence of an urban environment after rain. It features a range of deep grays, from the near-black #1C1C1C to the mid-tone #4D4D4D, complemented by a dark slate gray #2F4F4F and a surprising cool light blue #B0C4DE. This combination offers designers and developers a sophisticated yet somber toolkit for creating elegant, dark-themed interfaces or atmospheric digital content. The muted tones and subtle blue hint evoke depth and quiet contemplation, making it perfect for projects requiring a refined, introspective, or minimalist aesthetic with a touch of urban grit.

Best used for

Dark mode web applications
Photography portfolio sites
Luxury goods branding
Architectural firm websites
Environmental advocacy platforms
Documentary film graphics

Suggested color roles

primary

#1C1C1C - The foundational deep black, providing a strong, elegant backdrop for content.

secondary

#333333 - A slightly lighter dark gray, offering subtle contrast for secondary panels or text.

accent

#B0C4DE - The cool light blue, serving as a striking yet subtle accent for interactive elements or key information.

background

#1C1C1C - Ideal for dark, immersive user interfaces or sophisticated brand presentations.

text

#B0C4DE - For headlines or important text on dark backgrounds, or a crisp white for general readability.

Accessibility notes

Ensure #B0C4DE has sufficient contrast against the darker grays, especially for body text; it's best for accents or larger text.
Use a pure white or very light gray (e.g., #EEEEEE) for body text on #1C1C1C or #333333 to ensure readability.
Avoid using #4D4D4D for text on #333333 as contrast might be too low.
Test button states and interactive elements to ensure they stand out clearly against the muted background tones.

Recommended combinations

Deep Urban

Perfect for creating layered dark mode interfaces or sophisticated, monochrome layouts.

#1C1C1C · #333333 · #4D4D4D

Puddle Glimmer

Use for highlighting important data or interactive elements against a deep, muted background.

#1C1C1C · #2F4F4F · #B0C4DE

Moody Contrast

A softer dark theme, where the light blue provides a gentle pop of color for accents.

#333333 · #4D4D4D · #B0C4DE

CSS variables

:root {
  --city-puddle-reflection-1: #1C1C1C;
  --city-puddle-reflection-2: #333333;
  --city-puddle-reflection-3: #4D4D4D;
  --city-puddle-reflection-4: #2F4F4F;
  --city-puddle-reflection-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-puddle-reflection": {
        1: "#1C1C1C",
        2: "#333333",
        3: "#4D4D4D",
        4: "#2F4F4F",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#333333

Color 3#4D4D4D

Color 4#2F4F4F

Color 5#B0C4DE

Accessibility

Contrast checker

1.3:1Fail

2:1Fail

1.9:1Fail

9.6:1AAA

1.3:1Fail

1.5:1Fail

1.4:1Fail

7.1:1AAA

2:1Fail

1.5:1Fail

1.1:1Fail

4.7:1AA