Back to palettes

Palette

Lavender Haze Dreams

The gentle, calming hues of a lavender field at dusk, bathed in a soft, dreamy haze.

PastelCalm5 colors
More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6E6FA#D8BFD8#DDA0DD#BA55D3#C0C0C0

Palette guide

How to use Lavender Haze Dreams

Overview

The "Lavender Haze Dreams" palette captures the gentle, calming hues of a lavender field at dusk, bathed in a soft, dreamy haze. It features the very light #E6E6FA, the subtle #D8BFD8, and the inviting #DDA0DD. These are beautifully contrasted by the more vibrant #BA55D3 and the neutral #C0C0C0. This collection is perfect for designers and developers aiming to create interfaces or branding that convey serenity, delicate beauty, and a touch of wistful elegance. It's particularly effective for projects requiring a soothing yet visually engaging aesthetic, from digital experiences to print media.

Best used for

  • Sleep aid apps or mindfulness platforms
  • Romantic event invitations and decor
  • Feminine fashion or lingerie branding
  • Poetry or storytelling websites
  • Home decor e-commerce focusing on comfort
  • Artistic photography series

Suggested color roles

primary

#DDA0DD - A charming, mid-tone purple suitable for main content areas, softer buttons, or background sections.

secondary

#BA55D3 - A more vibrant purple, excellent for calls-to-action, important links, or to provide a pop of color.

accent

#C0C0C0 - A versatile neutral gray, perfect for subtle accents, dividers, or secondary text that needs to recede slightly.

background

#E6E6FA - An extremely light, almost white lavender providing a clean, airy base that enhances other colors.

text

#BA55D3 - A vibrant yet readable purple that offers good contrast against light backgrounds for body text and headings.

Accessibility notes

  • Ensure sufficient contrast for #D8BFD8 or #DDA0DD when used on #E6E6FA; larger text sizes may be required.
  • #BA55D3 provides good contrast on #E6E6FA, making it suitable for primary text.
  • Avoid using #D8BFD8 as text color on #E6E6FA for critical information due to very low contrast.
  • Test color combinations for readability under various lighting conditions, especially for users with low vision.

Recommended combinations

Dusk Haze

Creates a soft, layered background effect for a gentle, ethereal presence.

#E6E6FA · #D8BFD8 · #DDA0DD

Dreamy Contrast

Provides visual interest for headings, interactive elements, and subtle accents.

#E6E6FA · #BA55D3 · #C0C0C0

Subtle Depth

Use for delicate patterns, illustrations, or gradient effects with gentle transitions.

#D8BFD8 · #DDA0DD · #BA55D3

CSS variables

:root {
  --lavender-haze-dreams-1: #E6E6FA;
  --lavender-haze-dreams-2: #D8BFD8;
  --lavender-haze-dreams-3: #DDA0DD;
  --lavender-haze-dreams-4: #BA55D3;
  --lavender-haze-dreams-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze-dreams": {
        1: "#E6E6FA",
        2: "#D8BFD8",
        3: "#DDA0DD",
        4: "#BA55D3",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

lavender dusk color schemedreamy pastel purple palettesoft romantic colorscalm purple gray designethereal UI colors

Palette colors

Hex values

Color 1#E6E6FA
·
Color 2#D8BFD8
·
Color 3#DDA0DD
·
Color 4#BA55D3
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
3.2:1AA18
1.5:1Fail
2
1.4:1Fail
1.2:1Fail
2.3:1Fail
1.1:1Fail
3
1.7:1Fail
1.2:1Fail
1.9:1Fail
1.1:1Fail
4
3.2:1AA18
2.3:1Fail
1.9:1Fail
2.2:1Fail
5
1.5:1Fail
1.1:1Fail
1.1:1Fail
2.2:1Fail

Similar palettes

More like Lavender Haze Dreams

View all Pastel