Palette

Lavender Haze Field

Soft, romantic purples that capture the peaceful tranquility of a sun-kissed lavender field at dusk.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6E6FA#D8BFD8#BDA0D8#9A77B8#7D5D9E

Palette guide

How to use Lavender Haze Field

Overview

The "Lavender Haze Field" palette offers a romantic and peaceful blend of purples, capturing the tranquility of a sun-kissed lavender field at dusk. It features the very light #E6E6FA, the subtle #D8BFD8, and the inviting #BDA0D8. These are beautifully complemented by the more vibrant #9A77B8 and the grounding #7D5D9E. This collection is perfect for designers and developers aiming to create interfaces or branding that convey serenity, delicate beauty, and a touch of wistful elegance. It's particularly effective for projects requiring a soothing yet visually engaging aesthetic, from digital experiences to print media.

Best used for

Romantic wedding or event branding
Spa and wellness e-commerce sites
Fine art photography portfolio
Luxury home fragrance packaging
Meditation app interfaces
Boutique hotel branding

Suggested color roles

primary

#BDA0D8 - A charming, mid-tone purple suitable for main content areas, softer buttons, or background sections.

secondary

#9A77B8 - A more vibrant purple, excellent for calls-to-action, important links, or to provide a pop of color.

accent

#7D5D9E - A deep, grounding purple perfect for impactful calls-to-action, important icons, or luxurious detailing.

background

#E6E6FA - An extremely light, almost white lavender providing a clean, airy base that enhances other colors.

text

#7D5D9E - A deep, readable purple that offers good contrast against light backgrounds for body text and headings.

Accessibility notes

Ensure sufficient contrast for #D8BFD8 or #BDA0D8 when used on #E6E6FA; larger text sizes may be required.
#7D5D9E provides excellent contrast on #E6E6FA, making it suitable for primary text.
Avoid using #D8BFD8 as text color on #E6E6FA for critical information due to very low contrast.
Test color combinations for readability under various lighting conditions, especially for users with low vision.

Recommended combinations

Field Base

Creates a soft, layered background effect for a gentle, ethereal presence.

#E6E6FA · #D8BFD8 · #BDA0D8

Romantic Contrast

Provides visual interest for headings, interactive elements, and subtle accents.

#E6E6FA · #9A77B8 · #7D5D9E

Hazy Blend

Use for delicate patterns, illustrations, or gradient effects with gentle transitions.

#D8BFD8 · #BDA0D8 · #9A77B8

CSS variables

:root {
  --lavender-haze-field-1: #E6E6FA;
  --lavender-haze-field-2: #D8BFD8;
  --lavender-haze-field-3: #BDA0D8;
  --lavender-haze-field-4: #9A77B8;
  --lavender-haze-field-5: #7D5D9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze-field": {
        1: "#E6E6FA",
        2: "#D8BFD8",
        3: "#BDA0D8",
        4: "#9A77B8",
        5: "#7D5D9E",
      }
    }
  }
}

Hex values

Color 1#E6E6FA

Color 2#D8BFD8

Color 3#BDA0D8

Color 4#9A77B8

Color 5#7D5D9E

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

3:1Fail

4.3:1AA18

1.4:1Fail

1.3:1Fail

2.2:1Fail

3.1:1AA18

1.9:1Fail

1.3:1Fail

1.6:1Fail

2.3:1Fail

3:1Fail

2.2:1Fail

1.6:1Fail

1.5:1Fail

4.3:1AA18

3.1:1AA18

2.3:1Fail

1.5:1Fail

Similar palettes

More like Lavender Haze Field

Dreamy Lavender Field

Lavender Bloom Field

Lavender Bloom Fields