Back to palettes

Palette

Lavender Mist Dream

A gentle, dreamlike blend of soft lavenders and muted purples, evoking peaceful, fragrant fields at dusk.

PastelCalm5 colors
More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DDCFF4#B7A0DD#8F72C6#6747AF#3F2388

Palette guide

How to use Lavender Mist Dream

Overview

The Lavender Mist Dream palette provides a profound and ethereal journey through various shades of lavender and deep purple, from the light #DDCFF4 to the intense #3F2388, including the balanced #8F72C6. This collection is ideal for designers and developers who wish to evoke a sense of peaceful contemplation, luxury, or serene sophistication. It's perfect for branding, user interfaces, or digital art that aims for a dreamy, introspective, or high-end aesthetic. The smooth transition from light to dark ensures versatility, allowing for both soft, airy designs and dramatic, impactful statements.

Best used for

  • Luxury brand identity
  • Meditation and mindfulness apps
  • High-end skincare packaging
  • Art gallery websites
  • Sophisticated event decor
  • Dreamy digital photography backdrops

Suggested color roles

primary

Designate #3F2388 as the main brand color for strong, luxurious statements, headings, or foundational elements.

secondary

Utilize #6747AF for supporting content, active states, or graphic elements that require depth and elegance.

accent

Apply #B7A0DD for subtle highlights, interactive elements, or secondary details, adding a gentle, inviting touch.

background

Employ #DDCFF4 as a soft, misty background, creating an open and serene canvas for other elements.

text

For primary body text, a dark charcoal or black ensures optimal readability. For headings on #DDCFF4, #3F2388 offers excellent contrast.

Accessibility notes

  • Ensure sufficient contrast for text on #DDCFF4; use darker colors like #3F2388 or #6747AF for legibility.
  • Avoid using #B7A0DD for small text on #DDCFF4 due to low contrast, which can hinder readability.
  • The darkest shade, #3F2388, provides strong contrast against the lightest palette colors for clear text and UI elements.
  • Check WCAG guidelines carefully for text on #8F72C6, especially for smaller font sizes.

Recommended combinations

Deep Dream

Ideal for creating strong, luxurious gradients or impactful sections that need depth and sophistication.

#3F2388 · #6747AF · #8F72C6

Misty Light

Perfect for soft backgrounds, subtle overlays, or elements needing an ethereal, gentle quality.

#DDCFF4 · #B7A0DD · #8F72C6

Impactful Haze

Use for prominent call-to-actions, key headings, or to establish a strong visual hierarchy against a light base.

#3F2388 · #DDCFF4 · #B7A0DD

CSS variables

:root {
  --lavender-mist-dream-1: #DDCFF4;
  --lavender-mist-dream-2: #B7A0DD;
  --lavender-mist-dream-3: #8F72C6;
  --lavender-mist-dream-4: #6747AF;
  --lavender-mist-dream-5: #3F2388;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-mist-dream": {
        1: "#DDCFF4",
        2: "#B7A0DD",
        3: "#8F72C6",
        4: "#6747AF",
        5: "#3F2388",
      }
    }
  }
}

Related searches

deep lavender color palettedreamy purple shadesluxury UI colorsmisty floral designsophisticated purple branding

Palette colors

Hex values

Color 1#DDCFF4
·
Color 2#B7A0DD
·
Color 3#8F72C6
·
Color 4#6747AF
·
Color 5#3F2388
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.6:1AA
7.9:1AAA
2
1.6:1Fail
1.7:1Fail
2.9:1Fail
5:1AA
3
2.7:1Fail
1.7:1Fail
1.7:1Fail
3:1Fail
4
4.6:1AA
2.9:1Fail
1.7:1Fail
1.7:1Fail
5
7.9:1AAA
5:1AA
3:1Fail
1.7:1Fail

Similar palettes

More like Lavender Mist Dream

View all Pastel