Palette

Urban Rain Puddle

Captures the subdued, reflective tones of a rainy urban landscape, mirroring the city's quiet moments.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F6D7A#8D9DA5#C8D0D8#657E8D#2F4858

Palette guide

How to use Urban Rain Puddle

Overview

The Urban Rain Puddle palette captures the subdued, reflective tones of a rainy urban landscape, mirroring the city's quiet moments. Featuring the deep, foundational #2F4858 and #4F6D7A, it transitions through the mid-tones of #657E8D and #8D9DA5, culminating in the serene #C8D0D8. This guide assists designers and developers in crafting minimalist, moody, and sophisticated interfaces. It's ideal for projects requiring a calming yet contemporary aesthetic, perfect for conveying introspection, elegance, and a subtle connection to nature within an urban context.

Best used for

Minimalist and modern web and app interfaces
Branding for eco-conscious or sustainable products
Photography portfolios with a moody, atmospheric feel
Meditation or wellness applications
Architectural visualization and urban design concepts
Digital art and abstract graphic design

Suggested color roles

primary

#2F4858 - A deep, cool slate blue, excellent for main backgrounds, strong headers, or foundational structural elements in a dark theme.

secondary

#4F6D7A - A rich, muted teal-blue, suitable for main content areas, navigation, or as a dominant color in a refined layout.

accent

#657E8D - A balanced, cool grey-blue, perfect for interactive elements, secondary call-to-actions, or subtle graphic highlights.

background

#C8D0D8 - A very light, soft grey-blue, providing a clean, expansive backdrop for content, ensuring calm and readability.

text

Dark charcoal or black on #C8D0D8, or #C8D0D8 for light text on dark backgrounds like #2F4858.

Accessibility notes

Text in #2F4858 on #C8D0D8 offers excellent contrast for body copy.
Ensure #4F6D7A text on #C8D0D8 provides good readability for headings.
Be mindful when using #8D9DA5 on #C8D0D8 for small text; consider using it for larger elements or accents.
The palette offers good options for accessible light-on-dark or dark-on-light combinations for UI elements.

Recommended combinations

Quiet City

Creating a deep, moody background for hero sections, dashboards, or elegant dark mode interfaces.

#2F4858 · #4F6D7A · #C8D0D8

Puddle Reflections

Light and clean layouts, content cards, or subtle gradients for a soft, modern feel.

#C8D0D8 · #8D9DA5 · #657E8D

Rainy Mood

Branding elements, secondary navigation, or subtle data visualizations in a cool, muted tone.

#4F6D7A · #657E8D · #2F4858

CSS variables

:root {
  --urban-rain-puddle-1: #4F6D7A;
  --urban-rain-puddle-2: #8D9DA5;
  --urban-rain-puddle-3: #C8D0D8;
  --urban-rain-puddle-4: #657E8D;
  --urban-rain-puddle-5: #2F4858;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-puddle": {
        1: "#4F6D7A",
        2: "#8D9DA5",
        3: "#C8D0D8",
        4: "#657E8D",
        5: "#2F4858",
      }
    }
  }
}

Hex values

Color 1#4F6D7A

Color 2#8D9DA5

Color 3#C8D0D8

Color 4#657E8D

Color 5#2F4858

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

1.3:1Fail

1.7:1Fail

2:1Fail

1.8:1Fail

1.5:1Fail

3.4:1AA18

3.5:1AA18

1.8:1Fail

2.7:1Fail

6.2:1AA

1.3:1Fail

1.5:1Fail

2.7:1Fail

2.2:1Fail

1.7:1Fail

3.4:1AA18

6.2:1AA

2.2:1Fail

Similar palettes

More like Urban Rain Puddle

View all cool

Urban Grid Dawn

Urban Puddle Reflection