Back to palettes

Palette

Urban Mist Veil

Evokes the soft, ethereal feel of a city awakening under a veil of cool, gentle morning fog.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#94A2AD#ADB7BE#CED7DC#E1E8EC#F0F4F7

Palette guide

How to use Urban Mist Veil

Overview

The Urban Mist Veil palette evokes the soft, ethereal feel of a city awakening under a veil of cool, gentle morning fog. This very light, serene collection features delicate grays ranging from #94A2AD to the almost-white #F0F4F7, including harmonious mid-tones like #ADB7BE, #CED7DC, and #E1E8EC. It's perfect for designs that require a calm, airy, and minimalist aesthetic, where subtle variations create depth without overpowering the senses. This palette is ideal for conveying tranquility, softness, and understated beauty across various design applications.

Best used for

  • Serene wellness apps
  • Minimalist wedding photography
  • Delicate fashion branding
  • Luxury home goods websites
  • Contemplative art sites
  • Personal blogs with a calm aesthetic

Suggested color roles

primary

#94A2AD serves as a soft anchor for headings or subtle branding elements, offering gentle visual presence.

secondary

#ADB7BE is suitable for subheadings or UI elements with a delicate presence, maintaining the palette's lightness.

accent

#CED7DC works as a very subtle highlight for borders, dividers, or inactive states, blending seamlessly.

background

#F0F4F7 provides an airy, expansive, and clean canvas, enhancing a sense of calm and openness.

text

For primary text, use a dark charcoal or near-black (e.g., #333333) on #F0F4F7 to ensure optimal readability. #94A2AD can be used for larger, less critical text.

Accessibility notes

  • This palette is very light. For primary body text, use a dark grey or black for optimal readability on #F0F4F7 or #E1E8EC.
  • #94A2AD can be used for large text or headings on #F0F4F7, but always check contrast for smaller body text.
  • #ADB7BE, #CED7DC, and #E1E8EC are generally too light for text; reserve them for backgrounds, subtle UI, or decorative purposes.
  • Emphasize contrast for interactive elements, possibly by using a bolder weight or a darker shade from the palette for active states.

Recommended combinations

Gentle Contrast

Creates a soft and airy composition, perfect for tranquil digital experiences or delicate branding.

#94A2AD · #F0F4F7 · #CED7DC

Layered Calm

Offers an ethereal and subtle blend, great for atmospheric backgrounds or layered design elements.

#ADB7BE · #E1E8EC · #94A2AD

Misty Harmony

Provides a delicate and serene feel, suitable for minimalist designs requiring nuanced tonal variation.

#CED7DC · #F0F4F7 · #ADB7BE

CSS variables

:root {
  --urban-mist-veil-1: #94A2AD;
  --urban-mist-veil-2: #ADB7BE;
  --urban-mist-veil-3: #CED7DC;
  --urban-mist-veil-4: #E1E8EC;
  --urban-mist-veil-5: #F0F4F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-mist-veil": {
        1: "#94A2AD",
        2: "#ADB7BE",
        3: "#CED7DC",
        4: "#E1E8EC",
        5: "#F0F4F7",
      }
    }
  }
}

Related searches

soft grey palettemisty urban colorsserene cool toneslight minimalist designethereal fog aesthetic

Palette colors

Hex values

Color 1#94A2AD
·
Color 2#ADB7BE
·
Color 3#CED7DC
·
Color 4#E1E8EC
·
Color 5#F0F4F7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.1:1Fail
2.4:1Fail
2
1.3:1Fail
1.4:1Fail
1.6:1Fail
1.8:1Fail
3
1.8:1Fail
1.4:1Fail
1.2:1Fail
1.3:1Fail
4
2.1:1Fail
1.6:1Fail
1.2:1Fail
1.1:1Fail
5
2.4:1Fail
1.8:1Fail
1.3:1Fail
1.1:1Fail

Similar palettes

More like Urban Mist Veil

View all cool