Palette

City Rain Slicker

Cool grays and muted blues mimic the reflective surfaces and subtle dampness of a rainy city street.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3C4A5A#5A6A7A#7B8B9B#AFAFB3#D7D7DB

Palette guide

How to use City Rain Slicker

Overview

The "City Rain Slicker" palette captures the sleek, cool, and reflective essence of a rainy urban environment. Ranging from a deep, muted blue-gray #3C4A5A to a very light, almost white gray #D7D7DB, this palette offers a harmonious gradient of cool neutrals. Intermediate shades like #5A6A7A, #7B8B9B, and #AFAFB3 provide smooth transitions, making it incredibly versatile for modern design applications. Designers and developers can leverage this palette to create clean, sophisticated, and minimalist interfaces, corporate branding, or any digital project that aims for a calm, professional, and understated elegance.

Best used for

Corporate websites and applications
Modern architecture portfolios
Minimalist UI design
Luxury product showcases
Professional branding
Financial services platforms

Suggested color roles

primary

#3C4A5A - A strong, deep blue-gray, ideal for main backgrounds, headers, or foundational elements.

secondary

#5A6A7A - A slightly lighter cool gray, perfect for secondary panels, navigation, or subtle dividers.

accent

#7B8B9B - A versatile mid-tone gray, suitable for interactive elements, borders, or subtle highlights.

background

#D7D7DB - A very light, airy gray, providing a clean and expansive canvas for content.

text

#3C4A5A - For highly readable body text on light backgrounds, or a crisp white for headers on dark elements.

Accessibility notes

Ensure sufficient contrast when using lighter shades like #AFAFB3 or #D7D7DB for text on similar light backgrounds.
Darker colors like #3C4A5A provide excellent contrast for light text (e.g., white), enhancing readability.
Avoid using mid-tones for small text on closely related mid-tone backgrounds, as this can reduce legibility.
Utilize clear visual cues beyond color, such as underlines for links or bolding for emphasis, especially across the lighter shades.

Recommended combinations

Sleek Depth

Ideal for dark-themed interfaces, creating visual hierarchy and sophisticated layering.

#3C4A5A · #5A6A7A · #7B8B9B

Clean Modern

Excellent for light mode applications, using the lightest for background, mid-tone for secondary, and darkest for text.

#D7D7DB · #AFAFB3 · #3C4A5A

Subtle Accent

Use for subtle gradients, hover states, or to differentiate adjacent UI components without harsh contrast.

#5A6A7A · #7B8B9B · #AFAFB3

CSS variables

:root {
  --city-rain-slicker-1: #3C4A5A;
  --city-rain-slicker-2: #5A6A7A;
  --city-rain-slicker-3: #7B8B9B;
  --city-rain-slicker-4: #AFAFB3;
  --city-rain-slicker-5: #D7D7DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-rain-slicker": {
        1: "#3C4A5A",
        2: "#5A6A7A",
        3: "#7B8B9B",
        4: "#AFAFB3",
        5: "#D7D7DB",
      }
    }
  }
}

Hex values

Color 1#3C4A5A

Color 2#5A6A7A

Color 3#7B8B9B

Color 4#AFAFB3

Color 5#D7D7DB

Accessibility

Contrast checker

1.6:1Fail

2.6:1Fail

4.1:1AA18

6.3:1AA

1.6:1Fail

2.5:1Fail

3.9:1AA18

2.6:1Fail

1.6:1Fail

2.4:1Fail

4.1:1AA18

2.5:1Fail

1.6:1Fail

1.5:1Fail

6.3:1AA

3.9:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like City Rain Slicker

City Rain Slicker

See it in context.

Ready when you are.

Built with City Rain Slicker.

How to use City Rain Slicker

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sleek Depth

Clean Modern

Subtle Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like City Rain Slicker