Palette

Amethyst Haze Dream

A gentle, dreamy blend of soft purples, reminiscent of a hazy, mystical amethyst landscape.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Amethyst Haze 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 Amethyst Haze Dream.

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

Data visualization

#E6E6FA#DDA0DD#BA55D3#8A2BE2#4B0082

Palette guide

How to use Amethyst Haze Dream

Overview

The Amethyst Haze Dream palette offers a gentle, dreamy blend of soft purples, reminiscent of a hazy, mystical amethyst landscape. Ranging from the airy `#E6E6FA` to the deep `#4B0082`, this palette provides designers and developers with a serene yet sophisticated collection of hues. The balanced mid-tones, `#DDA0DD`, `#BA55D3`, and `#8A2BE2`, ensure harmonious transitions, making it ideal for projects seeking to evoke calm, elegance, or a touch of ethereal beauty. Its soft, muted nature makes it versatile for backgrounds, UI elements, and delicate branding.

Best used for

Wellness and meditation app interfaces
Soft and romantic wedding stationery
E-commerce for artisanal crafts or textiles
Dreamy digital art and illustrations
Luxury baby product branding
Personal blogs and portfolios

Suggested color roles

primary

Use `#8A2BE2` as a grounding primary color for key headings or interactive elements, offering a gentle focal point.

secondary

Apply `#BA55D3` for supporting content blocks, subheadings, or secondary calls to action, maintaining a soft, harmonious feel.

accent

Utilize `#E6E6FA` for subtle highlights, hover states, or delicate background patterns to add an ethereal, airy touch.

background

The lightest shade, `#E6E6FA`, provides a clean, dreamy canvas. `#DDA0DD` can be used for slightly richer, yet still soft, sections.

text

For dark text on light backgrounds, `#4B0082` or a deep charcoal offers excellent readability. For light text on dark backgrounds, use white or `#E6E6FA`.

Accessibility notes

Ensure `#4B0082` provides strong contrast for text against `#E6E6FA` and `#DDA0DD` backgrounds.
Verify contrast ratios for `#8A2BE2` and `#BA55D3` when used for text against various background colors within the palette.
Avoid using `#E6E6FA` for small text on very light backgrounds to prevent legibility issues.
Consider using bold font weights for text in mid-tone shades like `#DDA0DD` on slightly darker backgrounds like `#BA55D3`.

Recommended combinations

Deep Haze

Excellent for creating depth in footers, sidebars, or backgrounds that require a mysterious touch.

#4B0082 · #8A2BE2 · #BA55D3

Dreamy Mist

Ideal for soft gradients, clean content areas, or delicate UI elements that evoke calm and lightness.

#E6E6FA · #DDA0DD · #BA55D3

Amethyst Flow

Suited for balancing deep tones with light accents, such as calls to action or emphasized text on cards.

#8A2BE2 · #E6E6FA · #4B0082

CSS variables

:root {
  --amethyst-haze-dream-1: #E6E6FA;
  --amethyst-haze-dream-2: #DDA0DD;
  --amethyst-haze-dream-3: #BA55D3;
  --amethyst-haze-dream-4: #8A2BE2;
  --amethyst-haze-dream-5: #4B0082;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "amethyst-haze-dream": {
        1: "#E6E6FA",
        2: "#DDA0DD",
        3: "#BA55D3",
        4: "#8A2BE2",
        5: "#4B0082",
      }
    }
  }
}

Hex values

Color 1#E6E6FA

Color 2#DDA0DD

Color 3#BA55D3

Color 4#8A2BE2

Color 5#4B0082

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

4.8:1AA

10.5:1AAA

1.7:1Fail

1.9:1Fail

2.9:1Fail

6.3:1AA

3.2:1AA18

1.9:1Fail

1.5:1Fail

3.3:1AA18

4.8:1AA

2.9:1Fail

1.5:1Fail

2.2:1Fail

10.5:1AAA

6.3:1AA

3.3:1AA18

2.2:1Fail

Similar palettes

More like Amethyst Haze Dream

View all pastel

Dreamy Lavender Field

Lavender Dream

Lavender Dreamscape

Lavender Fields Dream

Lavender Haze Meadow

Lavender Misty Dream