Back to palettes

Palette

Misty Lavender Dream

Soft, ethereal purples evoke a dreamlike field of lavender at dawn, touched by mist.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EFEAF3#C9B6DA#A08ABF#78659C#4A3E5C

Palette guide

How to use Misty Lavender Dream

Overview

The Misty Lavender Dream palette presents a soft, ethereal collection of purples, evoking a dreamlike field of lavender touched by dawn mist. Ranging from the deep '#4A3E5C' to the delicate '#EFEAF3', and including the harmonious '#C9B6DA', '#A08ABF', and '#78659C', this palette offers a sophisticated yet gentle aesthetic. It's an excellent choice for designers and developers seeking to create serene, elegant, and calming digital environments. The muted tones ensure a cohesive and understated feel, making it ideal for applications that prioritize tranquility, introspection, and a touch of understated luxury. This palette is perfect for fostering a sense of peace and refinement.

Best used for

  • Yoga and meditation app interfaces
  • Artisanal craft and handmade product brands
  • Personal blogs and creative portfolios
  • Interior decor and home styling websites
  • Gentle skincare and wellness product lines
  • Artistic photography websites

Suggested color roles

primary

Use '#A08ABF' as the main soft purple for primary headings or key visual elements, creating a gentle focus.

secondary

Employ '#78659C' for supporting content, subheadings, or secondary calls to action, adding depth.

accent

Apply '#C9B6DA' for subtle highlights, decorative elements, or hover states, providing a delicate touch.

background

Utilize '#EFEAF3' as the light, airy background for a clean and expansive canvas.

text

For optimal readability, use '#4A3E5C' for body text, ensuring strong contrast on lighter backgrounds.

Accessibility notes

  • Ensure '#4A3E5C' text on '#EFEAF3' background has sufficient contrast for readability.
  • Avoid using '#C9B6DA' or '#A08ABF' for small or critical text, as contrast may be too low.
  • Provide clear visual indicators for interactive elements beyond just color changes.
  • Test across various devices and screen settings to maintain consistent visual clarity.

Recommended combinations

Dreamy Depth

Creates a sophisticated and grounded feel, ideal for footers, main navigation, or impactful sections.

#4A3E5C · #78659C · #A08ABF

Ethereal Mist

Perfect for light, airy layouts, background elements, or sections requiring a delicate and open aesthetic.

#EFEAF3 · #C9B6DA · #A08ABF

Gentle Gradient

Excellent for smooth visual transitions, subtle background gradients, or layered UI components.

#C9B6DA · #A08ABF · #78659C

CSS variables

:root {
  --misty-lavender-dream-1: #EFEAF3;
  --misty-lavender-dream-2: #C9B6DA;
  --misty-lavender-dream-3: #A08ABF;
  --misty-lavender-dream-4: #78659C;
  --misty-lavender-dream-5: #4A3E5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lavender-dream": {
        1: "#EFEAF3",
        2: "#C9B6DA",
        3: "#A08ABF",
        4: "#78659C",
        5: "#4A3E5C",
      }
    }
  }
}

Related searches

soft lavender palettedreamy purple colorsethereal ui designpastel floral brandinggentle web scheme

Palette colors

Hex values

Color 1#EFEAF3
·
Color 2#C9B6DA
·
Color 3#A08ABF
·
Color 4#78659C
·
Color 5#4A3E5C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.3:1AA18
8.3:1AAA
2
1.6:1Fail
1.6:1Fail
2.7:1Fail
5.2:1AA
3
2.6:1Fail
1.6:1Fail
1.7:1Fail
3.2:1AA18
4
4.3:1AA18
2.7:1Fail
1.7:1Fail
1.9:1Fail
5
8.3:1AAA
5.2:1AA
3.2:1AA18
1.9:1Fail

Similar palettes

More like Misty Lavender Dream

View all pastel