Back to palettes

Palette

Lavender Haze

Soft and tranquil, like the gentle, soothing purples of a vast lavender field under a hazy twilight sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#673AB7#7E57C2#9575CD#B39DDB#D1C4E9

Palette guide

How to use Lavender Haze

Overview

The Lavender Haze palette offers a deeply soothing and harmonious range of purples, from the rich #673AB7 to the delicate #D1C4E9, including elegant mid-tones like #9575CD. This collection perfectly embodies the tranquility of a vast lavender field under a hazy twilight sky, making it an excellent choice for designers and developers seeking a calm, sophisticated, and dreamy aesthetic. It's particularly effective for branding, user interfaces, and digital content that aims to evoke peace, luxury, and serenity. The consistent hue variation ensures a cohesive and visually appealing experience across all applications.

Best used for

  • Luxury lifestyle branding
  • Wellness and meditation apps
  • High-end cosmetic packaging
  • Sophisticated event invitations
  • Educational and informative websites
  • Elegant personal blogs

Suggested color roles

primary

Use #673AB7 as the dominant color for strong branding, main navigation, or impactful headings, conveying depth and luxury.

secondary

Apply #7E57C2 for supporting elements, subheadings, or background sections that need a softer yet authoritative presence.

accent

Incorporate #9575CD for subtle highlights, interactive states, or decorative elements to add a touch of refined elegance.

background

Utilize #D1C4E9 as a light, airy background, providing a clean canvas that allows other colors to stand out gently.

text

For primary body text, a dark charcoal or black ensures optimal readability. For headings on #D1C4E9, #673AB7 offers excellent contrast.

Accessibility notes

  • Ensure sufficient contrast when placing text on #D1C4E9 or #B39DDB; use darker shades like #673AB7 for legibility.
  • Avoid using #B39DDB for small text on #D1C4E9 due to low contrast, which can impede readability.
  • The darkest shade, #673AB7, provides strong contrast against the lightest palette colors for clear text and UI elements.
  • Check WCAG guidelines carefully for text on #9575CD, especially for smaller font sizes.

Recommended combinations

Deep Serenity

Ideal for creating depth in gradients, headers, or sections that require a strong, cohesive purple presence.

#673AB7 · #7E57C2 · #9575CD

Soft Transition

Perfect for subtle backgrounds, card elements, or areas where a gentle, ethereal feel is desired.

#B39DDB · #D1C4E9 · #9575CD

Haze Contrast

Use for prominent call-to-actions, key headings, or to highlight important information against a light base.

#673AB7 · #D1C4E9 · #7E57C2

CSS variables

:root {
  --lavender-haze-1: #673AB7;
  --lavender-haze-2: #7E57C2;
  --lavender-haze-3: #9575CD;
  --lavender-haze-4: #B39DDB;
  --lavender-haze-5: #D1C4E9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze": {
        1: "#673AB7",
        2: "#7E57C2",
        3: "#9575CD",
        4: "#B39DDB",
        5: "#D1C4E9",
      }
    }
  }
}

Related searches

purple pastel color palettedreamy lavender shadescalm UI designsophisticated purple brandingmonochromatic purple palette

Palette colors

Hex values

Color 1#673AB7
·
Color 2#7E57C2
·
Color 3#9575CD
·
Color 4#B39DDB
·
Color 5#D1C4E9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3.1:1AA18
4.5:1AA18
2
1.4:1Fail
1.4:1Fail
2.2:1Fail
3.2:1AA18
3
2:1Fail
1.4:1Fail
1.5:1Fail
2.2:1Fail
4
3.1:1AA18
2.2:1Fail
1.5:1Fail
1.5:1Fail
5
4.5:1AA18
3.2:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Lavender Haze

View all pastel
Lavender Dream Haze
Lavender Field Dream
Lavender Field Dreams
Provence Lavender Haze
Whispering Lilac
Amethyst Haze Dream