Back to palettes

Palette

Lavender Morning Mist

Gentle purples and blues blend like a tranquil field of lavender veiled in 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

#6A5ACD#8A79E2#B2A6F1#D5CDFA#EAE6FE

Palette guide

How to use Lavender Morning Mist

Overview

The "Lavender Morning Mist" palette (ID: lavender-morning-mist) is a beautifully serene collection of cool purples, ranging from the deep #6A5ACD to the almost ethereal #EAE6FE. This gradient of shades, including #8A79E2, #B2A6F1, and #D5CDFA, perfectly captures the tranquil essence of a misty morning over a lavender field. It's an excellent choice for designs that aim to convey peace, sophistication, and a touch of dreaminess. Designers and developers can utilize this palette to create soft, inviting interfaces, elegant branding, or soothing digital experiences that require a cohesive and calming aesthetic.

Best used for

  • Meditation and relaxation apps
  • Spa and wellness center branding
  • Elegant wedding stationery
  • High-end beauty product packaging
  • Gentle educational content for children
  • Personal development and coaching websites

Suggested color roles

primary

#6A5ACD - A rich, deep slate blue-purple, ideal for prominent headings, brand logos, or primary interactive elements, offering strong visual weight.

secondary

#8A79E2 - A vibrant medium blue-purple, perfect for subheadings, secondary navigation, or key graphic elements, maintaining energy.

accent

#B2A6F1 - A lighter, more playful blue-purple, excellent for calls-to-action, subtle highlights, or interactive states, adding a soft pop.

background

#EAE6FE - An extremely light, almost white shade of lavender, providing a clean, expansive, and calming backdrop for content.

text

#6A5ACD - This deep blue-purple ensures good readability for body text on very light backgrounds, or a dark charcoal for contrast.

Accessibility notes

  • Ensure #6A5ACD text on #EAE6FE backgrounds meets WCAG AA contrast standards; it should pass.
  • Avoid using lighter shades like #D5CDFA for small text on #EAE6FE due to potential readability issues.
  • Interactive elements should have sufficient contrast using #6A5ACD or #8A79E2.
  • Consider alternative visual cues for color-dependent information for users with color vision deficiencies.

Recommended combinations

Soft Gradient

Creates smooth, ethereal background transitions or subtle layering effects in headers.

#EAE6FE · #D5CDFA · #B2A6F1

Deep Focus

Ideal for main content blocks, providing strong readability with a deep primary color on a light background.

#EAE6FE · #6A5ACD · #8A79E2

Interactive Pop

Suited for buttons, links, or hover states, offering a clear visual hierarchy for user interaction.

#D5CDFA · #B2A6F1 · #8A79E2

CSS variables

:root {
  --lavender-morning-mist-1: #6A5ACD;
  --lavender-morning-mist-2: #8A79E2;
  --lavender-morning-mist-3: #B2A6F1;
  --lavender-morning-mist-4: #D5CDFA;
  --lavender-morning-mist-5: #EAE6FE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-morning-mist": {
        1: "#6A5ACD",
        2: "#8A79E2",
        3: "#B2A6F1",
        4: "#D5CDFA",
        5: "#EAE6FE",
      }
    }
  }
}

Related searches

tranquil purple blue palettecalming lavender color schemedreamy pastel purple hexpeaceful ui design colorssoft elegant purple brand

Palette colors

Hex values

Color 1#6A5ACD
·
Color 2#8A79E2
·
Color 3#B2A6F1
·
Color 4#D5CDFA
·
Color 5#EAE6FE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.5:1AA18
4.4:1AA18
2
1.5:1Fail
1.6:1Fail
2.4:1Fail
2.9:1Fail
3
2.4:1Fail
1.6:1Fail
1.4:1Fail
1.8:1Fail
4
3.5:1AA18
2.4:1Fail
1.4:1Fail
1.2:1Fail
5
4.4:1AA18
2.9:1Fail
1.8:1Fail
1.2:1Fail

Similar palettes

More like Lavender Morning Mist

View all pastel
Aura Amethyst Dream
Dreamy Lavender Field
Lavender Fields Dream
Lavender Haze Dream
Lavender Misty Dream
Lavender Sky Drift