Palette

Lavender Haze Garden

Gentle, ethereal purples creating a serene garden atmosphere, as if seen through a soft lavender haze.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A2BE2#9370DB#B19CD9#DCD0FF#F5F0FF

Palette guide

How to use Lavender Haze Garden

Overview

The Lavender Haze Garden palette offers a gentle and ethereal collection of purples, perfect for creating serene and sophisticated designs. Ranging from the deep violet of #8A2BE2 to the softest lavender of #F5F0FF, this palette evokes a tranquil garden atmosphere. Designers and developers can leverage these harmonious shades, including the delicate #B19CD9, for branding, user interfaces, or digital art that requires a touch of calm elegance. Its soft transitions and inviting tones make it versatile for projects aiming for a dreamy, natural, or wellness-oriented aesthetic. Explore the full spectrum from vibrant to subtle to bring a peaceful energy to your creations.

Best used for

Wellness and spa branding
Floral design and event invitations
Children's book illustrations
Feminine product packaging
Calming mobile app interfaces
Artistic photography websites

Suggested color roles

primary

Use #8A2BE2 as a dominant brand color for headings or key call-to-action buttons, conveying elegance and depth.

secondary

Apply #9370DB for supporting elements, subheadings, or background sections that need a softer, yet still impactful, presence.

accent

Incorporate #B19CD9 for subtle highlights, interactive states, or decorative elements to add a delicate touch.

background

Utilize #F5F0FF as a clean, airy background, allowing other colors to pop while maintaining a light and serene feel.

text

For primary text, a dark charcoal or black provides optimal readability on light backgrounds. For headings on #F5F0FF, consider #8A2BE2 or #9370DB.

Accessibility notes

Ensure sufficient contrast when pairing #DCD0FF or #F5F0FF with lighter text colors; consider dark text like #8A2BE2.
Verify that text against #B19CD9 meets WCAG guidelines, especially for smaller font sizes.
The darkest shade, #8A2BE2, provides excellent contrast against #F5F0FF for headings and important information.
Avoid using #DCD0FF for small text on a #F5F0FF background due to low contrast.

Recommended combinations

Soft Gradient

Ideal for smooth color transitions in backgrounds, banners, or visual elements requiring depth.

#8A2BE2 · #9370DB · #B19CD9

Light & Airy

Perfect for clean backgrounds, subtle overlays, or delicate design elements that need to feel light.

#DCD0FF · #F5F0FF · #B19CD9

Deep Contrast

Effective for high-impact headings, call-to-actions, or highlighting key information against a soft base.

#8A2BE2 · #F5F0FF · #9370DB

CSS variables

:root {
  --lavender-haze-garden-1: #8A2BE2;
  --lavender-haze-garden-2: #9370DB;
  --lavender-haze-garden-3: #B19CD9;
  --lavender-haze-garden-4: #DCD0FF;
  --lavender-haze-garden-5: #F5F0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze-garden": {
        1: "#8A2BE2",
        2: "#9370DB",
        3: "#B19CD9",
        4: "#DCD0FF",
        5: "#F5F0FF",
      }
    }
  }
}

Hex values

Color 1#8A2BE2

Color 2#9370DB

Color 3#B19CD9

Color 4#DCD0FF

Color 5#F5F0FF

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

4.1:1AA18

5.3:1AA

1.6:1Fail

1.5:1Fail

2.6:1Fail

3.4:1AA18

2.4:1Fail

1.5:1Fail

1.7:1Fail

2.2:1Fail