Back to palettes

Palette

Urban Rain Slicker

A sophisticated collection of grays, inspired by slick city streets reflecting rain and urban lights.

MonochromeMinimal5 colors
More Monochrome 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

#424242#616161#BDBDBD#E0E0E0#9E9E9E

Palette guide

How to use Urban Rain Slicker

Overview

The Urban Rain Slicker palette offers a sophisticated monochrome collection of grays, meticulously inspired by slick city streets reflecting rain and urban lights. With its deep #424242, versatile #616161, and bright #E0E0E0, this palette is a masterclass in understated elegance. The inclusion of #BDBDBD and #9E9E9E provides nuanced mid-tones, allowing for subtle depth and visual interest without relying on vibrant hues. This makes it an exceptional choice for designers and developers aiming for a modern, cool, and minimal aesthetic, where clarity, structure, and timeless appeal are paramount in the user experience.

Best used for

  • Minimalist web and app design
  • Architectural portfolios and renders
  • High-tech product interfaces
  • Luxury brand visual identity
  • Editorial layouts and typography
  • Clean data visualization

Suggested color roles

primary

Designate #424242 (Dark Gray) for main headings, important text, and primary UI elements to ensure strong presence and readability.

secondary

Employ #616161 (Medium Dark Gray) for subheadings, secondary information, or subtle dividers to add hierarchy without harsh contrast.

accent

Utilize #9E9E9E (Mid Gray) for subtle accents, borders, or inactive states of interactive elements, maintaining a cohesive monochrome feel.

background

Apply #E0E0E0 (Very Light Gray) as the main background color, providing a clean, bright, and neutral canvas for content.

text

For body text, #424242 (Dark Gray) offers excellent legibility on light backgrounds, or use black for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast between #424242 text and the #E0E0E0 background for optimal readability, especially for body text.
  • Be mindful when using #BDBDBD or #9E9E9E for text on light backgrounds, as contrast may be low for smaller font sizes.
  • Provide clear visual indicators (e.g., bolding, underlines) for interactive elements that use mid-tone grays.
  • Test all text and interactive color pairings with WCAG guidelines to ensure accessibility for all users.

Recommended combinations

Clean Content

Ideal for main text blocks: dark text on a very light background with a slightly lighter gray for subheadings.

#424242 · #E0E0E0 · #616161

Subtle UI

Perfect for card backgrounds, borders, or subtle interactive elements, offering gentle tonal variation.

#BDBDBD · #9E9E9E · #616161

Header Depth

Use for headers or footers, combining a medium gray background with dark text and a light accent.

#616161 · #E0E0E0 · #424242

CSS variables

:root {
  --urban-rain-slicker-6-1: #424242;
  --urban-rain-slicker-6-2: #616161;
  --urban-rain-slicker-6-3: #BDBDBD;
  --urban-rain-slicker-6-4: #E0E0E0;
  --urban-rain-slicker-6-5: #9E9E9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-slicker-6": {
        1: "#424242",
        2: "#616161",
        3: "#BDBDBD",
        4: "#E0E0E0",
        5: "#9E9E9E",
      }
    }
  }
}

Related searches

monochrome gray paletteminimalist urban designslick city colorsmodern gray schemecool neutral UI

Palette colors

Hex values

Color 1#424242
·
Color 2#616161
·
Color 3#BDBDBD
·
Color 4#E0E0E0
·
Color 5#9E9E9E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
5.3:1AA
7.6:1AAA
3.8:1AA18
2
1.6:1Fail
3.3:1AA18
4.7:1AA
2.3:1Fail
3
5.3:1AA
3.3:1AA18
1.4:1Fail
1.4:1Fail
4
7.6:1AAA
4.7:1AA
1.4:1Fail
2:1Fail
5
3.8:1AA18
2.3:1Fail
1.4:1Fail
2:1Fail

Similar palettes

More like Urban Rain Slicker

View all Monochrome
Ancient Stone Whisper
Chrome Reflection
Steel Grid Gleam
Urban Concrete Grays
Urban Grid Dawn
Abstract Urban Canvas