Back to palettes

Palette

Urban Rain Slicker

A sophisticated cool palette reflecting the muted glow and wet reflections of a city street after a gentle rain shower.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1E3B4D#2E5266#6E8898#9FB1BC#C3CED4

Palette guide

How to use Urban Rain Slicker

Overview

The Urban Rain Slicker palette is a sophisticated cool collection, perfectly reflecting the muted glow and wet reflections of a city street after a gentle rain shower. Dominated by deep, contemplative blue-grays like #1E3B4D and #2E5266, it creates a grounded yet serene atmosphere. The palette gracefully lightens through #6E8898 and #9FB1BC, culminating in the soft, ethereal #C3CED4, reminiscent of distant, rainy skies. This cohesive blend offers designers and developers a versatile tool for crafting elegant, modern interfaces and branding that evoke a sense of calm sophistication and natural urban beauty.

Best used for

  • High-end corporate websites
  • Luxury tech brand identities
  • Serene editorial content
  • Sophisticated mobile applications
  • Environmental design projects
  • Professional portfolio websites

Suggested color roles

primary

Utilize #1E3B4D (Deep Blue-Gray) as the authoritative base for main headings, navigation, and foundational elements, providing depth and stability.

secondary

Employ #2E5266 (Dark Blue-Gray) for subheadings, prominent text, or sections requiring strong but less dominant presence.

accent

Apply #6E8898 (Mid Blue-Gray) to interactive elements, subtle highlights, or dividers to add clarity and visual interest without disrupting the calm mood.

background

Designate #C3CED4 (Light Gray-Blue) as the primary background color, offering a soft, expansive, and inviting canvas.

text

For body text, #1E3B4D (Deep Blue-Gray) provides excellent contrast on light backgrounds, or use a very dark charcoal for optimal readability.

Accessibility notes

  • Ensure that #1E3B4D text on #C3CED4 meets WCAG AA contrast standards for readability across all device types.
  • Be mindful when using #9FB1BC as text on #C3CED4; it may require larger font sizes or bolder weights for legibility.
  • Provide clear focus and hover states for interactive elements, especially those using lighter shades like #6E8898.
  • Test color pairings thoroughly to prevent visual fatigue and ensure a comfortable reading experience.

Recommended combinations

Reflective Surface

Ideal for main content blocks: dark text on a very light background with a muted blue accent for details.

#1E3B4D · #C3CED4 · #9FB1BC

Muted Glow

Perfect for navigation elements or card headers, layering dark blue-grays for depth and sophistication.

#2E5266 · #6E8898 · #1E3B4D

Skyline Haze

Use for subtle background patterns, section dividers, or light UI components that need gentle definition.

#9FB1BC · #C3CED4 · #6E8898

CSS variables

:root {
  --urban-rain-slicker-1: #1E3B4D;
  --urban-rain-slicker-2: #2E5266;
  --urban-rain-slicker-3: #6E8898;
  --urban-rain-slicker-4: #9FB1BC;
  --urban-rain-slicker-5: #C3CED4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-slicker": {
        1: "#1E3B4D",
        2: "#2E5266",
        3: "#6E8898",
        4: "#9FB1BC",
        5: "#C3CED4",
      }
    }
  }
}

Related searches

sophisticated blue graymuted city palettewet street colorscool corporate designserene UI colors

Palette colors

Hex values

Color 1#1E3B4D
·
Color 2#2E5266
·
Color 3#6E8898
·
Color 4#9FB1BC
·
Color 5#C3CED4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
3.2:1AA18
5.3:1AA
7.3:1AAA
2
1.4:1Fail
2.2:1Fail
3.8:1AA18
5.2:1AA
3
3.2:1AA18
2.2:1Fail
1.7:1Fail
2.3:1Fail
4
5.3:1AA
3.8:1AA18
1.7:1Fail
1.4:1Fail
5
7.3:1AAA
5.2:1AA
2.3:1Fail
1.4:1Fail

Similar palettes

More like Urban Rain Slicker

View all cool
Urban Rain Slicker
Pavement Reflective Glow
Urban Grid Dusk
Urban Puddle Reflection
Urban Steel Echo
Arctic Fox Snow