Back to palettes

Palette

Urban Rain Slicker

Cool grays and blues that capture the crisp, reflective look of city streets after a 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

#778899#A9A9A9#B0C4DE#D3D3D3#F0F8FF

Palette guide

How to use Urban Rain Slicker

Overview

The Urban Rain Slicker palette offers a minimalist blend of cool grays and blues, perfectly capturing the crisp, reflective essence of city streets after a rain shower. Featuring the deep slate of #778899, the versatile mid-tone of #A9A9A9, and the soft, airy feel of #F0F8FF, this palette provides a sophisticated foundation for clean, modern designs. Designers and developers will find its serene tones, including the subtle light blue of #B0C4DE, ideal for creating interfaces that evoke calm and clarity. The inclusion of #D3D3D3 further enhances its adaptability, providing excellent contrast and balance across various design elements.

Best used for

  • Modern web and mobile interfaces
  • Minimalist branding and logos
  • Architectural visualizations
  • Editorial design for tech or lifestyle
  • Serene background graphics
  • Clean data dashboards

Suggested color roles

primary

Use #778899 (Slate Gray) for main headings, navigation bars, and foundational elements to establish a strong, cool presence.

secondary

Employ #A9A9A9 (Dark Gray) for subheadings, secondary text, or subtle borders to provide gentle contrast and depth.

accent

Apply #B0C4DE (Light Steel Blue) to interactive elements like buttons, links, or progress indicators for a crisp, inviting highlight.

background

Utilize #F0F8FF (Alice Blue) as a clean, expansive main background, offering an airy canvas that enhances readability.

text

For body text, #778899 (Slate Gray) provides excellent legibility on light backgrounds, or use a dark charcoal for stronger contrast.

Accessibility notes

  • Ensure sufficient contrast when using #A9A9A9 or #D3D3D3 for text against very light backgrounds like #F0F8FF.
  • Interactive elements colored with #B0C4DE should have clear hover/focus states to meet accessibility standards.
  • Avoid using #D3D3D3 for small text; reserve it for larger headings or background elements to maintain readability.
  • Test color pairings with contrast checkers to ensure WCAG AA or AAA compliance, especially for critical information.

Recommended combinations

Urban Clarity

Ideal for main content blocks: dark text on a very light background with a subtle divider.

#778899 · #F0F8FF · #D3D3D3

Slick Accent

Perfect for navigation items or interactive cards, combining a mid-tone with a soft blue highlight.

#A9A9A9 · #B0C4DE · #778899

Soft Contrast

Use for background gradients or subtle UI components where gentle variation is desired.

#B0C4DE · #D3D3D3 · #A9A9A9

CSS variables

:root {
  --urban-rain-slicker-3-1: #778899;
  --urban-rain-slicker-3-2: #A9A9A9;
  --urban-rain-slicker-3-3: #B0C4DE;
  --urban-rain-slicker-3-4: #D3D3D3;
  --urban-rain-slicker-3-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-slicker-3": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#B0C4DE",
        4: "#D3D3D3",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

cool gray blue paletteminimalist urban colorsrainy city UI designsophisticated light palettecrisp web color scheme

Palette colors

Hex values

Color 1#778899
·
Color 2#A9A9A9
·
Color 3#B0C4DE
·
Color 4#D3D3D3
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.4:1Fail
3.4:1AA18
2
1.5:1Fail
1.3:1Fail
1.6:1Fail
2.2:1Fail
3
2:1Fail
1.3:1Fail
1.2:1Fail
1.7:1Fail
4
2.4:1Fail
1.6:1Fail
1.2:1Fail
1.4:1Fail
5
3.4:1AA18
2.2:1Fail
1.7:1Fail
1.4:1Fail

Similar palettes

More like Urban Rain Slicker

View all cool
Urban Rain Slicker
Urban Puddle Reflection
Urban Steel Echo
Alpine Ridge Frost
Arctic Fox Snow
Arctic Frost Edge