Back to palettes

Palette

Lavender Field Haze

Soft purples and cool blues, evoking the tranquil and fragrant fields of lavender.

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

#8A2BE2#D8BFD8#E6E6FA#9370DB#B0C4DE

Palette guide

How to use Lavender Field Haze

Overview

The Lavender Field Haze palette offers a tranquil blend of soft purples and cool blues, perfectly capturing the serene, misty essence of a lavender field. Featuring the vibrant #8A2BE2 (Blue Violet), the gentle #D8BFD8 (Thistle), the ethereal #E6E6FA (Lavender Blush), the medium #9370DB (Medium Purple), and the calming #B0C4DE (Light Steel Blue), this palette is ideal for designers seeking a peaceful and harmonious aesthetic. Developers can leverage these hues to create soothing digital experiences, whether for wellness applications, nature-inspired websites, or any platform requiring a touch of refined calm and visual depth.

Best used for

  • Spa and relaxation services
  • Nature-themed web applications
  • Feminine lifestyle branding
  • Art and photography showcases
  • Calming UI/UX design
  • Wedding stationery and decor

Suggested color roles

primary

#8A2BE2 provides a rich, captivating purple, excellent for main headings or brand focal points that need to stand out.

secondary

#9370DB offers a balanced, supportive purple, suitable for subheadings, navigation, or secondary graphical elements.

accent

#B0C4DE 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 for prominent headlines. For body text, a dark grey or charcoal is recommended against #E6E6FA for optimal readability.

Accessibility notes

  • Ensure #E6E6FA provides sufficient contrast with lighter palette colors like #D8BFD8 or #B0C4DE for smaller text.
  • #8A2BE2 and #9370DB offer excellent contrast against #E6E6FA for accessible text.
  • Avoid using #D8BFD8 for critical text elements on light backgrounds, as it may not meet WCAG AA contrast standards.
  • Test interactive elements for clear visual feedback and sufficient contrast to ensure usability for all users.

Recommended combinations

Hazy Calm

For a soft, layered UI. #E6E6FA as background, #D8BFD8 for cards/panels, and #9370DB for main text.

#E6E6FA · #D8BFD8 · #9370DB

Cool Accent

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

#E6E6FA · #8A2BE2 · #B0C4DE

Misty Depth

Creates a gentle, sophisticated look. #9370DB for headers, #B0C4DE for body text against a medium background, and #E6E6FA for light icons.

#9370DB · #B0C4DE · #E6E6FA

CSS variables

:root {
  --lavender-field-haze-3-1: #8A2BE2;
  --lavender-field-haze-3-2: #D8BFD8;
  --lavender-field-haze-3-3: #E6E6FA;
  --lavender-field-haze-3-4: #9370DB;
  --lavender-field-haze-3-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-field-haze-3": {
        1: "#8A2BE2",
        2: "#D8BFD8",
        3: "#E6E6FA",
        4: "#9370DB",
        5: "#B0C4DE",
      }
    }
  }
}

Related searches

lavender blue color schememisty purple palettecalm UI design colorsfloral haze aestheticsoft natural palette

Palette colors

Hex values

Color 1#8A2BE2
·
Color 2#D8BFD8
·
Color 3#E6E6FA
·
Color 4#9370DB
·
Color 5#B0C4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.5:1AA18
4.8:1AA
1.6:1Fail
3.3:1AA18
2
3.5:1AA18
1.4:1Fail
2.2:1Fail
1:1Fail
3
4.8:1AA
1.4:1Fail
3.1:1AA18
1.4:1Fail
4
1.6:1Fail
2.2:1Fail
3.1:1AA18
2.1:1Fail
5
3.3:1AA18
1:1Fail
1.4:1Fail
2.1:1Fail

Similar palettes

More like Lavender Field Haze

View all pastel
Amethyst Haze Veil
Lavender Field Dreams
Lavender Field Haze
Lavender Haze Whisper
Provencal Lavender Dreams
Provence Lavender Haze