Back to palettes

Palette

Misty Lavender Field

Dreamy purples and soft greys inspired by a fragrant lavender field shrouded in the ethereal beauty of morning mist.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Lavender Field 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 Misty Lavender Field.

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

Data visualization

#5A4F73#8E83AD#C2B2DE#D9CFF0#F3EDF8

Palette guide

How to use Misty Lavender Field

Overview

The Misty Lavender Field palette (version 2) offers a dreamy collection of purples and soft greys, inspired by a fragrant lavender field shrouded in morning mist. From the deep, grounding '#5A4F73' to the delicate, airy '#F3EDF8', and encompassing the rich '#8E83AD', soft '#C2B2DE', and subtle '#D9CFF0', this palette is perfect for creating elegant and ethereal digital experiences. Designers and developers will find these colors ideal for projects requiring sophistication, tranquility, and a touch of luxury. The harmonious progression of shades ensures a cohesive and visually pleasing aesthetic, making it excellent for high-end branding, wellness platforms, or artistic applications.

Best used for

  • Luxury spa and wellness branding
  • Sophisticated interior design websites
  • High-end fashion and lifestyle e-commerce
  • Wedding stationery and event design
  • Creative agencies and digital art platforms
  • Personal development and mindfulness apps

Suggested color roles

primary

Use '#5A4F73' as a deep, anchoring primary color for headers, important text, or strong calls to action.

secondary

Employ '#8E83AD' for supporting content, subheadings, or secondary navigation, adding rich texture.

accent

Apply '#C2B2DE' for delicate highlights, interactive elements, or subtle decorative touches.

background

Utilize '#F3EDF8' as the light, ethereal background, providing a soft and expansive canvas.

text

For optimal readability, use '#5A4F73' for primary body text, ensuring excellent contrast on light backgrounds.

Accessibility notes

  • Ensure '#5A4F73' text on '#F3EDF8' background provides sufficient contrast for all users.
  • Avoid using '#D9CFF0' or '#C2B2DE' for small, critical text due to potential low contrast.
  • Verify contrast ratios for interactive elements and different text sizes to meet WCAG standards.
  • Provide clear visual cues for focus and hover states, especially with lighter shades.

Recommended combinations

Deep Twilight

Creates a rich, sophisticated depth, ideal for hero sections, footers, or impactful branding.

#5A4F73 · #8E83AD · #C2B2DE

Ethereal Glow

Perfect for light, delicate layouts, background elements, or sections needing an airy, dreamy feel.

#F3EDF8 · #D9CFF0 · #C2B2DE

Soft Contrast

Offers a balanced yet elegant visual hierarchy, suitable for content blocks and layered interfaces.

#8E83AD · #D9CFF0 · #5A4F73

CSS variables

:root {
  --misty-lavender-field-2-1: #5A4F73;
  --misty-lavender-field-2-2: #8E83AD;
  --misty-lavender-field-2-3: #C2B2DE;
  --misty-lavender-field-2-4: #D9CFF0;
  --misty-lavender-field-2-5: #F3EDF8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lavender-field-2": {
        1: "#5A4F73",
        2: "#8E83AD",
        3: "#C2B2DE",
        4: "#D9CFF0",
        5: "#F3EDF8",
      }
    }
  }
}

Related searches

rich lavender palettesophisticated purplemisty floral brandingelegant ui designdeep lilac colors

Palette colors

Hex values

Color 1#5A4F73
·
Color 2#8E83AD
·
Color 3#C2B2DE
·
Color 4#D9CFF0
·
Color 5#F3EDF8
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.8:1AA18
5:1AA
6.5:1AA
2
2.1:1Fail
1.8:1Fail
2.4:1Fail
3:1AA18
3
3.8:1AA18
1.8:1Fail
1.3:1Fail
1.7:1Fail
4
5:1AA
2.4:1Fail
1.3:1Fail
1.3:1Fail
5
6.5:1AA
3:1AA18
1.7:1Fail
1.3:1Fail

Similar palettes

More like Misty Lavender Field

View all pastel