Palette

City Puddle Glimmer

The glistening, blurred lights of a city at night, reflecting off wet pavements after a gentle rain.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F2E3A#3A4F60#6E859E#B2C2D0#DCE4EA

Palette guide

How to use City Puddle Glimmer

Overview

The "City Puddle Glimmer" palette evokes the serene yet reflective mood of an urban landscape after rain, where city lights subtly shimmer on wet surfaces. This cool, sophisticated gradient ranges from deep, mysterious blue-black #1F2E3A to light, airy gray-blue #DCE4EA. Intermediate shades like #3A4F60, #6E859E, and #B2C2D0 provide smooth transitions, making it ideal for creating depth and visual interest. Designers and developers can utilize this palette for elegant, calming interfaces, sophisticated branding, or any project requiring a modern, understated aesthetic that conveys tranquility and depth, perfect for a high-end feel.

Best used for

Corporate website design
Luxury brand identity
App interfaces (dark mode friendly)
Architectural visualization
Editorial layouts
Photography portfolios

Suggested color roles

primary

#1F2E3A - A deep, anchoring blue-black, excellent for main backgrounds or sophisticated headers.

secondary

#3A4F60 - A rich, cool gray-blue, providing depth for secondary panels or navigation.

accent

#6E859E - A mid-tone gray-blue, perfect for subtle highlights, interactive states, or graphic elements.

background

#DCE4EA - A very light, airy gray-blue, serving as a clean, expansive canvas for content.

text

#1F2E3A - For primary body text on light backgrounds, or a crisp white on darker elements.

Accessibility notes

Ensure sufficient contrast when using lighter shades like #B2C2D0 or #DCE4EA for text, especially on white or near-white backgrounds.
The darker shades provide good contrast for light text, but monitor readability for very small font sizes.
Use a tool to check contrast ratios between all text and background color pairs, particularly with #6E859E on #3A4F60.
Consider using bold or larger font sizes for important information if contrast is borderline.

Recommended combinations

Reflective Depth

Ideal for dark mode applications, sophisticated dashboards, or layered backgrounds that convey depth.

#1F2E3A · #3A4F60 · #6E859E

Gentle Transition

Excellent for subtle gradients, section dividers, or soft card backgrounds in a light theme.

#3A4F60 · #B2C2D0 · #DCE4EA

Urban Calm

A balanced trio for clean website layouts, combining a deep base with a mid-tone accent and light content area.

#1F2E3A · #6E859E · #DCE4EA

CSS variables

:root {
  --city-puddle-glimmer-1: #1F2E3A;
  --city-puddle-glimmer-2: #3A4F60;
  --city-puddle-glimmer-3: #6E859E;
  --city-puddle-glimmer-4: #B2C2D0;
  --city-puddle-glimmer-5: #DCE4EA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-puddle-glimmer": {
        1: "#1F2E3A",
        2: "#3A4F60",
        3: "#6E859E",
        4: "#B2C2D0",
        5: "#DCE4EA",
      }
    }
  }
}

Hex values

Color 1#1F2E3A

Color 2#3A4F60

Color 3#6E859E

Color 4#B2C2D0

Color 5#DCE4EA

Accessibility

Contrast checker

1.6:1Fail

3.6:1AA18

7.6:1AAA

10.8:1AAA

1.6:1Fail

2.2:1Fail

4.7:1AA

6.6:1AA

3.6:1AA18

2.2:1Fail

2.1:1Fail

3:1Fail

7.6:1AAA

4.7:1AA

2.1:1Fail

1.4:1Fail

10.8:1AAA

6.6:1AA

3:1Fail

1.4:1Fail

Similar palettes

More like City Puddle Glimmer

View all cool

Rain Slicker Blue

Rainy City Reflections