Palette

Urban Rain Slick

Reflects the glistening, slick surfaces of a city street after a calming 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 Slick 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 Slick.

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

Data visualization

#36454F#708090#A9A9A9#00BFFF#000000

Palette guide

How to use Urban Rain Slick

Overview

The Urban Rain Slick palette reflects the glistening, slick surfaces of a city street after a calming rain shower. It combines the stark depth of #000000 with the cool sophistication of #36454F, balanced by versatile greys #708090 and #A9A9A9, and punctuated by a vibrant #00BFFF. This guide helps designers and developers create modern, clean, and impactful interfaces. It's ideal for projects that demand a sleek, minimalist aesthetic with a powerful accent color, perfect for conveying professionalism, cutting-edge technology, or a contemporary urban vibe.

Best used for

Modern tech startup branding and website design
Dark mode interfaces for productivity apps
Automotive or luxury product marketing
Contemporary fashion or streetwear e-commerce
Digital art exhibitions or creative portfolios
Sleek architectural visualizations

Suggested color roles

primary

#000000 - A pure, deep black, serving as a powerful and sophisticated background or foundational element, especially for dark themes.

secondary

#36454F - A very dark slate grey-blue, excellent for main content areas, navigation, or as a dominant neutral in sleek layouts.

accent

#00BFFF - A vivid, electric blue, perfect for call-to-action buttons, interactive elements, or key highlights to provide a striking contrast and energy.

background

#A9A9A9 - A versatile medium grey, offering a clean, neutral canvas for content in a lighter context, or as a dividing element.

text

White or #A9A9A9 for light text on dark backgrounds like #000000, or black on #A9A9A9.

Accessibility notes

Ensure #00BFFF has sufficient contrast for text, especially small text, on any background; it's best for larger elements or interactive icons.
Text in #000000 on #A9A9A9 offers good readability.
#708090 text on #A9A9A9 might require careful consideration for contrast; use for larger headings or secondary information.
This palette provides strong options for high-contrast dark mode designs using #000000 with white or #00BFFF.

Recommended combinations

Slick Night

Creating dramatic dark mode interfaces, striking headers, or call-to-action elements with high impact.

#000000 · #36454F · #00BFFF

Urban Grey

Clean, modern layouts, content cards, or subtle background elements in a lighter, sophisticated theme.

#A9A9A9 · #708090 · #36454F

Electric Slick

Interactive elements, hover states, or graphic overlays that demand attention and energy against a cool backdrop.

#36454F · #00BFFF · #A9A9A9

CSS variables

:root {
  --urban-rain-slick-1: #36454F;
  --urban-rain-slick-2: #708090;
  --urban-rain-slick-3: #A9A9A9;
  --urban-rain-slick-4: #00BFFF;
  --urban-rain-slick-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-slick": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#00BFFF",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#A9A9A9

Color 4#00BFFF

Color 5#000000

Accessibility

Contrast checker

2.4:1Fail

4.2:1AA18

4.7:1AA

2.1:1Fail

2.4:1Fail

1.7:1Fail

1.9:1Fail

5.2:1AA

4.2:1AA18

1.7:1Fail

1.1:1Fail

8.9:1AAA

4.7:1AA

1.9:1Fail

1.1:1Fail

9.9:1AAA

2.1:1Fail

5.2:1AA

8.9:1AAA

9.9:1AAA

Similar palettes

More like Urban Rain Slick

View all Cool

Frosted Juniper Berries

Arctic Fox Camouflage