Back to palettes

Palette

Morning Fog Lavender

Gentle purples and misty whites recreate the serene view of a lavender field kissed by morning fog.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8F0FA#EAD9F2#D2C1E4#B8A3D1#9F8DC5

Palette guide

How to use Morning Fog Lavender

Overview

The Morning Fog Lavender palette gently recreates the serene view of a lavender field kissed by morning fog. With soft purples and misty whites like #F8F0FA, #EAD9F2, and #D2C1E4, transitioning to deeper shades such as #B8A3D1 and #9F8DC5, this collection offers a delicate and romantic aesthetic. It's perfectly suited for designers and developers crafting experiences for beauty, wellness, or feminine-oriented brands seeking to evoke calm, elegance, and softness. The gentle gradient provides a harmonious visual flow, making it ideal for creating serene digital environments and sophisticated print materials.

Best used for

  • Beauty and skincare product branding
  • Wedding invitations and event design
  • Feminine fashion and lifestyle blogs
  • Meditation and wellness applications
  • Children's clothing and nursery decor
  • Serene digital interfaces and websites

Suggested color roles

primary

Use #9F8DC5 as the deepest, grounding color for primary text, important headings, or foundational elements that need a gentle anchor.

secondary

Employ #B8A3D1 for supporting sections, subheadings, or as a background color that adds richness without overwhelming.

accent

The lightest #F8F0FA serves as a delicate accent for subtle highlights, interactive states, or airy background elements.

background

The misty #F8F0FA or #EAD9F2 provides a soft, ethereal background, ideal for creating a light and airy feel.

text

For optimal readability on lighter shades, use a dark purple like #9F8DC5 or a dark grey/charcoal. White text works on #9F8DC5.

Accessibility notes

  • Lighter shades like #F8F0FA, #EAD9F2, and #D2C1E4 require dark text (e.g., #9F8DC5 or charcoal) for sufficient contrast.
  • Ensure interactive elements on mid-tones such as #B8A3D1 have a clear focus state with adequate contrast.
  • Avoid using light-colored text on the mid-range purples to prevent readability issues for users with visual impairments.
  • For critical information, always opt for the highest contrast pairing within the palette, such as #9F8DC5 text on #F8F0FA.

Recommended combinations

Gentle Gradient

Creates a soft, flowing background or layered effect, perfect for banners or subtle transitions.

#F8F0FA · #EAD9F2 · #D2C1E4

Soft Depth

Provides a nuanced contrast for sections, allowing for clear hierarchy within a gentle aesthetic.

#9F8DC5 · #B8A3D1 · #D2C1E4

Misty Touch

Highlights delicate details or adds an ethereal touch to design elements and typography.

#EAD9F2 · #B8A3D1 · #F8F0FA

CSS variables

:root {
  --morning-fog-lavender-1: #F8F0FA;
  --morning-fog-lavender-2: #EAD9F2;
  --morning-fog-lavender-3: #D2C1E4;
  --morning-fog-lavender-4: #B8A3D1;
  --morning-fog-lavender-5: #9F8DC5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-fog-lavender": {
        1: "#F8F0FA",
        2: "#EAD9F2",
        3: "#D2C1E4",
        4: "#B8A3D1",
        5: "#9F8DC5",
      }
    }
  }
}

Related searches

lavender color palettepastel purple schemesoft UI designromantic colorsmisty aesthetic palette

Palette colors

Hex values

Color 1#F8F0FA
·
Color 2#EAD9F2
·
Color 3#D2C1E4
·
Color 4#B8A3D1
·
Color 5#9F8DC5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2:1Fail
2.7:1Fail
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
1.5:1Fail
1.3:1Fail
1.4:1Fail
1.8:1Fail
4
2:1Fail
1.7:1Fail
1.4:1Fail
1.3:1Fail
5
2.7:1Fail
2.2:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Morning Fog Lavender

View all pastel
Dreamy Lavender Field
Dreamy Lavender Field
Lavender Bloom Field
Lavender Bloom Morning
Lavender Field Breeze
Lavender Field Dusk