Palette

Sweet Berry Compote

A succulent blend of sweet and tart berries, rich with vibrant, mouth-watering colors.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B008B#8B0000#4B0082#DC143C#FF69B4

Palette guide

How to use Sweet Berry Compote

Overview

The Sweet Berry Compote palette is a vibrant and juicy collection, perfect for designs that demand energy and depth. Featuring rich hues like `#8B008B` (dark magenta), `#8B0000` (dark red), and `#4B0082` (indigo), it's balanced by the striking `#DC143C` (crimson) and playful `#FF69B4` (hot pink). This palette offers designers and developers a robust set of colors to create impactful and memorable digital or print experiences, evoking the lushness of ripe berries.

Best used for

Gourmet food packaging (jams, desserts)
Playful event invitations and branding
Children's product packaging and websites
Creative arts and crafts branding
Fashion accessories and textile design
Summer festival and carnival branding

Suggested color roles

primary

Use `#8B0000` or `#8B008B` as a foundational, rich berry tone for major sections or branding elements.

secondary

Employ `#4B0082` for deep contrast or `#DC143C` to introduce a warm, vibrant supporting color.

accent

Apply `#FF69B4` sparingly for highlights, calls to action, or playful graphic elements to add a pop of energy.

background

Consider a very light, near-white background for vibrancy, or use `#4B0082` for a dramatic, deep setting for light content.

text

For body text, use a dark charcoal or black on light backgrounds. On darker elements like `#4B0082`, white or a very light gray provides excellent readability.

Accessibility notes

Ensure sufficient contrast when pairing `#FF69B4` with other vibrant colors; it can be challenging for text.
Darker shades like `#8B008B` and `#4B0082` provide good contrast for light-colored text.
Test text readability on all background colors, especially for small font sizes.
Avoid using `#FF69B4` or `#DC143C` for extensive body text on light backgrounds without careful contrast checks.

Recommended combinations

Deep & Bright

Ideal for a bold header, a vibrant call-to-action button, or a striking graphic element.

#8B0000 · #FF69B4 · #4B0082

Vibrant Trio

Perfect for a playful gradient, energetic data visualization, or a lively product display.

#DC143C · #8B008B · #FF69B4

Rich Base

Excellent for a sophisticated brand identity, a deep content background with vibrant accents, or elegant illustrations.

#4B0082 · #8B0000 · #DC143C

CSS variables

:root {
  --sweet-berry-compote-1: #8B008B;
  --sweet-berry-compote-2: #8B0000;
  --sweet-berry-compote-3: #4B0082;
  --sweet-berry-compote-4: #DC143C;
  --sweet-berry-compote-5: #FF69B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-berry-compote": {
        1: "#8B008B",
        2: "#8B0000",
        3: "#4B0082",
        4: "#DC143C",
        5: "#FF69B4",
      }
    }
  }
}

Hex values

Color 1#8B008B

Color 2#8B0000

Color 3#4B0082

Color 4#DC143C

Color 5#FF69B4

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.7:1Fail

3.2:1AA18

1.2:1Fail

1.3:1Fail

2:1Fail

3.8:1AA18