Palette

Spiced Plum Cordial

Deep, rich plum tones infused with warm spices, reminiscent of a comforting winter cordial.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Plum Cordial 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 Spiced Plum Cordial.

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

Data visualization

#5C1A3A#8A3258#C45B85#E0B3C9#3C152B

Palette guide

How to use Spiced Plum Cordial

Overview

The 'Spiced Plum Cordial' palette presents deep, rich plum tones infused with warm spices, reminiscent of a comforting winter cordial. This elegant collection, featuring profound hues like #5C1A3A and #3C152B alongside a lighter #E0B3C9, offers a sophisticated and luxurious feel. Ideal for designers and developers aiming for an opulent yet cozy aesthetic, it provides a perfect balance between dark richness and subtle vibrancy. The palette's depth and warmth make it suitable for high-end branding, festive designs, and projects requiring a touch of refined drama.

Best used for

Luxury brand identity and packaging
Sophisticated event invitations (weddings, galas)
High-end fashion and beauty websites
Winter holiday marketing and decor
Elegant UI design for premium apps
Fine dining restaurant branding

Suggested color roles

primary

Use #5C1A3A (Deep Plum) as the dominant brand color for main sections, headers, and strong visual statements, conveying luxury.

secondary

Apply #8A3258 (Rich Berry) for supporting elements, subheadings, or illustrations, providing a harmonious, slightly brighter depth.

accent

Incorporate #C45B85 (Vibrant Plum) sparingly for calls-to-action, important links, or focal points, adding an elegant, eye-catching punch.

background

Utilize #E0B3C9 (Soft Lavender-Pink) as a delicate, contrasting background for content, ensuring excellent readability and a refined touch.

text

Employ #3C152B (Very Dark Plum) for primary text on lighter backgrounds, or use white/off-white for text on darker hues like #5C1A3A to ensure maximum contrast and readability.

Accessibility notes

Ensure sufficient contrast for text in #3C152B on #E0B3C9 background to meet WCAG standards.
When using #C45B85 for interactive elements, verify its contrast against adjacent colors.
Avoid using lighter plum shades like #8A3258 as text on #E0B3C9 background due to potential low contrast.
Consider a pure white or very light gray for text on the darkest shades (#3C152B, #5C1A3A) for optimal readability.

Recommended combinations

Elegant Base

Creating a sophisticated foundation with deep plum and a soft, contrasting background, ideal for elegant content presentation.

#3C152B · #E0B3C9 · #5C1A3A

Rich Highlight

Drawing attention to key elements with vibrant, yet refined, plum tones, perfect for calls-to-action or important links.

#C45B85 · #8A3258 · #3C152B

Subtle Gradient

Achieving smooth visual transitions or layered effects with harmonious plum shades, adding depth to backgrounds or graphical elements.

#5C1A3A · #8A3258 · #C45B85

CSS variables

:root {
  --spiced-plum-cordial-1: #5C1A3A;
  --spiced-plum-cordial-2: #8A3258;
  --spiced-plum-cordial-3: #C45B85;
  --spiced-plum-cordial-4: #E0B3C9;
  --spiced-plum-cordial-5: #3C152B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-plum-cordial": {
        1: "#5C1A3A",
        2: "#8A3258",
        3: "#C45B85",
        4: "#E0B3C9",
        5: "#3C152B",
      }
    }
  }
}

Hex values

Color 1#5C1A3A

Color 2#8A3258

Color 3#C45B85

Color 4#E0B3C9

Color 5#3C152B

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

6.9:1AA

1.2:1Fail

1.6:1Fail

1.9:1Fail

4.3:1AA18

2:1Fail

3.1:1AA18

1.9:1Fail

2.2:1Fail

3.9:1AA18