Palette

Lavender Haze Dream

A tranquil blend of gentle purples, like a serene field of lavender dissolving into a soft, dreamlike mist.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A5ACD#8A2BE2#9370DB#DDA0DD#E6E6FA

Palette guide

How to use Lavender Haze Dream

Overview

The "Lavender Haze Dream" palette offers a tranquil and ethereal blend of gentle purples, evoking a serene lavender field dissolving into a soft, dreamlike mist. It features the vibrant #8A2BE2, a rich #6A5ACD, and the elegant #9370DB. These are beautifully complemented by the softer, muted #DDA0DD and the airy, almost white #E6E6FA. This collection is ideal for designers and developers seeking to create a sense of calm, sophistication, and dreamy elegance. It's particularly effective for projects that require a soothing yet visually captivating aesthetic, from digital interfaces to elegant branding.

Best used for

Meditation and wellness app design
High-end stationery or invitations
Luxury spa or beauty product branding
E-commerce sites for artisan goods
Wedding planning websites
Artistic photography portfolio

Suggested color roles

primary

#9370DB - A balanced, appealing purple suitable for main content areas, prominent buttons, and key interactive elements.

secondary

#6A5ACD - Use for secondary actions, subheadings, or to add a touch more depth and formality.

accent

#8A2BE2 - A vibrant, energetic purple perfect for impactful calls-to-action, important icons, or luxurious detailing.

background

#E6E6FA - A very light, almost white lavender providing a clean, airy base that allows other colors to shine.

text

#6A5ACD - A rich, readable purple that offers good contrast against light backgrounds for body text and headings.

Accessibility notes

Ensure sufficient contrast for #DDA0DD when used on #E6E6FA, especially for smaller text.
#6A5ACD and #8A2BE2 provide strong contrast on #E6E6FA, making them ideal for primary text and highlights.
Avoid using #DDA0DD as text on #E6E6FA for critical information due to low contrast.
Test color combinations for readability under various lighting conditions and screen types.

Recommended combinations

Dreamy Base

Creates a soft, ethereal background and subtle informational display.

#E6E6FA · #DDA0DD · #9370DB

Vibrant Impact

Ideal for prominent calls-to-action, headers, and brand elements.

#E6E6FA · #8A2BE2 · #6A5ACD

Soft Transition

Use for gradients, illustrations, or decorative flourishes with gentle transitions.

#DDA0DD · #9370DB · #6A5ACD

CSS variables

:root {
  --lavender-haze-dream-1: #6A5ACD;
  --lavender-haze-dream-2: #8A2BE2;
  --lavender-haze-dream-3: #9370DB;
  --lavender-haze-dream-4: #DDA0DD;
  --lavender-haze-dream-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze-dream": {
        1: "#6A5ACD",
        2: "#8A2BE2",
        3: "#9370DB",
        4: "#DDA0DD",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#6A5ACD

Color 2#8A2BE2

Color 3#9370DB

Color 4#DDA0DD

Color 5#E6E6FA

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

2.6:1Fail

4.3:1AA18

1.1:1Fail

1.6:1Fail

2.9:1Fail

4.8:1AA

1.4:1Fail

1.6:1Fail

1.8:1Fail

3.1:1AA18

2.6:1Fail

2.9:1Fail

1.8:1Fail

1.7:1Fail

4.3:1AA18

4.8:1AA

3.1:1AA18

1.7:1Fail

Similar palettes

More like Lavender Haze Dream

Dreamy Lavender Field

Ethereal Whispering Veil

Lavender Fields Dream