Palette

Misty Lavender Bloom

Soothing purples, like the fragrant mist drifting over a lavender field at twilight.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6E6FA#DDA0DD#BA55D3#8A2BE2#4B0082

Palette guide

How to use Misty Lavender Bloom

Overview

The Misty Lavender Bloom palette offers a vibrant and enchanting spectrum of purples, reminiscent of a fragrant lavender field at twilight. From the softest lilac '#E6E6FA' to the rich, deep '#4B0082', and featuring the expressive '#DDA0DD', '#BA55D3', and '#8A2BE2', this palette provides a captivating range for designers and developers. It's perfect for creating visually stunning and emotionally resonant experiences, especially where a touch of elegance, creativity, or mystique is desired. The harmonious blend of light and intense purples ensures versatility, making it suitable for beauty brands, artistic projects, or any digital space seeking a luxurious and dreamy feel.

Best used for

Beauty and cosmetic brand identity
Creative portfolio websites
Event planning and wedding invitations
Spiritual and wellness product design
Fashion blogs and e-commerce
Fantasy-themed apps and games

Suggested color roles

primary

Use '#BA55D3' as the main vibrant purple for headers, primary buttons, or focal points.

secondary

Employ '#8A2BE2' for supporting elements, subheadings, or to add a richer, deeper tone.

accent

Apply '#DDA0DD' for delicate highlights, interactive states, or subtle visual embellishments.

background

Utilize '#E6E6FA' as a light, airy background that allows the vibrant purples to truly bloom.

text

For strong contrast and readability, use '#4B0082' for primary body text on light backgrounds.

Accessibility notes

Ensure '#4B0082' provides sufficient contrast on '#E6E6FA' for all essential text.
Avoid using '#DDA0DD' or '#BA55D3' for small, critical text on light backgrounds due to lower contrast.
Check contrast ratios between the various purple shades, especially for interactive elements.
Consider larger font sizes when using lighter purple shades for better readability.

Recommended combinations

Deep Bloom

Creates a rich, dramatic effect suitable for sophisticated branding, impactful headers, or dark themes.

#4B0082 · #8A2BE2 · #BA55D3

Soft Petal

Perfect for delicate designs, airy layouts, or sections requiring a gentle and inviting aesthetic.

#E6E6FA · #DDA0DD · #BA55D3

Vibrant Twilight

Combines vibrancy with softness, ideal for captivating visuals, call-to-action sections, or creative illustrations.

#BA55D3 · #8A2BE2 · #DDA0DD

CSS variables

:root {
  --misty-lavender-bloom-1: #E6E6FA;
  --misty-lavender-bloom-2: #DDA0DD;
  --misty-lavender-bloom-3: #BA55D3;
  --misty-lavender-bloom-4: #8A2BE2;
  --misty-lavender-bloom-5: #4B0082;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lavender-bloom": {
        1: "#E6E6FA",
        2: "#DDA0DD",
        3: "#BA55D3",
        4: "#8A2BE2",
        5: "#4B0082",
      }
    }
  }
}

Hex values

Color 1#E6E6FA

Color 2#DDA0DD

Color 3#BA55D3

Color 4#8A2BE2

Color 5#4B0082

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

4.8:1AA

10.5:1AAA

1.7:1Fail

1.9:1Fail

2.9:1Fail

6.3:1AA

3.2:1AA18

1.9:1Fail

1.5:1Fail

3.3:1AA18

4.8:1AA

2.9:1Fail

1.5:1Fail

2.2:1Fail

10.5:1AAA

6.3:1AA

3.3:1AA18

2.2:1Fail

Similar palettes

More like Misty Lavender Bloom

View all cool

Lavender Field Serene

Lavender Haze Whisper

Lavender Mist Evening

Celestial Dreamscape

Desert Sky Starlight

Misty Canyon Lilac