Palette

Lavender Haze Whisper

Gentle purples and blues merge, like a dreamy lavender field at the cusp of twilight.

coolcalm5 colors

More cool 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

#DDA0DD#E6E6FA#B0C4DE#8A2BE2#6A5ACD

Palette guide

How to use Lavender Haze Whisper

Overview

The Lavender Haze Whisper palette blends soft purples and cool blues, creating a serene and dreamy aesthetic reminiscent of a twilight lavender field. Featuring the gentle #DDA0DD, the airy #E6E6FA, and the calming #B0C4DE, alongside vibrant #8A2BE2 and deep #6A5ACD, this palette offers a versatile range for designers and developers. It's ideal for projects that aim to evoke tranquility, sophistication, or a touch of romanticism. From elegant branding to soothing user interfaces or artistic illustrations, these colors work harmoniously to produce a cohesive and inviting visual experience that whispers calm.

Best used for

Spa and wellness retreats branding
Wedding invitations and decor
Dreamy digital art and illustrations
Fashion and beauty editorial layouts
Personal blogs and portfolios
Calm-focused meditation apps

Suggested color roles

primary

Use #6A5ACD for a strong yet calming primary color in branding, main navigation, or important headers.

secondary

Apply #8A2BE2 for supporting elements, call-to-actions, or to add a touch of vibrant, elegant energy.

accent

Incorporate #DDA0DD for subtle highlights, decorative details, or interactive states, adding a soft, inviting touch.

background

Utilize #E6E6FA as a clean, ethereal background, providing ample space for content to stand out softly.

text

For primary body text, a dark charcoal or black is recommended for readability. For headings on #E6E6FA, #6A5ACD offers excellent contrast.

Accessibility notes

Ensure sufficient contrast for text on #E6E6FA; use darker colors like #6A5ACD or black.
Be cautious when pairing #DDA0DD with #E6E6FA for text, as contrast may be low for accessibility.
The rich #6A5ACD provides strong contrast against the lightest shades for important text and interactive elements.
Check contrast ratios for any text placed on #B0C4DE to ensure readability, especially for smaller fonts.

Recommended combinations

Twilight Dream

Creates a captivating contrast, perfect for hero sections, headers, or impactful visuals.

#6A5ACD · #8A2BE2 · #E6E6FA

Serene Blend

Ideal for soft backgrounds, subtle patterns, or elements needing a gentle, harmonious feel.

#DDA0DD · #B0C4DE · #E6E6FA

Vibrant Calm

Use for prominent buttons, accents, or to draw attention to key interactive components.

#8A2BE2 · #E6E6FA · #6A5ACD

CSS variables

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

Tailwind config

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

Hex values

Color 1#DDA0DD

Color 2#E6E6FA

Color 3#B0C4DE

Color 4#8A2BE2

Color 5#6A5ACD

Accessibility

Contrast checker

1.7:1Fail

1.2:1Fail

2.9:1Fail

2.6:1Fail

1.7:1Fail

1.4:1Fail

4.8:1AA

4.3:1AA18

1.2:1Fail

1.4:1Fail

3.3:1AA18

3:1Fail

2.9:1Fail

4.8:1AA

3.3:1AA18

1.1:1Fail

2.6:1Fail

4.3:1AA18

3:1Fail

1.1:1Fail

Similar palettes

More like Lavender Haze Whisper

View all cool

Mystic Lavender Fields

Lavender Field Serene

Lavender Mist Evening

Misty Canyon Lilac

Misty Lavender Bloom

Twilight Blossom Hush