Back to palettes

Palette

Urban Haze

Reflects the subtle, muted tones of a city morning veiled in a gentle, cool fog.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C8C8C#36454F#A0B0C4#D8C2C0#6B705C

Palette guide

How to use Urban Haze

Overview

The Urban Haze color palette offers a sophisticated, minimalist aesthetic, ideal for projects seeking a modern, understated feel. Inspired by cityscapes veiled in morning fog, this neutral collection blends cool grays with subtle, muted undertones. Key colors include the versatile medium gray #8C8C8C, a deep, anchoring charcoal #36454F, and a serene cool blue-gray #A0B0C4. Complementing these are the soft, dusty rose of #D8C2C0 and an organic, muted sage green #6B705C, which introduce warmth and natural balance. Designers and developers will find this palette excellent for creating elegant, clean interfaces, architectural visualizations, or branding that conveys quiet strength and contemporary elegance. It's a foundation for designs that prioritize clarity and a refined, urban sensibility.

Best used for

  • Minimalist UI/UX design
  • Architectural visualization and renders
  • Contemporary fashion branding
  • High-tech product interfaces
  • Urban lifestyle blogs or e-commerce
  • Interior design mood boards

Suggested color roles

primary

Use #36454F (Deep Charcoal) as the dominant anchor for headers, primary navigation, or prominent branding elements, conveying strength and sophistication.

secondary

Apply #A0B0C4 (Cool Blue-Gray) for secondary content areas, backgrounds for cards, or subtle hero sections, providing a calming, expansive feel.

accent

Introduce #D8C2C0 (Dusty Rose) sparingly for calls-to-action, interactive elements, or subtle graphic details to add a touch of gentle warmth and distinction.

background

Utilize #D8C2C0 (Dusty Rose) as a soft, inviting background for light-themed interfaces, offering a subtle warmth without overpowering content. A very light near-white can also be used for text-heavy content.

text

Choose #36454F (Deep Charcoal) for body text and headings, ensuring excellent readability against lighter backgrounds. For darker backgrounds, use a light grey or white.

Accessibility notes

  • Ensure sufficient contrast between #36454F text and lighter backgrounds like #A0B0C4 or #D8C2C0 to meet WCAG AA standards.
  • Avoid placing #8C8C8C text directly on #A0B0C4 without checking contrast, as their proximity in lightness might hinder readability.
  • Use the accent colors, #D8C2C0 and #6B705C, carefully for critical information, as their muted tones might have lower contrast against certain backgrounds.
  • Provide clear visual indicators beyond color alone for interactive states (e.g., hover, focus) to assist users with color vision deficiencies.

Recommended combinations

Urban Core

Ideal for robust corporate branding, professional websites, or app interfaces where clarity and a strong, modern foundation are paramount.

#36454F · #8C8C8C · #A0B0C4

Misty Dawn

Perfect for creating soft, inviting interior design palettes, editorial layouts, or gentle e-commerce sites, evoking a tranquil and sophisticated mood.

#A0B0C4 · #D8C2C0 · #6B705C

Concrete & Sage

Suited for industrial design, eco-conscious branding, or masculine fashion lines, offering a grounded, natural, yet refined aesthetic.

#8C8C8C · #36454F · #6B705C

CSS variables

:root {
  --urban-haze-1: #8C8C8C;
  --urban-haze-2: #36454F;
  --urban-haze-3: #A0B0C4;
  --urban-haze-4: #D8C2C0;
  --urban-haze-5: #6B705C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-haze": {
        1: "#8C8C8C",
        2: "#36454F",
        3: "#A0B0C4",
        4: "#D8C2C0",
        5: "#6B705C",
      }
    }
  }
}

Related searches

minimalist grey color paletteurban neutral color schemesophisticated muted colorscool tone grey palettecity fog color inspiration

Palette colors

Hex values

Color 1#8C8C8C
·
Color 2#36454F
·
Color 3#A0B0C4
·
Color 4#D8C2C0
·
Color 5#6B705C
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.9:1Fail
1.5:1Fail
2:1Fail
1.5:1Fail
2
2.9:1Fail
4.5:1AA18
5.8:1AA
1.9:1Fail
3
1.5:1Fail
4.5:1AA18
1.3:1Fail
2.3:1Fail
4
2:1Fail
5.8:1AA
1.3:1Fail
3:1AA18
5
1.5:1Fail
1.9:1Fail
2.3:1Fail
3:1AA18

Similar palettes

More like Urban Haze

View all neutral
Skylight Grey Haze
Greige Urban Blend
Muted Urban Concrete
Urban Concrete Calm
Urban Concrete Jungle
Urban Dawn Grey