Back to palettes

Palette

Lavender Field Haze

Soft, hazy purples mimicking the ethereal expanse of a lavender field under a gentle, calming sky.

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

#F2F0FF#E6D9FF#CCB3FF#B28CFF#9966FF

Palette guide

How to use Lavender Field Haze

Overview

The Lavender Field Haze palette offers a serene spectrum of soft purples, perfect for designs requiring a gentle, calming touch. Featuring ethereal shades from the near-white #F2F0FF to the rich #9966FF, alongside #E6D9FF, #CCB3FF, and #B28CFF, this collection evokes the tranquility of a misty lavender field. Designers can leverage its harmonious progression for delicate interfaces, branding that speaks to wellness, or comforting digital experiences. Developers will find these hex codes easy to implement for subtle gradients, soothing backgrounds, and accessible text elements, ensuring a consistent and peaceful aesthetic across various platforms. Its inherent softness makes it versatile for both digital and print media.

Best used for

  • Wellness and spa branding
  • Baby product packaging
  • Wedding invitations and stationery
  • Meditation app interfaces
  • Feminine lifestyle blogs
  • Serene website backgrounds

Suggested color roles

primary

Use #B28CFF as a foundational color for main sections or prominent UI elements, balancing vibrancy with tranquility.

secondary

Employ #CCB3FF for supporting graphics, secondary buttons, or subtle accents to maintain the palette's gentle flow.

accent

Reserve #9966FF for calls to action, important icons, or elements needing a touch of deeper emphasis without being overly bold.

background

The lightest shade, #F2F0FF, is ideal for clean, airy backgrounds, providing a soft canvas for other elements.

text

For excellent readability on light backgrounds like #F2F0FF or #E6D9FF, use a dark charcoal or black. For headings or decorative text, #9966FF offers a cohesive, softer alternative.

Accessibility notes

  • Ensure sufficient contrast when using #9966FF or #B28CFF for text on light backgrounds like #F2F0FF to meet WCAG AA standards.
  • Avoid pairing #E6D9FF with #CCB3FF for essential text or interactive elements due to their low contrast.
  • Consider using a darker neutral color for body text to improve readability, even with the deepest palette purples.
  • Test color combinations with various user settings, including high contrast modes, to ensure broad accessibility.

Recommended combinations

Misty Horizon

Ideal for soft, layered backgrounds or delicate illustrations, creating a gradient-like effect that feels expansive and light.

#F2F0FF · #E6D9FF · #CCB3FF

Deep Calm

Perfect for UI elements where depth is desired, such as card borders, interactive states, or subtle shadows, maintaining a cohesive purple theme.

#CCB3FF · #B28CFF · #9966FF

Gentle Accent

Use #F2F0FF as a base, #B28CFF for primary content, and #9966FF for a striking yet harmonious call to action or key highlight.

#F2F0FF · #B28CFF · #9966FF

CSS variables

:root {
  --lavender-field-haze-1: #F2F0FF;
  --lavender-field-haze-2: #E6D9FF;
  --lavender-field-haze-3: #CCB3FF;
  --lavender-field-haze-4: #B28CFF;
  --lavender-field-haze-5: #9966FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-field-haze": {
        1: "#F2F0FF",
        2: "#E6D9FF",
        3: "#CCB3FF",
        4: "#B28CFF",
        5: "#9966FF",
      }
    }
  }
}

Related searches

pastel purple color schemesoft lavender palettecalm floral design colorsgentle purple web designlight purple branding

Palette colors

Hex values

Color 1#F2F0FF
·
Color 2#E6D9FF
·
Color 3#CCB3FF
·
Color 4#B28CFF
·
Color 5#9966FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.3:1Fail
3.3:1AA18
2
1.2:1Fail
1.4:1Fail
1.9:1Fail
2.8:1Fail
3
1.6:1Fail
1.4:1Fail
1.4:1Fail
2:1Fail
4
2.3:1Fail
1.9:1Fail
1.4:1Fail
1.4:1Fail
5
3.3:1AA18
2.8:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Lavender Field Haze

View all pastel
Lavender Haze Whisper
Dreamy Lavender Field
Dreamy Lavender Field
Lavender Bloom Field
Lavender Bloom Morning
Lavender Dream Haze