Palette

Wet City Chroma

Captures the reflective surfaces and muted lights of a city street after a calming evening rain shower.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Wet City Chroma 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 Wet City Chroma.

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

Data visualization

#2C3E50#4A6572#8CA2B1#BDC3C7#E0BBE4

Palette guide

How to use Wet City Chroma

Overview

The Wet City Chroma palette captures the unique atmosphere of an urban landscape after rain, with reflective surfaces and muted lights. It features deep, sophisticated blues like #2C3E50 and #4A6572, complemented by the lighter, atmospheric #8CA2B1. An unexpected soft purple accent, #E0BBE4, adds a touch of modern intrigue, while #BDC3C7 offers a crisp, neutral background. This palette is perfect for designers creating modern, edgy, or sophisticated urban brands and digital experiences. Developers will find its balanced contrast and intriguing accents useful for building dynamic, accessible interfaces with a contemporary, artistic flair.

Best used for

Modern urban brand identity and marketing
Tech startups and innovative digital products
Nightlife and entertainment promotions
Photography and abstract art portfolios
Sophisticated editorial design and magazines
Contemporary fashion and lifestyle brands

Suggested color roles

primary

Use #4A6572 as a cool, sophisticated grey-blue for main content or a modern brand presence.

secondary

Employ #8CA2B1 for lighter, atmospheric blue-grey accents in subheadings, secondary navigation, or backgrounds.

accent

Apply #E0BBE4 as an unexpected, soft purple highlight for unique calls-to-action, icons, or decorative elements.

background

Utilize #BDC3C7 as a light, crisp grey base for content areas, ensuring good readability.

text

Choose #2C3E50 for primary body text, offering deep, strong contrast and a sophisticated urban feel. White text also works well on darker blues.

Accessibility notes

Ensure #2C3E50 text on #BDC3C7 provides excellent contrast for all users.
Use white or very light text (e.g., #BDC3C7 or #E0BBE4) on darker backgrounds like #2C3E50 or #4A6572.
Avoid using #8CA2B1 text on #BDC3C7 for small font sizes due to potential low contrast.
Test contrast ratios for all interactive elements, especially with the purple accent on various backgrounds.

Recommended combinations

Urban Night

Creates a deep, moody, and atmospheric feel, ideal for headers and impactful content blocks.

#2C3E50 · #4A6572 · #8CA2B1

Rainy Reflection

Offers a light, reflective, and subtly accented aesthetic, perfect for backgrounds and delicate UI elements.

#BDC3C7 · #8CA2B1 · #E0BBE4

City Glow

Provides a strong dark base with a vibrant, unique accent, suitable for clear calls-to-action and distinct sections.

#2C3E50 · #E0BBE4 · #4A6572

CSS variables

:root {
  --wet-city-chroma-1: #2C3E50;
  --wet-city-chroma-2: #4A6572;
  --wet-city-chroma-3: #8CA2B1;
  --wet-city-chroma-4: #BDC3C7;
  --wet-city-chroma-5: #E0BBE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wet-city-chroma": {
        1: "#2C3E50",
        2: "#4A6572",
        3: "#8CA2B1",
        4: "#BDC3C7",
        5: "#E0BBE4",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#4A6572

Color 3#8CA2B1

Color 4#BDC3C7

Color 5#E0BBE4

Accessibility

Contrast checker

1.8:1Fail

4.1:1AA18

6.2:1AA

6.5:1AA

1.8:1Fail

2.3:1Fail

3.5:1AA18

3.7:1AA18

4.1:1AA18

2.3:1Fail

1.5:1Fail

1.6:1Fail

6.2:1AA

3.5:1AA18

1.5:1Fail

1.1:1Fail

6.5:1AA

3.7:1AA18

1.6:1Fail

1.1:1Fail

Similar palettes

More like Wet City Chroma

Pavement Shimmer Gloom

Rainy City Reflections

Rainy Cobblestone Street