Palette

Lavender Field Haze

Gentle lavenders and soft mauves capture the serene, misty essence of a vast field at sunrise.

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

#5F4B66#927AA0#C2B4CC#E0DAE7#F2EFF4

Palette guide

How to use Lavender Field Haze

Overview

The Lavender Field Haze palette emanates a serene, misty elegance, blending muted purples and soft greys to capture the tranquil essence of a hazy lavender field. With deep tones like #5F4B66 (Dark Grayish Purple) and #927AA0 (Muted Violet), transitioning to lighter, ethereal shades such as #C2B4CC, #E0DAE7, and the almost-white #F2EFF4, this palette offers a sophisticated and calming aesthetic. Designers will find these hues perfect for creating understated luxury, introspective moods, or minimalist designs. Developers can leverage this palette for refined user interfaces, particularly for wellness, art, or contemplative digital experiences.

Best used for

Minimalist luxury branding
High-end interior design concepts
Wellness and meditation content
Sophisticated editorial layouts
Art photography portfolios
E-commerce for artisanal goods

Suggested color roles

primary

#5F4B66 provides a deep, grounding foundation, excellent for main headings, navigation, or strong brand statements.

secondary

#927AA0 offers a versatile mid-tone, suitable for subheadings, prominent text, or supporting UI elements.

accent

#C2B4CC can serve as a soft, harmonious accent for subtle highlights, interactive states, or decorative flourishes.

background

#F2EFF4 creates a clean, airy canvas, ensuring maximum readability and a spacious, light feel.

text

Use #5F4B66 or #927AA0 for text on #F2EFF4. For darker backgrounds, #F2EFF4 or white provides excellent contrast.

Accessibility notes

Ensure #F2EFF4 provides sufficient contrast with lighter palette colors like #E0DAE7 and #C2B4CC for text.
#5F4B66 and #927AA0 offer good contrast against #F2EFF4 for readable text and key UI elements.
Avoid using #E0DAE7 for small text on #F2EFF4 backgrounds, as it likely won't meet WCAG AA contrast standards.
Provide clear visual hierarchy using contrast to guide users, especially with the soft transitions between hues.

Recommended combinations

Hazy Serenity

For light, ethereal interfaces. #F2EFF4 as background, #E0DAE7 for cards, and #927AA0 for main text.

#F2EFF4 · #E0DAE7 · #927AA0

Deep Contrast

For strong, readable sections. #F2EFF4 as base, #5F4B66 for titles, and #927AA0 for supporting text.

#F2EFF4 · #5F4B66 · #927AA0

Muted Elegance

Creates subtle depth. #927AA0 for a deeper section background, #C2B4CC for elements, and #F2EFF4 for light text.

#927AA0 · #C2B4CC · #F2EFF4

CSS variables

:root {
  --lavender-field-haze-2-1: #5F4B66;
  --lavender-field-haze-2-2: #927AA0;
  --lavender-field-haze-2-3: #C2B4CC;
  --lavender-field-haze-2-4: #E0DAE7;
  --lavender-field-haze-2-5: #F2EFF4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-field-haze-2": {
        1: "#5F4B66",
        2: "#927AA0",
        3: "#C2B4CC",
        4: "#E0DAE7",
        5: "#F2EFF4",
      }
    }
  }
}

Hex values

Color 1#5F4B66

Color 2#927AA0

Color 3#C2B4CC

Color 4#E0DAE7

Color 5#F2EFF4

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

5.7:1AA

6.9:1AA

2.1:1Fail

1.9:1Fail

2.8:1Fail

3.3:1AA18

4:1AA18

1.9:1Fail

1.4:1Fail

1.7:1Fail