Palette

Lavender Field Haze

Soft purples and blues blend like a gentle mist over a fragrant, sprawling lavender field.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DDA0DD#E6E6FA#ADD8E6#BA55D3#8A2BE2

Palette guide

How to use Lavender Field Haze

Overview

The Lavender Field Haze palette beautifully blends soft purples and cool blues, evoking the tranquil image of a misty lavender field. With shades like the gentle #DDA0DD (Thistle), the airy #E6E6FA (Lavender Blush), the refreshing #ADD8E6 (Light Blue), the vibrant #BA55D3 (Medium Orchid), and the striking #8A2BE2 (Blue Violet), this palette offers a dreamy and harmonious aesthetic. Designers will find these hues perfect for creating serene, ethereal, or nature-inspired visual experiences. Developers can leverage this palette to craft soothing digital environments, ideal for wellness, creative, or any application requiring a touch of calm and delicate beauty.

Best used for

Dreamy wedding stationery
Soft pastel UI designs
Children's book illustrations
Spa and aromatherapy branding
Creative blog themes
Artistic digital presentations

Suggested color roles

primary

#8A2BE2 provides a deep, captivating purple, excellent for main headings or brand focal points that need attention.

secondary

#BA55D3 offers a vibrant, supportive purple, suitable for subheadings, navigation, or secondary graphical elements.

accent

#ADD8E6 introduces a cool, refreshing contrast, perfect for interactive elements, data visualization accents, or subtle highlights.

background

#E6E6FA serves as a light, airy base, ensuring spaciousness and excellent readability for darker text.

text

Use #8A2BE2 or #BA55D3 for prominent headlines. For body text, a dark grey or charcoal is recommended against #E6E6FA for readability.

Accessibility notes

Ensure #E6E6FA provides sufficient contrast with lighter palette colors like #DDA0DD or #ADD8E6 for smaller text.
#8A2BE2 and #BA55D3 offer excellent contrast against #E6E6FA for accessible text.
Avoid using #DDA0DD for critical text elements on light backgrounds, as it may not meet WCAG AA contrast standards.
Test interactive elements (buttons, links) to ensure they have clear visual feedback and sufficient contrast.

Recommended combinations

Misty Bloom

For a soft, layered UI. #E6E6FA as background, #DDA0DD for cards/panels, and #BA55D3 for main text.

#E6E6FA · #DDA0DD · #BA55D3

Fresh Contrast

Highlight key actions. #E6E6FA for background, #8A2BE2 for primary buttons, #ADD8E6 for secondary elements.

#E6E6FA · #8A2BE2 · #ADD8E6

Ethereal Depth

Creates a gentle, sophisticated look. #BA55D3 for headers, #DDA0DD for body text against a medium background, and #E6E6FA for light icons.

#BA55D3 · #DDA0DD · #E6E6FA

CSS variables

:root {
  --lavender-field-haze-4-1: #DDA0DD;
  --lavender-field-haze-4-2: #E6E6FA;
  --lavender-field-haze-4-3: #ADD8E6;
  --lavender-field-haze-4-4: #BA55D3;
  --lavender-field-haze-4-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-field-haze-4": {
        1: "#DDA0DD",
        2: "#E6E6FA",
        3: "#ADD8E6",
        4: "#BA55D3",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#DDA0DD

Color 2#E6E6FA

Color 3#ADD8E6

Color 4#BA55D3

Color 5#8A2BE2

Accessibility

Contrast checker

1.7:1Fail

1.4:1Fail

1.9:1Fail

2.9:1Fail

1.7:1Fail

1.2:1Fail

3.2:1AA18

4.8:1AA