Palette

Rainy City Reflections

Monochromatic urban tones reflecting the slick, gleaming surfaces of a city in the rain.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainy City Reflections 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 Rainy City Reflections.

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

Data visualization

#36454F#708090#A9A9A9#C0C0C0#F0F0F0

Palette guide

How to use Rainy City Reflections

Overview

This "Rainy City Reflections" palette offers a sophisticated, monochromatic journey through urban greys, perfect for evoking a moody yet elegant atmosphere. With deep charcoal like #36454F and progressively lighter tones leading to the near-white #F0F0F0, designers can craft interfaces that feel grounded and sleek. The mid-tones, #708090 and #A9A9A9, provide excellent versatility for secondary elements and subtle gradients. This palette is ideal for projects requiring a sense of calm, professionalism, or understated luxury, mirroring the slick, gleaming surfaces of a city after a rain shower. Developers will appreciate the cohesive feel for consistent branding.

Best used for

High-end corporate websites and branding
Minimalist UI/UX designs for tech products
Architectural visualization and design portfolios
Editorial layouts and photography showcases
Luxury product packaging
Dark mode interfaces

Suggested color roles

primary

Use #36454F as the dominant brand color for headers, important buttons, or main content backgrounds to establish a strong, sophisticated anchor.

secondary

Apply #708090 or #A9A9A9 for subheadings, navigation elements, or secondary sections to provide depth and structure without overwhelming.

accent

#C0C0C0 can serve as a subtle accent for hover states, inactive elements, or subtle graphic details, adding a touch of understated brilliance.

background

#F0F0F0 provides a clean, neutral canvas for light-themed designs, ensuring readability and a spacious feel. For dark mode, #36454F works well.

text

For dark backgrounds like #36454F, use #F0F0F0. For light backgrounds like #F0F0F0, use #36454F or a dark charcoal for optimal contrast.

Accessibility notes

Ensure sufficient contrast between #36454F text and #F0F0F0 background (and vice-versa) for WCAG AA compliance.
Avoid using #A9A9A9 or #C0C0C0 for small text on #F0F0F0 backgrounds due to low contrast.
Use #36454F for body text on lighter backgrounds like #F0F0F0 or #C0C0C0 for best readability.
Test button and link states for contrast against their backgrounds, especially with mid-tones.

Recommended combinations

Urban Contrast

Ideal for sharp, professional interfaces where clear hierarchy between dark text, light backgrounds, and secondary elements is key.

#36454F · #F0F0F0 · #708090

Subtle Depth

Creates a soft, atmospheric gradient effect, perfect for background textures, subtle dividers, or muted graphic elements.

#708090 · #A9A9A9 · #C0C0C0

Dark Mode Base

A strong foundation for dark mode UIs, using the darkest for background, lightest for text, and a mid-tone for secondary info.

#36454F · #F0F0F0 · #A9A9A9

CSS variables

:root {
  --rainy-city-reflections-1: #36454F;
  --rainy-city-reflections-2: #708090;
  --rainy-city-reflections-3: #A9A9A9;
  --rainy-city-reflections-4: #C0C0C0;
  --rainy-city-reflections-5: #F0F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-city-reflections": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#C0C0C0",
        5: "#F0F0F0",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#A9A9A9

Color 4#C0C0C0

Color 5#F0F0F0

Accessibility

Contrast checker

2.4:1Fail

4.2:1AA18

5.4:1AA

8.7:1AAA

2.4:1Fail

1.7:1Fail

2.2:1Fail

3.6:1AA18

4.2:1AA18

1.7:1Fail

1.3:1Fail

2.1:1Fail

5.4:1AA

2.2:1Fail

1.3:1Fail

1.6:1Fail

8.7:1AAA

3.6:1AA18

2.1:1Fail

1.6:1Fail

Similar palettes

More like Rainy City Reflections