Palette

Sweet Berry Fizz

A delightful burst of pinks and reds, like a fizzy berry drink on a sunny day.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFC0CB#FF69B4#DC143C#FFDAB9#800000

Palette guide

How to use Sweet Berry Fizz

Overview

The Sweet Berry Fizz palette is a delightful burst of pinks and reds, like a fizzy berry drink on a sunny day. This energetic collection includes `FFC0CB` (pink), `FF69B4` (hot pink), `DC143C` (crimson), `FFDAB9` (peach puff), and `800000` (maroon). Designers and developers can utilize these lively hues to inject a sense of excitement and refreshment into their projects, from vibrant web interfaces to playful product packaging, capturing a sparkling, effervescent mood.

Best used for

Beverage branding (sodas, cocktails)
Summer party invitations and decor
Youth fashion and accessories websites
Vibrant blog designs and social media
Dessert and candy packaging
Event promotion and marketing materials

Suggested color roles

primary

Use `#DC143C` or `#FF69B4` as a vibrant primary color for headlines, key graphics, or main branding.

secondary

Employ `#FFC0CB` for a softer supporting role or `#800000` for a grounding, rich contrast.

accent

Apply `#FF69B4` as a bright, attention-grabbing accent for interactive elements or calls to action.

background

Consider `#FFDAB9` for a warm, light background, or a neutral off-white to let the vibrant colors pop.

text

For body text, use `#800000` or a dark charcoal for readability. White text works well on darker elements like `#DC143C` or `#800000`.

Accessibility notes

The lightest colors, `#FFC0CB` and `#FFDAB9`, require dark text for sufficient contrast.
Ensure `#FF69B4` has enough contrast with surrounding elements, especially if used for text.
Use a contrast checker to verify all text-to-background pairings, particularly with mid-tone reds.
Avoid using light text on `#FFC0CB` or `#FFDAB9` for essential information.

Recommended combinations

Fizzy Contrast

Great for a dynamic header, a product feature block, or a brand logo with depth.

#DC143C · #FFC0CB · #800000

Warm Pop

Perfect for a cheerful landing page section, a lively infographic, or engaging social media graphics.

#FF69B4 · #FFDAB9 · #DC143C

Energetic Mix

Excellent for a bold call-to-action button, a vibrant product carousel, or impactful event banners.

#800000 · #FFC0CB · #FF69B4

CSS variables

:root {
  --sweet-berry-fizz-1: #FFC0CB;
  --sweet-berry-fizz-2: #FF69B4;
  --sweet-berry-fizz-3: #DC143C;
  --sweet-berry-fizz-4: #FFDAB9;
  --sweet-berry-fizz-5: #800000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-berry-fizz": {
        1: "#FFC0CB",
        2: "#FF69B4",
        3: "#DC143C",
        4: "#FFDAB9",
        5: "#800000",
      }
    }
  }
}

Hex values

Color 1#FFC0CB

Color 2#FF69B4

Color 3#DC143C

Color 4#FFDAB9

Color 5#800000

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

1.2:1Fail

7.1:1AAA

1.7:1Fail

1.9:1Fail

2:1Fail

4.1:1AA18

3.2:1AA18

1.9:1Fail

3.8:1AA18

2.2:1Fail