Back to palettes

Palette

Urban Whisper

Sophisticated shades of cool gray and blue-gray evoke the sleek, muted tones of urban architecture.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Whisper 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 Whisper.

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

Data visualization

#5D6D7E#AAB7B8#DDE4E6#7C8D98#3E4A56

Palette guide

How to use Urban Whisper

Overview

The "Urban Whisper" palette conveys sophisticated calm through its refined collection of cool grays and blue-grays, echoing sleek urban architecture. Starting with the deep, grounding charcoal of #3E4A56, it moves through a thoughtful range including a cool slate gray #5D6D7E and a balanced blue-gray #7C8D98. Lighter tones like the soft silver #AAB7B8 and the airy light gray #DDE4E6 provide contrast and breathability. This palette is perfect for designs requiring a minimalist, professional, and understated elegance, reflecting the quiet sophistication of modern cityscapes and concrete textures without being harsh for designers and developers.

Best used for

  • High-end corporate branding
  • Architectural firms and portfolios
  • Minimalist web design
  • Luxury product packaging (subtle)
  • Professional photography websites
  • Modern interior design (neutral schemes)

Suggested color roles

primary

Use #3E4A56 as a deep, foundational color for branding, strong text, or dark backgrounds.

secondary

Apply #5D6D7E to supporting elements, backgrounds for sections, or secondary headings.

accent

Utilize #AAB7B8 for subtle highlights, dividers, interactive elements, or delicate accents.

background

Employ #DDE4E6 as a light, clean, and airy content area background, promoting readability.

text

Use #7C8D98 for readable body text on lighter backgrounds like #DDE4E6, or white text on #3E4A56.

Accessibility notes

  • #7C8D98 on #DDE4E6 might require careful contrast checking for small text; consider darkening the text.
  • #3E4A56 offers excellent contrast on #DDE4E6 for body text, ensuring strong readability.
  • Avoid using #AAB7B8 for critical body text on #DDE4E6 due to potential low contrast.
  • White or very light gray text on #3E4A56 or #5D6D7E will be highly legible, suitable for prominent text.

Recommended combinations

Sleek Foundation

Robust base with clean, light content areas, ideal for professional websites.

#3E4A56 · #5D6D7E · #DDE4E6

Concrete Layers

Subtle background variations or layered UI elements, creating depth and sophistication.

#DDE4E6 · #AAB7B8 · #7C8D98

Whisper Accent

Mid-tone base with a delicate highlight and a strong anchor, suitable for understated branding.

#5D6D7E · #AAB7B8 · #3E4A56

CSS variables

:root {
  --urban-whisper-1: #5D6D7E;
  --urban-whisper-2: #AAB7B8;
  --urban-whisper-3: #DDE4E6;
  --urban-whisper-4: #7C8D98;
  --urban-whisper-5: #3E4A56;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-whisper": {
        1: "#5D6D7E",
        2: "#AAB7B8",
        3: "#DDE4E6",
        4: "#7C8D98",
        5: "#3E4A56",
      }
    }
  }
}

Related searches

cool gray paletteminimalist urban colorssophisticated neutral schememodern concrete designblue grey professional palette

Palette colors

Hex values

Color 1#5D6D7E
·
Color 2#AAB7B8
·
Color 3#DDE4E6
·
Color 4#7C8D98
·
Color 5#3E4A56
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.6:1Fail
4.1:1AA18
1.5:1Fail
1.7:1Fail
2
2.6:1Fail
1.6:1Fail
1.7:1Fail
4.4:1AA18
3
4.1:1AA18
1.6:1Fail
2.7:1Fail
7:1AAA
4
1.5:1Fail
1.7:1Fail
2.7:1Fail
2.6:1Fail
5
1.7:1Fail
4.4:1AA18
7:1AAA
2.6:1Fail

Similar palettes

More like Urban Whisper

View all neutral
Graphite Urban Grid
Stone Mosaic
Brutalist Bloom Grey
City Concrete Grind
Concrete Jungle Bloom
Gritty Urban Canvas