Back to palettes

Palette

Lavender Morning Mist

Evokes the gentle, cool calm of a lavender field veiled in a soft morning mist.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C3B8D9#A8BAC2#C6D3C7#F0EFEF#DCD5D8

Palette guide

How to use Lavender Morning Mist

Overview

The "Lavender Morning Mist" palette (ID: lavender-morning-mist-2) offers a uniquely serene and understated collection of cool pastels, blending gentle purples with soft blues and greens. This palette, featuring shades like the calming #C3B8D9 and the airy #F0EFEF, along with the subtle #A8BAC2 and #C6D3C7, evokes the tranquil feeling of a misty dawn. It's ideal for designs seeking a natural, organic, and peaceful aesthetic. The harmonious combination allows for creating soft gradients, delicate textures, and a refreshing user experience, making it versatile for both digital interfaces and print materials that require a touch of natural elegance.

Best used for

  • Eco-friendly product branding
  • Nature-themed websites or apps
  • Wellness and meditation content
  • Spa and retreat marketing materials
  • Home decor and lifestyle blogs
  • Serene landscape photography portfolios

Suggested color roles

primary

#C3B8D9 - A soft, cool lavender-grey, excellent for main sections, headers, or backgrounds where a calming presence is desired.

secondary

#A8BAC2 - A gentle blue-grey, perfect for subheadings, navigation, or as a complementary background element, adding a cool touch.

accent

#C6D3C7 - A subtle green-grey, useful for delicate highlights, subtle interactive elements, or graphic accents to introduce a natural feel.

background

#F0EFEF - A very light, almost white grey, providing a clean, expansive canvas that enhances readability and lightness.

text

#C3B8D9 - This color can work for headings, but for body text on #F0EFEF, a dark charcoal like #4A4A4A is recommended for good contrast.

Accessibility notes

  • Text in #C3B8D9 or #A8BAC2 on #F0EFEF may require sufficient font size or bolding for readability.
  • Use darker text (e.g., black or dark grey) on #F0EFEF for main body content to ensure WCAG AA compliance.
  • Avoid low contrast combinations like #DCD5D8 text on #F0EFEF backgrounds.
  • Ensure interactive elements using #C6D3C7 have clear visual indicators beyond color alone.

Recommended combinations

Misty Horizon

Creates a gentle, expansive background or header area, evoking a calm, open feel.

#F0EFEF · #DCD5D8 · #A8BAC2

Natural Harmony

Ideal for illustrating natural themes, subtle graphic elements, or layered UI components.

#C3B8D9 · #C6D3C7 · #A8BAC2

Soft Contrast

Effective for body text and navigation, ensuring readability with a soft, cool aesthetic.

#F0EFEF · #C3B8D9 · #A8BAC2

CSS variables

:root {
  --lavender-morning-mist-2-1: #C3B8D9;
  --lavender-morning-mist-2-2: #A8BAC2;
  --lavender-morning-mist-2-3: #C6D3C7;
  --lavender-morning-mist-2-4: #F0EFEF;
  --lavender-morning-mist-2-5: #DCD5D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-morning-mist-2": {
        1: "#C3B8D9",
        2: "#A8BAC2",
        3: "#C6D3C7",
        4: "#F0EFEF",
        5: "#DCD5D8",
      }
    }
  }
}

Related searches

calm pastel color schemetranquil morning palettecool lavender grey colorsnature inspired soft huesserene ui design palette

Palette colors

Hex values

Color 1#C3B8D9
·
Color 2#A8BAC2
·
Color 3#C6D3C7
·
Color 4#F0EFEF
·
Color 5#DCD5D8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.6:1Fail
1.3:1Fail
2
1.1:1Fail
1.3:1Fail
1.7:1Fail
1.4:1Fail
3
1.2:1Fail
1.3:1Fail
1.4:1Fail
1.1:1Fail
4
1.6:1Fail
1.7:1Fail
1.4:1Fail
1.3:1Fail
5
1.3:1Fail
1.4:1Fail
1.1:1Fail
1.3:1Fail

Similar palettes

More like Lavender Morning Mist

View all pastel
Lavender Field Haze
Lavender Field Peace
Lavender Field Whisper
Lavender Haze Whisper
Lavender Mist Garden
Lavender Sky Drift