Palette

Amethyst Berry Preserve

Rich, deep purples bursting with the concentrated sweetness of a wild berry preserve.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4B0082#8A2BE2#9400D3#BA55D3#DDA0DD

Palette guide

How to use Amethyst Berry Preserve

Overview

The Amethyst Berry Preserve palette is a rich and vibrant collection of purples, reminiscent of luscious, concentrated berries. With deep, resonant hues like `#4B0082` and `#9400D3`, complemented by the brighter `#8A2BE2` and `#BA55D3`, this palette offers designers and developers a dynamic range for creating energetic and sophisticated designs. The softest shade, `#DDA0DD`, provides a delicate contrast, allowing for depth and visual interest across various applications. This palette’s intensity makes it excellent for projects aiming to convey luxury, creativity, or a touch of playful opulence.

Best used for

Gourmet food and beverage branding
Luxury cosmetic packaging
Creative digital art and illustrations
Fashion editorial design
Event branding (e.g., wine tastings, galas)
Children's luxury apparel

Suggested color roles

primary

Use `#9400D3` as a dominant color for impactful branding, headlines, or primary calls to action to convey richness and sophistication.

secondary

Apply `#8A2BE2` for supporting sections, subheadings, or larger UI components to maintain vibrancy and depth.

accent

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

background

Deep `#4B0082` can create a luxurious, immersive background, while `#BA55D3` offers a more vibrant, engaging canvas for content.

text

For text on lighter backgrounds, a deep shade like `#4B0082` or black ensures readability. For text on dark backgrounds, use white or `#DDA0DD`.

Accessibility notes

Ensure `#4B0082` provides strong contrast against `#DDA0DD` 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 `#DDA0DD` 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 `#BA55D3` for content.

Recommended combinations

Rich Depth

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

#4B0082 · #9400D3 · #8A2BE2

Vibrant Glow

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

#DDA0DD · #BA55D3 · #9400D3

Berry Blend

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

#8A2BE2 · #DDA0DD · #4B0082

CSS variables

:root {
  --amethyst-berry-preserve-1: #4B0082;
  --amethyst-berry-preserve-2: #8A2BE2;
  --amethyst-berry-preserve-3: #9400D3;
  --amethyst-berry-preserve-4: #BA55D3;
  --amethyst-berry-preserve-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "amethyst-berry-preserve": {
        1: "#4B0082",
        2: "#8A2BE2",
        3: "#9400D3",
        4: "#BA55D3",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#8A2BE2

Color 3#9400D3

Color 4#BA55D3

Color 5#DDA0DD

Accessibility

Contrast checker

2.2:1Fail

2:1Fail

3.3:1AA18

6.3:1AA

2.2:1Fail

1.1:1Fail

1.5:1Fail

2.9:1Fail

2:1Fail

1.1:1Fail

1.7:1Fail

3.2:1AA18