Palette

Urban Rain Slicker

Reflects the cool, slick sheen of a city street after a gentle, cleansing rain shower.

coolcalm5 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

#3D5A80#547198#99B2D1#E0FBFC#B6BCC8

Palette guide

How to use Urban Rain Slicker

Overview

The Urban Rain Slicker palette beautifully captures the cool, slick sheen of a city street after a gentle, cleansing rain shower. This sophisticated collection features the deep, commanding #3D5A80, balanced by the softer yet impactful #547198. The palette brightens with the serene #99B2D1 and culminates in the ethereal lightness of #E0FBFC, reminiscent of clear skies after a storm. The grounding #B6BCC8 adds a touch of subtle warmth, making this palette versatile for designers and developers seeking a modern, calm, and professional aesthetic that evokes urban tranquility and understated elegance.

Best used for

Corporate and professional websites
Mobile application interfaces
Educational technology platforms
Architectural and real estate branding
Luxury product packaging
Modern editorial layouts

Suggested color roles

primary

Designate #3D5A80 (Dark Blue Gray) for primary headings, brand logos, and main structural elements to convey authority and depth.

secondary

Apply #547198 (Medium Blue Gray) to secondary navigation, subheadings, or distinct content sections for visual hierarchy.

accent

Utilize #99B2D1 (Light Blue) for call-to-action buttons, interactive links, or key highlight elements to draw attention.

background

Employ #E0FBFC (Very Light Blue/Cyan) as the main background color, providing a clean, airy, and expansive canvas.

text

For body text, #3D5A80 (Dark Blue Gray) offers excellent readability on light backgrounds, or use a deep charcoal for contrast.

Accessibility notes

Ensure sufficient contrast between #3D5A80 text and the #E0FBFC background for optimal readability.
Verify that interactive elements using #99B2D1 have adequate contrast against their surrounding background colors.
Avoid using #B6BCC8 for small text on light backgrounds due to potentially low contrast.
Test all text and interactive color pairings with WCAG guidelines to ensure accessibility for all users.

Recommended combinations

Professional Base

Perfect for main content areas: dark text on a very light background with a muted gray for subtle details.

#3D5A80 · #E0FBFC · #B6BCC8

Interactive Flow

Use for navigation menus or interactive cards, highlighting elements with the softer blue.

#547198 · #99B2D1 · #3D5A80

Subtle Depth

Ideal for header sections or hero banners, creating a layered effect with light blue accents.

#99B2D1 · #E0FBFC · #547198

CSS variables

:root {
  --urban-rain-slicker-4-1: #3D5A80;
  --urban-rain-slicker-4-2: #547198;
  --urban-rain-slicker-4-3: #99B2D1;
  --urban-rain-slicker-4-4: #E0FBFC;
  --urban-rain-slicker-4-5: #B6BCC8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-slicker-4": {
        1: "#3D5A80",
        2: "#547198",
        3: "#99B2D1",
        4: "#E0FBFC",
        5: "#B6BCC8",
      }
    }
  }
}

Hex values

Color 1#3D5A80

Color 2#547198

Color 3#99B2D1

Color 4#E0FBFC

Color 5#B6BCC8

Accessibility

Contrast checker

1.4:1Fail

3.2:1AA18

6.5:1AA

3.7:1AA18

1.4:1Fail

2.3:1Fail

4.6:1AA

2.6:1Fail

3.2:1AA18

2.3:1Fail

2:1Fail

1.1:1Fail

6.5:1AA

4.6:1AA

2:1Fail

1.8:1Fail

3.7:1AA18

2.6:1Fail

1.1:1Fail

1.8:1Fail

Similar palettes

More like Urban Rain Slicker

Pavement Shimmer Gloom

Cityscape Dawn Glow

Rain Slicker Blue