Back to palettes

Palette

Urban Rain Slicker

A moody urban canvas contrasted with the unexpected pop of a bright yellow rain slicker on a drizzly day.

vibrantminimal5 colors
More vibrant 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

#2B2B2B#5A5A5A#8C8C8C#FFD700#5F9EA0

Palette guide

How to use Urban Rain Slicker

Overview

The Urban Rain Slicker palette delivers a moody urban canvas dramatically contrasted by a vibrant pop, reminiscent of a bright yellow rain slicker on a drizzly day. Anchored by the deep charcoal of #2B2B2B and softened by #5A5A5A and #8C8C8C, this palette provides a sophisticated grayscale foundation. The unexpected burst of #FFD700 (Gold) acts as a powerful accent, while #5F9EA0 (Cadet Blue) introduces a subtle, cool undertone. This combination offers designers and developers a compelling visual narrative, perfect for creating impactful, modern experiences that balance starkness with vibrant energy and a touch of cool serenity.

Best used for

  • Creative agency portfolios
  • Modern art and photography websites
  • Fashion and lifestyle branding
  • Event promotion and posters
  • High-impact digital campaigns
  • Dark mode UI designs

Suggested color roles

primary

Utilize #2B2B2B (Deep Charcoal) as the dominant color for backgrounds, large text, or primary containers, establishing a bold and sophisticated base.

secondary

Employ #5A5A5A (Medium Gray) for secondary text, subtle patterns, or UI elements that require less prominence than the primary color.

accent

Apply #FFD700 (Bright Gold) for critical call-to-actions, key highlights, or elements requiring maximum visual impact and urgency.

background

Use #8C8C8C (Light Gray) for content blocks or sections where a neutral, slightly lighter background is needed to offset darker elements.

text

For primary text, #2B2B2B (Deep Charcoal) works well on lighter grays, or use white/near-white text on #2B2B2B for strong contrast.

Accessibility notes

  • Ensure high contrast for #FFD700 when used as text or interactive elements, especially against #2B2B2B or #5A5A5A.
  • Verify that #2B2B2B text on #8C8C8C meets WCAG contrast ratios for legibility.
  • Avoid using #8C8C8C for small text sizes, as it may lack sufficient contrast against very light backgrounds.
  • Provide clear focus indicators for interactive elements that use #5F9EA0 to ensure visibility.

Recommended combinations

Dramatic Impact

Ideal for a striking call-to-action or hero section, with vibrant yellow against deep charcoal.

#FFD700 · #2B2B2B · #5A5A5A

Urban Canvas

Use for background sections or subtle informational panels, mixing grays with a cool blue undertone.

#8C8C8C · #5A5A5A · #5F9EA0

Content Focus

Perfect for main content blocks: dark text, a subtle blue accent, and a light gray background.

#2B2B2B · #5F9EA0 · #8C8C8C

CSS variables

:root {
  --urban-rain-slicker-5-1: #2B2B2B;
  --urban-rain-slicker-5-2: #5A5A5A;
  --urban-rain-slicker-5-3: #8C8C8C;
  --urban-rain-slicker-5-4: #FFD700;
  --urban-rain-slicker-5-5: #5F9EA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rain-slicker-5": {
        1: "#2B2B2B",
        2: "#5A5A5A",
        3: "#8C8C8C",
        4: "#FFD700",
        5: "#5F9EA0",
      }
    }
  }
}

Related searches

dark urban paletteyellow accent designmoody city colorsgold and gray schemedramatic web colors

Palette colors

Hex values

Color 1#2B2B2B
·
Color 2#5A5A5A
·
Color 3#8C8C8C
·
Color 4#FFD700
·
Color 5#5F9EA0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.2:1AA18
10.1:1AAA
4.6:1AA
2
2.1:1Fail
2.1:1Fail
4.9:1AA
2.3:1Fail
3
4.2:1AA18
2.1:1Fail
2.4:1Fail
1.1:1Fail
4
10.1:1AAA
4.9:1AA
2.4:1Fail
2.2:1Fail
5
4.6:1AA
2.3:1Fail
1.1:1Fail
2.2:1Fail

Similar palettes

More like Urban Rain Slicker

View all vibrant
Modern Digital Interface
Urban Teal Oasis
Bauhaus Geometric Form
Bauhaus Geometric Grid
Bauhaus Grid Vision
Digital Interface Matrix