Palette

Violet Whisper Dew

Soft, ethereal violets and purples, like morning dew sparkling on delicate petals.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Violet Whisper Dew 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 Violet Whisper Dew.

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

Data visualization

#A020F0#DDA0DD#E6E6FA#8A2BE2#C7B0D1

Palette guide

How to use Violet Whisper Dew

Overview

The Violet Whisper Dew palette embodies softness and romance with its ethereal blend of violets and lavenders. From the vibrant yet gentle #A020F0 to the delicate #E6E6FA, this collection evokes the serene beauty of morning dew on petals. Designers will find it perfect for creating calming, feminine, or sophisticated aesthetics. The inclusion of #8A2BE2 provides a slightly deeper anchor, while #DDA0DD and #C7B0D1 offer versatile mid-tones. Developers can utilize these hex codes for light, airy web designs, fashion e-commerce, or peaceful app interfaces, ensuring a delicate and inviting user experience that feels both modern and timeless.

Best used for

Bridal or wedding industry branding
Feminine fashion and beauty websites
Spa and wellness marketing materials
Children's book illustrations or nursery decor
Boutique retail packaging
Soft, romantic digital art

Suggested color roles

primary

Use #A020F0 for impactful calls-to-action or significant headings, providing a vibrant yet gentle focal point.

secondary

Employ #8A2BE2 for subheadings, navigation, or secondary interactive elements, adding a touch of depth.

accent

Highlight subtle details or interactive states with #DDA0DD, offering a soft, inviting emphasis.

background

Apply #E6E6FA as a pristine, airy background, allowing other elements to float gracefully.

text

For main body text on light backgrounds, use a dark charcoal or black. For text on darker violet elements, #E6E6FA offers excellent contrast.

Accessibility notes

Ensure #A020F0 and #8A2BE2 have sufficient contrast against very light backgrounds like #E6E6FA for text.
Avoid using #DDA0DD or #C7B0D1 for small text on similarly light backgrounds.
Check contrast ratios for interactive elements, particularly when using softer tones together.
For readability, consider using a dark gray or black text for long paragraphs on #E6E6FA.

Recommended combinations

Petal Softness

Ideal for serene backgrounds, gentle content blocks, and vibrant yet soft calls to action.

#E6E6FA · #DDA0DD · #A020F0

Dewdrop Accent

Effective for main text, subtle UI elements, and a clean, airy base.

#8A2BE2 · #C7B0D1 · #E6E6FA

Romantic Bloom

Great for vibrant headings, delicate accents, and rich secondary elements.

#A020F0 · #DDA0DD · #8A2BE2

CSS variables

:root {
  --violet-whisper-dew-1: #A020F0;
  --violet-whisper-dew-2: #DDA0DD;
  --violet-whisper-dew-3: #E6E6FA;
  --violet-whisper-dew-4: #8A2BE2;
  --violet-whisper-dew-5: #C7B0D1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "violet-whisper-dew": {
        1: "#A020F0",
        2: "#DDA0DD",
        3: "#E6E6FA",
        4: "#8A2BE2",
        5: "#C7B0D1",
      }
    }
  }
}

Hex values

Color 1#A020F0

Color 2#DDA0DD

Color 3#E6E6FA

Color 4#8A2BE2

Color 5#C7B0D1

Accessibility

Contrast checker

2.6:1Fail

4.3:1AA18

1.1:1Fail

2.7:1Fail

2.6:1Fail

1.7:1Fail

2.9:1Fail

1:1Fail

4.3:1AA18

1.7:1Fail

4.8:1AA

1.6:1Fail

1.1:1Fail

2.9:1Fail

4.8:1AA

3:1Fail

2.7:1Fail

1:1Fail

1.6:1Fail

3:1Fail

Similar palettes

More like Violet Whisper Dew