Palette

Sun-Kissed Berry Burst

Juicy, bold colors celebrating the sweet and vibrant abundance of summer berries in a sun-drenched field.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sun-Kissed Berry Burst 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 Sun-Kissed Berry Burst.

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

Data visualization

#B22222#DC143C#FF69B4#FFB6C1#C71585

Palette guide

How to use Sun-Kissed Berry Burst

Overview

The Sun-Kissed Berry Burst palette is a vibrant and playful collection, celebrating the juicy abundance of summer fruits. It combines bold reds like `#B22222` and `#DC143C` with lively pinks such as `#FF69B4` and the delicate `#FFB6C1`, grounded by the rich fuchsia of `#C71585`. This palette is perfect for designers and developers seeking to inject energy, sweetness, and a touch of fun into their projects. Its bright, energetic tones evoke feelings of joy and freshness, making it highly effective for designs that aim to capture attention and convey a spirited, youthful mood.

Best used for

Youthful and playful brand identities
Food packaging, especially for sweets or fruit-based products
Summer-themed event invitations and decorations
Children's product design and illustrations
Vibrant user interfaces for apps or websites targeting younger audiences
Fashion and beauty branding with a bold, feminine edge

Suggested color roles

primary

Use `#DC143C` as a bold, energetic primary for main calls-to-action, branding, and hero sections to command attention.

secondary

Employ `#B22222` for supporting headlines or important data points, providing a slightly deeper, grounding contrast to the primary.

accent

Apply `#FF69B4` for highlights, interactive elements, or decorative flourishes to add a playful and sweet pop.

background

A very light and airy base, `#FFB6C1` is ideal for content areas or soft backgrounds, ensuring other colors truly burst.

text

For clear readability, use `#B22222` or a deep charcoal for body text and crucial information, especially against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter pinks like `#FFB6C1` on backgrounds that are not pure white or very dark.
Avoid using `#FFB6C1` for small text elements against `#FF69B4` as the contrast might be insufficient for readability.
For interactive elements, ensure distinct hover/focus states. A strong contrast between `#B22222` text on an `#FFB6C1` button is good.
Prioritize using the darkest colors like `#B22222` or `#C71585` for body text to meet WCAG AA standards on lighter backgrounds.

Recommended combinations

Sweet & Bold

A delicate background paired with a vibrant primary and a rich, deep secondary for contrast.

#FFB6C1 · #DC143C · #C71585

Energetic Pop

A strong base color accented by a playful pink, with a bright red for dynamic elements.

#B22222 · #FF69B4 · #DC143C

Berry Gradient

A smooth transition from deep fuchsia to soft pink, ideal for backgrounds or layered visuals.

#C71585 · #FF69B4 · #FFB6C1

CSS variables

:root {
  --sun-kissed-berry-burst-1: #B22222;
  --sun-kissed-berry-burst-2: #DC143C;
  --sun-kissed-berry-burst-3: #FF69B4;
  --sun-kissed-berry-burst-4: #FFB6C1;
  --sun-kissed-berry-burst-5: #C71585;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sun-kissed-berry-burst": {
        1: "#B22222",
        2: "#DC143C",
        3: "#FF69B4",
        4: "#FFB6C1",
        5: "#C71585",
      }
    }
  }
}

Hex values

Color 1#B22222

Color 2#DC143C

Color 3#FF69B4

Color 4#FFB6C1

Color 5#C71585

Accessibility

Contrast checker

1.3:1Fail

2.5:1Fail

4:1AA18

1.2:1Fail

1.3:1Fail

1.9:1Fail

3:1AA18

1.1:1Fail

2.5:1Fail

1.9:1Fail

1.6:1Fail

2:1Fail

4:1AA18

3:1AA18

1.6:1Fail

3.3:1AA18

1.2:1Fail

1.1:1Fail

2:1Fail

3.3:1AA18

Similar palettes

More like Sun-Kissed Berry Burst