Back to palettes

Palette

Lavender Mist

Soft purples blend like a gentle, ethereal mist rolling over a field of fragrant lavender at dawn.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6E6FA#D8BFD8#BA55D3#8A2BE2#9932CC

Palette guide

How to use Lavender Mist

Overview

The "Lavender Mist" palette is a serene and sophisticated collection, perfect for evoking a sense of calm and gentle elegance. It features a harmonious blend of soft purples, from the airy #E6E6FA to the more vibrant #BA55D3 and deep #8A2BE2. This spectrum offers versatility for various design applications, allowing for delicate backgrounds, subtle highlights, and rich, impactful elements. Designers can leverage the lighter tones like #D8BFD8 for spacious layouts, while integrating the powerful #9932CC for compelling calls to action or prominent branding. Its dreamy quality makes it ideal for projects seeking a touch of romanticism or tranquility.

Best used for

  • Spa and wellness branding
  • Wedding invitations and stationery
  • Feminine fashion and beauty websites
  • Interior design concepts for bedrooms
  • E-commerce for artisanal crafts
  • Serene mobile app interfaces

Suggested color roles

primary

#8A2BE2 - A rich, captivating purple ideal for main headings, brand logos, or key interactive elements to convey depth and sophistication.

secondary

#D8BFD8 - A gentle, muted lavender that works well for subheadings, background sections, or supporting graphics, offering a soft contrast.

accent

#BA55D3 - A vibrant medium purple, perfect for calls-to-action, buttons, or highlighting important information, adding a playful pop.

background

#E6E6FA - A very light, almost white lavender, excellent for clean, airy page backgrounds that provide ample breathing room.

text

#9932CC - A deep, readable purple suitable for body text or important labels, ensuring good contrast on lighter backgrounds, or use a dark charcoal for maximum readability.

Accessibility notes

  • Ensure sufficient contrast for #9932CC text on #E6E6FA backgrounds; consider slightly darker text for readability.
  • Use #8A2BE2 or #BA55D3 for essential UI elements against lighter backgrounds to meet WCAG AA standards.
  • Avoid placing lighter purples like #D8BFD8 as text on #E6E6FA backgrounds due to low contrast.
  • Check color combinations for users with color vision deficiencies, especially between similar purple tones.

Recommended combinations

Gentle Gradient

Ideal for soft background transitions, subtle branding elements, or header sections in a serene design.

#E6E6FA · #D8BFD8 · #BA55D3

Deep Contrast

Effective for creating strong visual hierarchy with light backgrounds and dark, impactful text or primary elements.

#E6E6FA · #8A2BE2 · #9932CC

Playful Highlight

Suited for interactive components, accent details, or call-to-action buttons that need to stand out within a softer context.

#D8BFD8 · #BA55D3 · #8A2BE2

CSS variables

:root {
  --lavender-mist-1: #E6E6FA;
  --lavender-mist-2: #D8BFD8;
  --lavender-mist-3: #BA55D3;
  --lavender-mist-4: #8A2BE2;
  --lavender-mist-5: #9932CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-mist": {
        1: "#E6E6FA",
        2: "#D8BFD8",
        3: "#BA55D3",
        4: "#8A2BE2",
        5: "#9932CC",
      }
    }
  }
}

Related searches

soft purple color schemegentle lavender paletteromantic purple branding colorsdreamy pastel purple hex codeselegant purple ui design

Palette colors

Hex values

Color 1#E6E6FA
·
Color 2#D8BFD8
·
Color 3#BA55D3
·
Color 4#8A2BE2
·
Color 5#9932CC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
3.2:1AA18
4.8:1AA
4.6:1AA
2
1.4:1Fail
2.3:1Fail
3.5:1AA18
3.4:1AA18
3
3.2:1AA18
2.3:1Fail
1.5:1Fail
1.4:1Fail
4
4.8:1AA
3.5:1AA18
1.5:1Fail
1:1Fail
5
4.6:1AA
3.4:1AA18
1.4:1Fail
1:1Fail

Similar palettes

More like Lavender Mist

View all pastel
Whispering Orchid Petals
Field Thistle Bloom
Amethyst Haze Dream
Aura Amethyst Dream
Celestial Nebula Whisper
Cherry Blossom Bloom