Palette

Lavender Haze Bloom

Gentle, ethereal purples reminiscent of a vast field of lavender under a hazy sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B0082#8A2BE2#B6A3D2#DCD0E6#EDE0F0

Palette guide

How to use Lavender Haze Bloom

Overview

The "Lavender Haze Bloom" palette offers a gentle, ethereal spectrum of purples, reminiscent of a vast lavender field under a hazy sky. It features a deep, striking #4B0082, transitioning to a vibrant #8A2BE2, then softening to the muted #B6A3D2. The collection is completed by the delicate #DCD0E6 and the very light, almost blush #EDE0F0. This palette is exceptionally useful for designers and developers aiming to convey calmness, dreamlike quality, and understated elegance. It's perfect for projects requiring a soft yet sophisticated visual narrative, from digital interfaces to branding.

Best used for

Wedding stationery and event branding
Luxury fashion or beauty e-commerce
Spa and relaxation app interfaces
Art and photography portfolio websites
Children's clothing or toy brands
Editorial layouts for lifestyle magazines

Suggested color roles

primary

#8A2BE2 - A beautiful, vibrant purple suitable for main calls-to-action, primary navigation, and impactful headings.

secondary

#B6A3D2 - Excellent for supporting elements, subheadings, or backgrounds that need a touch of color without being overwhelming.

accent

#4B0082 - A rich, deep purple perfect for adding gravitas to important links, icons, or as a strong contrasting element.

background

#EDE0F0 - A very light, soft background color that provides an airy and gentle canvas for content.

text

#4B0082 - A deep, readable purple that offers strong contrast against lighter backgrounds, ideal for body text and critical information.

Accessibility notes

Ensure sufficient contrast between #B6A3D2 and #EDE0F0 for critical text elements; larger font sizes may be needed.
#4B0082 provides excellent contrast on #EDE0F0 or #DCD0E6.
Avoid using #DCD0E6 as text on #EDE0F0 due to very low contrast.
Test color combinations for readability, especially for users with color vision deficiencies.

Recommended combinations

Hazy Base

Creates a soft, layered background and subtle informational display.

#EDE0F0 · #DCD0E6 · #B6A3D2

Vibrant Focus

Ideal for prominent calls-to-action, headers, and brand elements.

#EDE0F0 · #8A2BE2 · #4B0082

Blossom Blend

Use for delicate patterns, illustrations, or gradient effects.

#B6A3D2 · #8A2BE2 · #DCD0E6

CSS variables

:root {
  --lavender-haze-bloom-1: #4B0082;
  --lavender-haze-bloom-2: #8A2BE2;
  --lavender-haze-bloom-3: #B6A3D2;
  --lavender-haze-bloom-4: #DCD0E6;
  --lavender-haze-bloom-5: #EDE0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze-bloom": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#B6A3D2",
        4: "#DCD0E6",
        5: "#EDE0F0",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#B6A3D2

Color 4#DCD0E6

Color 5#EDE0F0

Accessibility

Contrast checker

2.2:1Fail

5.6:1AA

8.8:1AAA

10.2:1AAA

2.2:1Fail

2.6:1Fail

4:1AA18

4.7:1AA

5.6:1AA

2.6:1Fail

1.6:1Fail

1.8:1Fail

8.8:1AAA

4:1AA18

1.6:1Fail

1.2:1Fail

10.2:1AAA

4.7:1AA

1.8:1Fail

1.2:1Fail

Similar palettes

More like Lavender Haze Bloom

View all pastel

Cottage Garden Blush

Lavender Bloom Field

Lavender Bloom Morning

Lavender Dream

Lavender Field Breeze

Sakura Blossom Kiss