Back to palettes

Palette

Lavender Field Haze

Dreamy lavenders and soft purples evoking the soothing scent and sight of a blooming 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

#A9A1E0#C1C8E5#DFDCEF#8B84D0#BCC3E9

Palette guide

How to use Lavender Field Haze

Overview

The Lavender Field Haze palette offers a soothing collection of soft purples and cool, understated blues, perfectly capturing the tranquil and fragrant essence of a blooming field. With hues like the deep #8B84D0 (Lavender Grey), the elegant #A9A1E0 (Periwinkle), and the ethereal #DFDCEF (Light Lavender), complemented by #C1C8E5 and #BCC3E9, this palette is ideal for designers seeking a peaceful and harmonious aesthetic. Developers can leverage these hues to create gentle, inviting digital experiences, whether for wellness applications, creative portfolios, or any platform requiring a touch of refined calm and visual softness.

Best used for

  • Gentle brand identities
  • Calming mobile app interfaces
  • Dreamy art and illustration
  • Soft photography editing
  • Personal blogs and portfolios
  • Home decor inspiration

Suggested color roles

primary

#8B84D0 serves as a stable, elegant anchor, suitable for main navigation or foundational UI elements.

secondary

#A9A1E0 provides a soft, complementary purple, excellent for subheadings, card backgrounds, or secondary content areas.

accent

#BCC3E9 offers a subtle, refreshing accent, perfect for highlights, icons, or a touch of organic contrast.

background

#DFDCEF is the ideal light, airy background, ensuring a clean canvas and maximum readability for darker text.

text

Use #8B84D0 for headings. For body text, a dark grey or charcoal provides optimal contrast against #DFDCEF.

Accessibility notes

  • Most colors in this palette are light; ensure sufficient contrast when pairing any of them with #DFDCEF for text.
  • #8B84D0 is the darkest color and should be used for critical text elements against lighter backgrounds.
  • Avoid using #C1C8E5, #BCC3E9, or #A9A1E0 for small text on #DFDCEF without contrast testing.
  • Provide alternative text or visual cues for color-dependent information due to the low contrast nature of some pairings.

Recommended combinations

Serene Flow

For soft, layered interfaces. #DFDCEF as background, #C1C8E5 for cards/panels, and #A9A1E0 for main text.

#DFDCEF · #C1C8E5 · #A9A1E0

Subtle Depth

Create gentle contrast. #DFDCEF as base, #8B84D0 for titles, and #BCC3E9 for supporting elements.

#DFDCEF · #8B84D0 · #BCC3E9

Hazy Harmony

For smooth visual transitions. #A9A1E0 for headers, #BCC3E9 for body text, and #DFDCEF for light icons/accents.

#A9A1E0 · #BCC3E9 · #DFDCEF

CSS variables

:root {
  --lavender-field-haze-5-1: #A9A1E0;
  --lavender-field-haze-5-2: #C1C8E5;
  --lavender-field-haze-5-3: #DFDCEF;
  --lavender-field-haze-5-4: #8B84D0;
  --lavender-field-haze-5-5: #BCC3E9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-field-haze-5": {
        1: "#A9A1E0",
        2: "#C1C8E5",
        3: "#DFDCEF",
        4: "#8B84D0",
        5: "#BCC3E9",
      }
    }
  }
}

Related searches

soft purple blue palettelavender grey colorscalm pastel UIdreamy violet huesgentle web design colors

Palette colors

Hex values

Color 1#A9A1E0
·
Color 2#C1C8E5
·
Color 3#DFDCEF
·
Color 4#8B84D0
·
Color 5#BCC3E9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.8:1Fail
1.4:1Fail
1.4:1Fail
2
1.4:1Fail
1.2:1Fail
2:1Fail
1:1Fail
3
1.8:1Fail
1.2:1Fail
2.5:1Fail
1.3:1Fail
4
1.4:1Fail
2:1Fail
2.5:1Fail
1.9:1Fail
5
1.4:1Fail
1:1Fail
1.3:1Fail
1.9:1Fail

Similar palettes

More like Lavender Field Haze

View all pastel
Lilac Meadow Dream
Amethyst Haze Dream
Cottage Garden Blush
Dreamy Lavender Field
Dreamy Lavender Field
Ghostly Orchid Veil