Palette

Sweet Berry Medley

A delightful mix of rich berry tones, from deep fuchsia to delicate blush, a true sweet treat.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Berry Medley 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 Sweet Berry Medley.

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

Data visualization

#800020#C71585#DA70D6#FFB6C1#FFE4E1

Palette guide

How to use Sweet Berry Medley

Overview

The Sweet Berry Medley palette presents a delightful mix of rich berry tones, from deep fuchsia to delicate blush, a true sweet treat. This harmonious collection features sophisticated hues like `#800020` (burgundy), `#C71585` (fuchsia), `#DA70D6` (orchid), `#FFB6C1` (light pink), and `#FFE4E1` (misty rose). Designers and developers can leverage this palette to create elegant yet sweet designs that transition beautifully from rich sophistication to delicate charm, ideal for luxury or romantic-themed projects.

Best used for

Elegant wedding themes and stationery
High-end patisserie and dessert branding
Feminine fashion and beauty product lines
Sophisticated event invitations and decor
Romantic website interfaces
Luxury lifestyle brands

Suggested color roles

primary

Use `#800020` as a deep, sophisticated primary color for foundational elements or elegant branding.

secondary

Employ `#C71585` or `#DA70D6` to introduce vibrant mid-tone pinks/purples for supporting content.

accent

Apply `#FFE4E1` as the softest, most delicate accent for subtle highlights or decorative touches.

background

The lightest shade, `#FFE4E1`, makes an excellent gentle, airy background, or pair with a neutral cream.

text

Dark charcoal or `#800020` offers optimal readability for body text. White text works well on darker elements like `#800020` or `#C71585`.

Accessibility notes

The lightest pinks, `#FFB6C1` and `#FFE4E1`, require dark, high-contrast text for readability.
Ensure all text, especially smaller fonts, maintains adequate contrast against background colors.
Use a contrast checker to verify WCAG AA/AAA compliance for text-to-background pairings.
Avoid using light text on `#FFB6C1` or `#FFE4E1` for critical information due to low contrast.

Recommended combinations

Elegant Gradient

Ideal for a sophisticated background gradient, a layered visual effect, or elegant UI elements.

#800020 · #DA70D6 · #FFE4E1

Sophisticated Pop

Perfect for a call-to-action, a product feature highlight, or a refined brand logo.

#C71585 · #FFB6C1 · #800020

Gentle Contrast

Excellent for soft content blocks, romantic illustrations, or a welcoming website banner.

#DA70D6 · #FFE4E1 · #C71585

CSS variables

:root {
  --sweet-berry-medley-1: #800020;
  --sweet-berry-medley-2: #C71585;
  --sweet-berry-medley-3: #DA70D6;
  --sweet-berry-medley-4: #FFB6C1;
  --sweet-berry-medley-5: #FFE4E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-berry-medley": {
        1: "#800020",
        2: "#C71585",
        3: "#DA70D6",
        4: "#FFB6C1",
        5: "#FFE4E1",
      }
    }
  }
}

Hex values

Color 1#800020

Color 2#C71585

Color 3#DA70D6

Color 4#FFB6C1

Color 5#FFE4E1

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

6.6:1AA

9:1AAA

2:1Fail

1.9:1Fail

3.3:1AA18

4.5:1AA

3.7:1AA18

1.9:1Fail

1.7:1Fail

2.4:1Fail