Palette

Amethyst Sky

A regal collection of purples and lavenders, reminiscent of a royal evening sky or precious gems.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A2BE2#BA55D3#DDA0DD#E6E6FA#6A5ACD

Palette guide

How to use Amethyst Sky

Overview

The Amethyst Sky palette presents a regal collection of purples and lavenders, reminiscent of a royal evening sky or precious gems. Featuring the vibrant `#8A2BE2` and `#BA55D3`, complemented by the soft `#DDA0DD` and airy `#E6E6FA`, this palette offers designers and developers a dynamic range. The grounding `#6A5ACD` provides a stable base, allowing for depth and visual interest across various applications. This palette’s blend of intensity and softness makes it excellent for projects aiming to convey luxury, creativity, or a touch of celestial elegance.

Best used for

Luxury brand identity for high-end products
Celestial or mystical themed digital art
Elegant event invitations and decor
Fashion editorial design
Spiritual wellness platforms
Children's fantasy book illustrations

Suggested color roles

primary

Use `#8A2BE2` as a dominant color for impactful branding, headlines, or primary calls to action to convey richness and vibrancy.

secondary

Apply `#BA55D3` for supporting sections, subheadings, or larger UI components to maintain visual interest and depth.

accent

Utilize `#E6E6FA` for highlights, interactive states, or delicate graphic elements to add a soft, luminous touch.

background

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

text

For text on lighter backgrounds, a deep shade like `#6A5ACD` or black ensures readability. For text on dark backgrounds, use white or `#E6E6FA`.

Accessibility notes

Ensure `#6A5ACD` provides strong contrast against `#E6E6FA` for body text to maintain readability.
Test contrast ratios for `#8A2BE2` and `#BA55D3` when used for text against various background colors within the palette.
Avoid using `#E6E6FA` for small text against similarly light backgrounds to prevent legibility issues.
Consider using bold text or larger font sizes when applying mid-tone purples like `#DDA0DD` for content.

Recommended combinations

Regal Depths

Ideal for creating a luxurious, deep visual impact in headers, footers, or brand logos.

#6A5ACD · #8A2BE2 · #BA55D3

Celestial Glow

Excellent for accents, interactive elements, or sections needing a brighter, more playful shimmer.

#E6E6FA · #DDA0DD · #BA55D3

Amethyst Blend

Suited for gradients, data visualization, or illustrations that require a smooth transition of hues.

#8A2BE2 · #E6E6FA · #6A5ACD

CSS variables

:root {
  --amethyst-sky-1: #8A2BE2;
  --amethyst-sky-2: #BA55D3;
  --amethyst-sky-3: #DDA0DD;
  --amethyst-sky-4: #E6E6FA;
  --amethyst-sky-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "amethyst-sky": {
        1: "#8A2BE2",
        2: "#BA55D3",
        3: "#DDA0DD",
        4: "#E6E6FA",
        5: "#6A5ACD",
      }
    }
  }
}

Hex values

Color 1#8A2BE2

Color 2#BA55D3

Color 3#DDA0DD

Color 4#E6E6FA

Color 5#6A5ACD

Accessibility

Contrast checker

1.5:1Fail

2.9:1Fail

4.8:1AA

1.1:1Fail

1.5:1Fail

1.9:1Fail

3.2:1AA18

1.3:1Fail

2.9:1Fail

1.9:1Fail

1.7:1Fail

2.6:1Fail

4.8:1AA

3.2:1AA18

1.7:1Fail

4.3:1AA18

1.1:1Fail

1.3:1Fail

2.6:1Fail

4.3:1AA18

Similar palettes

More like Amethyst Sky

View all cool

Amethyst Field Dusk

Amethyst Mystic Grotto

Dusky Orchid Bloom

Amethyst Cavern Glow

Celestial Echo Nebula

Celestial Orchid Bloom