Back to palettes

Palette

Muted Lavender Fog

A gentle, dreamlike palette capturing the serene beauty of a foggy lavender field at sunrise.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Muted Lavender Fog 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 Muted Lavender Fog.

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

Data visualization

#B5A6E8#A7A7AA#D3A1AD#CAD2C5#F7F5EE

Palette guide

How to use Muted Lavender Fog

Overview

The Muted Lavender Fog palette is a gentle, dreamlike collection capturing the serene beauty of a foggy lavender field at sunrise. It features a soft muted lavender (#B5A6E8), a grounding soft grey (#A7A7AA), and a delicate dusty rose (#D3A1AD). Complementing these are a calming green-grey (#CAD2C5) and a warm off-white (#F7F5EE). This palette is perfect for designers and developers seeking to evoke tranquility, subtle romance, and ethereal beauty, making it suitable for projects that require a light, airy, and gentle aesthetic across various mediums.

Best used for

  • Wellness and meditation apps
  • Bridal and wedding-related branding
  • Gentle and feminine product design
  • Baby and nursery decor themes
  • Artistic photography portfolios
  • Serene digital interfaces and websites

Suggested color roles

primary

Utilize #B5A6E8 (muted lavender) as a focal point for headers or key interactive elements, conveying dreaminess.

secondary

Employ #A7A7AA (soft grey) for supporting text, navigation, or to provide a grounding neutral base.

accent

Incorporate #D3A1AD (dusty rose) for delicate highlights, call-to-action buttons, or subtle decorative touches.

background

Select #F7F5EE (warm off-white) as an ethereal, light background that enhances the soft quality of the other colors.

text

Opt for #A7A7AA (soft grey) for body text, offering gentle readability and a cohesive, muted aesthetic.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter colors like #CAD2C5 or #D3A1AD with #F7F5EE.
  • The very light #F7F5EE and #CAD2C5 require a dark text color, such as #A7A7AA or a charcoal, for optimal readability.
  • Avoid using #D3A1AD for small text on #CAD2C5 due to insufficient contrast; use for larger elements.
  • The primary lavender #B5A6E8 should be checked for contrast with text, ensuring legibility on various backgrounds.

Recommended combinations

Dreamy Contrast

Ideal for clean content areas where lavender text or highlights stand out gently on a light background.

#F7F5EE · #B5A6E8 · #A7A7AA

Soft Harmony

Creates a subtle, calming layered effect for background sections or understated visual patterns.

#CAD2C5 · #A7A7AA · #D3A1AD

Floral Touch

Perfect for graphic elements, illustrations, or feature sections that require a delicate, romantic feel.

#D3A1AD · #B5A6E8 · #A7A7AA

CSS variables

:root {
  --muted-lavender-fog-1: #B5A6E8;
  --muted-lavender-fog-2: #A7A7AA;
  --muted-lavender-fog-3: #D3A1AD;
  --muted-lavender-fog-4: #CAD2C5;
  --muted-lavender-fog-5: #F7F5EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-lavender-fog": {
        1: "#B5A6E8",
        2: "#A7A7AA",
        3: "#D3A1AD",
        4: "#CAD2C5",
        5: "#F7F5EE",
      }
    }
  }
}

Related searches

muted lavender palettepastel fog colorsgentle purple greyserene dream huessoft floral design

Palette colors

Hex values

Color 1#B5A6E8
·
Color 2#A7A7AA
·
Color 3#D3A1AD
·
Color 4#CAD2C5
·
Color 5#F7F5EE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1:1Fail
1.4:1Fail
2:1Fail
2
1.1:1Fail
1.1:1Fail
1.5:1Fail
2.2:1Fail
3
1:1Fail
1.1:1Fail
1.4:1Fail
2:1Fail
4
1.4:1Fail
1.5:1Fail
1.4:1Fail
1.4:1Fail
5
2:1Fail
2.2:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Muted Lavender Fog

View all pastel