Palette

Elderberry Preserve

A deep, luxurious blend of plum and lavender tones, like a rich, sweet elderberry preserve.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0E0E6#D8C3D0#B1A2BB#8E79A8#694C8B

Palette guide

How to use Elderberry Preserve

Overview

The "Elderberry Preserve" palette presents a deep, luxurious blend of plum and lavender tones, evoking the rich, sweet essence of its namesake. It transitions from the very light Lavender Blush (#F0E0E6) through soft purples like #D8C3D0 and #B1A2BB, culminating in the profound depths of #8E79A8 and #694C8B. This sophisticated range is perfect for designers seeking to convey elegance, mystery, or a touch of romanticism. Developers can utilize these hues to build interfaces that feel premium, calming, and visually engaging, particularly for brands that value refinement and depth.

Best used for

Luxury beauty or skincare product branding
High-end fashion or boutique websites
Romantic or vintage-inspired event invitations
Wellness and meditation apps or platforms
Art and photography portfolios with a sophisticated mood
Elegant confectionery or dessert shop branding

Suggested color roles

primary

#8E79A8 (Medium Purple) - Use for main headings, navigation bars, or significant content blocks to establish the palette's core luxurious feel.

secondary

#B1A2BB (Lavender Gray) - Ideal for subheadings, secondary buttons, or background textures that need a softer, complementary tone.

accent

#694C8B (Deep Violet) - A powerful accent for important calls-to-action, active states, or small decorative elements requiring depth.

background

#F0E0E6 (Lavender Blush) - Provides a very light, delicate base, allowing the richer purples to stand out with grace.

text

#694C8B (Deep Violet) - Offers excellent readability on lighter backgrounds like #F0E0E6, maintaining the palette's elegant character. A dark charcoal can also be used.

Accessibility notes

Ensure #694C8B text on #F0E0E6 background meets WCAG contrast standards.
Avoid using #D8C3D0 text on #B1A2BB backgrounds due to insufficient contrast.
The lighter shades, such as #F0E0E6 and #D8C3D0, should not be used for small text.
Consider using a pure white text on the darkest #694C8B background for optimal readability in dark mode interfaces.

Recommended combinations

Rich Harmony

A light background with a strong primary purple and deep violet accents for clear hierarchy.

#F0E0E6 · #8E79A8 · #694C8B

Soft Gradient

Excellent for subtle transitions in hero sections, backgrounds, or layered UI elements.

#D8C3D0 · #B1A2BB · #8E79A8

Deep Contrast

A deep primary with a mid-tone and a light accent, suitable for sophisticated data visualization.

#694C8B · #B1A2BB · #F0E0E6

CSS variables

:root {
  --elderberry-preserve-1: #F0E0E6;
  --elderberry-preserve-2: #D8C3D0;
  --elderberry-preserve-3: #B1A2BB;
  --elderberry-preserve-4: #8E79A8;
  --elderberry-preserve-5: #694C8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "elderberry-preserve": {
        1: "#F0E0E6",
        2: "#D8C3D0",
        3: "#B1A2BB",
        4: "#8E79A8",
        5: "#694C8B",
      }
    }
  }
}

Hex values

Color 1#F0E0E6

Color 2#D8C3D0

Color 3#B1A2BB

Color 4#8E79A8

Color 5#694C8B

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

3:1AA18

5.5:1AA

1.3:1Fail

1.4:1Fail

2.3:1Fail

4.2:1AA18

1.9:1Fail

1.4:1Fail

1.6:1Fail

2.9:1Fail

3:1AA18

2.3:1Fail

1.6:1Fail

1.8:1Fail

5.5:1AA

4.2:1AA18

2.9:1Fail

1.8:1Fail

Similar palettes

More like Elderberry Preserve

Blackberry Bramble Luxe