Palette

Urban Dawn Mist

Cool, muted tones reminiscent of a misty city morning with modern architectural elements.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CED0CE#A5AAA7#7B807B#535653#303330

Palette guide

How to use Urban Dawn Mist

Overview

The Urban Dawn Mist palette is a serene and sophisticated collection of cool, muted grays and near-blacks, reminiscent of a misty city morning. Ranging from the light, ethereal #CED0CE to the deep, grounding #303330, this palette is perfect for creating minimalist designs that exude calm and understated elegance. Developers can utilize its subtle tonal variations to establish clear visual hierarchies in interfaces without relying on bold colors. Designers will appreciate its versatility for projects requiring a sense of depth, tranquility, and modern refinement, making it ideal for high-end brands or content-focused platforms where distraction-free experiences are key.

Best used for

Luxury minimalist product design
High-end fashion websites
Architectural visualization platforms
Spa and wellness branding
Modern art galleries online
Content-heavy blogs with a sophisticated aesthetic

Suggested color roles

primary

#303330 serves as a deep, anchoring primary color, perfect for core structural elements like navigation and footers.

secondary

#535653 provides a strong secondary tone, suitable for important text, section titles, or robust interactive elements.

accent

#7B807B can be used for subtle accents, borders, or to delineate active states in UI components, maintaining the muted feel.

background

#CED0CE offers a soft, light background that provides excellent contrast for darker text while maintaining a gentle aesthetic.

text

For dark text on light backgrounds, use #303330 or #535653. For light text on dark backgrounds, a crisp white or #CED0CE is ideal.

Accessibility notes

Ensure #303330 text on #CED0CE background provides sufficient contrast for WCAG AA compliance.
Exercise caution when using #A5AAA7 or #7B807B for small text on #CED0CE, as contrast might be insufficient.
For text on #303330 or #535653, use #CED0CE to ensure optimal readability.
Visually distinguish interactive elements with more than just color; consider weight, underlines, or icons.

Recommended combinations

Deep Contrast

Excellent for hero sections or main content areas, offering a classic dark-on-light readability.

#303330 · #CED0CE · #535653

Misty Layers

Ideal for creating subtle depth in cards or layered UI elements, maintaining a soft visual flow.

#CED0CE · #A5AAA7 · #7B807B

Refined Interaction

Use for buttons or form elements, where the darker tones provide clear states and the lighter acts as a gentle highlight.

#535653 · #303330 · #A5AAA7

CSS variables

:root {
  --urban-dawn-mist-1: #CED0CE;
  --urban-dawn-mist-2: #A5AAA7;
  --urban-dawn-mist-3: #7B807B;
  --urban-dawn-mist-4: #535653;
  --urban-dawn-mist-5: #303330;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-dawn-mist": {
        1: "#CED0CE",
        2: "#A5AAA7",
        3: "#7B807B",
        4: "#535653",
        5: "#303330",
      }
    }
  }
}

Hex values

Color 1#CED0CE

Color 2#A5AAA7

Color 3#7B807B

Color 4#535653

Color 5#303330

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

4.8:1AA

8.2:1AAA

1.5:1Fail

1.7:1Fail

3.2:1AA18

5.4:1AA

2.6:1Fail

1.7:1Fail

1.8:1Fail

3.2:1AA18

4.8:1AA

3.2:1AA18

1.8:1Fail

1.7:1Fail

8.2:1AAA

5.4:1AA

3.2:1AA18

1.7:1Fail

Similar palettes

More like Urban Dawn Mist

Architectural Concrete Edge

Urban Dawn Mist

See it in context.

Ready when you are.

Built with Urban Dawn Mist.

How to use Urban Dawn Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Contrast

Misty Layers

Refined Interaction

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Dawn Mist