Back to palettes

Palette

Urban Mist Echo

Captures the serene, understated elegance of a city skyline veiled in soft morning mist.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#A9A9A9#D3D3D3#F5F5F5

Palette guide

How to use Urban Mist Echo

Overview

The Urban Mist Echo palette captures the serene, understated elegance of a city skyline veiled in soft morning mist. This monochrome collection ranges from the deep, cool #2F4F4F to the ethereal #F5F5F5, with balanced mid-tones like #696969, #A9A9A9, and #D3D3D3. It's perfectly suited for designs that aim for a modern, minimalist, and calm aesthetic, where subtle shifts in gray evoke depth and sophistication. This palette is highly versatile, providing a harmonious and cohesive visual experience across various platforms and mediums.

Best used for

  • High-end photography portfolios
  • Minimalist lifestyle blogs
  • Luxury skincare branding
  • Corporate websites with a modern touch
  • Modern art galleries
  • Serene digital interfaces

Suggested color roles

primary

#2F4F4F serves as a deep, anchoring color for headings, navigation, and strong brand elements, providing excellent contrast.

secondary

#696969 is ideal for subheadings, secondary content, and UI components, offering a softer yet sophisticated presence.

accent

#A9A9A9 works as a subtle accent for dividers, borders, or soft shadows, adding a gentle touch of lightness.

background

#F5F5F5 provides a clean, airy, and expansive base for content, enhancing readability and a minimalist feel.

text

For main body text, use #2F4F4F on light backgrounds like #F5F5F5 to ensure optimal readability and a polished look.

Accessibility notes

  • #2F4F4F on #F5F5F5 offers excellent contrast, making it ideal for primary body text and important information.
  • #696969 on #F5F5F5 is suitable for text, but verify contrast for smaller font sizes to maintain readability.
  • Avoid using #A9A9A9 or #D3D3D3 for text, as they generally lack sufficient contrast on #F5F5F5.
  • Use lighter shades like #D3D3D3 for backgrounds, borders, or disabled states, ensuring clear visual hierarchy.

Recommended combinations

Misty Contrast

Creates a serene and highly readable design, suitable for professional and elegant contexts.

#2F4F4F · #F5F5F5 · #A9A9A9

Subtle Grayscale

Offers a modern and calm blend, great for layered backgrounds or sophisticated UI elements.

#696969 · #D3D3D3 · #2F4F4F

Echoing Layers

Provides an elegant and layered composition, ideal for clean layouts with gentle visual interest.

#F5F5F5 · #A9A9A9 · #696969

CSS variables

:root {
  --urban-mist-echo-1: #2F4F4F;
  --urban-mist-echo-2: #696969;
  --urban-mist-echo-3: #A9A9A9;
  --urban-mist-echo-4: #D3D3D3;
  --urban-mist-echo-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-mist-echo": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#F5F5F5",
      }
    }
  }
}

Related searches

serene grey paletteminimalist city colorsmodern cool grayselegant monochrome schememist-inspired design

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#F5F5F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.8:1AA18
6:1AA
8.2:1AAA
2
1.6:1Fail
2.3:1Fail
3.7:1AA18
5:1AA
3
3.8:1AA18
2.3:1Fail
1.6:1Fail
2.2:1Fail
4
6:1AA
3.7:1AA18
1.6:1Fail
1.4:1Fail
5
8.2:1AAA
5:1AA
2.2:1Fail
1.4:1Fail

Similar palettes

More like Urban Mist Echo

View all monochrome
Urban Slate Morning
Concrete Jungle Bloom
Monochrome City Grid
Monochrome Cityscape
Monochrome Granite Edge
Urban Alley Glow