Back to palettes

Palette

Lavender Haze Whisper

Gentle and ethereal purples, like a soft lavender field shrouded in a dreamlike morning haze.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0E0EF#C3C3E0#A6A6D1#8989C2#6C6CB3

Palette guide

How to use Lavender Haze Whisper

Overview

The Lavender Haze Whisper palette offers a refined and serene gradient of cool purples, evoking the peaceful stillness of a misty morning field. From the deep, grounding #6C6CB3 to the almost white #E0E0EF, with harmonious mid-tones like #A6A6D1, this palette is excellent for designers and developers seeking a sophisticated, calming, and minimalist aesthetic. Its subtle variations allow for elegant depth without harsh contrasts, making it perfect for clean user interfaces, tranquil branding, or atmospheric digital illustrations. This palette ensures a cohesive and soothing visual experience, promoting a sense of calm and clarity.

Best used for

  • Minimalist web design
  • Corporate wellness branding
  • Calm-inducing mobile apps
  • Luxury product packaging
  • Educational and academic platforms
  • Serene digital art and backgrounds

Suggested color roles

primary

Designate #6C6CB3 for primary branding, strong headings, or foundational elements, providing a solid, calming anchor.

secondary

Utilize #8989C2 for supporting content, active states, or graphic elements, maintaining depth and sophistication.

accent

Apply #A6A6D1 for subtle accents, hover states, or secondary details, adding a gentle lift.

background

Employ #E0E0EF as a pristine, light background, creating an open and airy feel that lets content breathe.

text

For body text, use a dark charcoal or black for optimal legibility. For headings on #E0E0EF, #6C6CB3 offers excellent contrast and elegance.

Accessibility notes

  • Ensure text on #E0E0EF or #C3C3E0 uses a dark enough color like #6C6CB3 to meet WCAG contrast standards.
  • Avoid using #C3C3E0 for small text on #E0E0EF as the contrast will be insufficient.
  • The darkest shade, #6C6CB3, provides excellent readability for text against the lighter palette colors.
  • Consider using a slightly darker text color than #8989C2 if placing it on a #A6A6D1 background.

Recommended combinations

Misty Gradient

Ideal for smooth, continuous backgrounds or UI elements that require a gentle transition.

#6C6CB3 · #8989C2 · #A6A6D1

Clean & Light

Perfect for airy layouts, background cards, or subtle design elements where clarity is key.

#E0E0EF · #C3C3E0 · #8989C2

Deep Anchor

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

#6C6CB3 · #E0E0EF · #A6A6D1

CSS variables

:root {
  --lavender-haze-whisper-2-1: #E0E0EF;
  --lavender-haze-whisper-2-2: #C3C3E0;
  --lavender-haze-whisper-2-3: #A6A6D1;
  --lavender-haze-whisper-2-4: #8989C2;
  --lavender-haze-whisper-2-5: #6C6CB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze-whisper-2": {
        1: "#E0E0EF",
        2: "#C3C3E0",
        3: "#A6A6D1",
        4: "#8989C2",
        5: "#6C6CB3",
      }
    }
  }
}

Related searches

cool purple color schememinimalist lavender paletteserene UI colorsmisty purple gradientcalm web design palette

Palette colors

Hex values

Color 1#E0E0EF
·
Color 2#C3C3E0
·
Color 3#A6A6D1
·
Color 4#8989C2
·
Color 5#6C6CB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.5:1Fail
3.6:1AA18
2
1.3:1Fail
1.4:1Fail
1.9:1Fail
2.8:1Fail
3
1.8:1Fail
1.4:1Fail
1.4:1Fail
2:1Fail
4
2.5:1Fail
1.9:1Fail
1.4:1Fail
1.4:1Fail
5
3.6:1AA18
2.8:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Lavender Haze Whisper

View all pastel