Palette

Berry Patch Bliss

A joyful and fresh palette inspired by ripe summer berries, featuring vibrant pinks, blues, and refreshing greens.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Berry Patch Bliss 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 Berry Patch Bliss.

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

Data visualization

#E85A7E#5C6B99#A2C5AC#F9F7E7#7C5A5A

Palette guide

How to use Berry Patch Bliss

Overview

The Berry Patch Bliss palette is a joyful and fresh collection inspired by ripe summer berries, featuring vibrant pinks, blues, and refreshing greens. This dynamic scheme combines the lively #E85A7E with the cool #5C6B99 and the natural #A2C5AC, all complemented by the crisp #F9F7E7 and grounded by the earthy #7C5A5A. Each hex code contributes to an energetic and inviting aesthetic, ideal for designs that aim to convey natural freshness, vitality, and playful energy. Designers and developers can utilize this palette to create engaging interfaces for outdoor brands, vibrant editorial content, or joyful digital experiences, ensuring a memorable and visually appealing user journey that stands out with its unique color story.

Best used for

Outdoor lifestyle brands
Children's educational apps
Eco-friendly product packaging
Summer camp promotions
Playful social media content
Nature-themed illustrations

Suggested color roles

primary

The lively #E85A7E is excellent for impactful calls-to-action or headlines, demanding attention with its cheerful hue.

secondary

The cool #5C6B99 can be used for navigation, footers, or background sections, providing a stable, contrasting base.

accent

The refreshing #A2C5AC serves as a powerful accent for interactive elements, small icons, or highlights to add a natural pop.

background

The crisp #F9F7E7 provides a clean, airy canvas, allowing the vibrant berry tones to truly pop.

text

For lighter backgrounds like #F9F7E7, use the deep #7C5A5A or a rich dark blue for body text. On darker backgrounds, #F9F7E7 or white ensures readability.

Accessibility notes

Ensure sufficient contrast between #7C5A5A text and #F9F7E7 backgrounds for WCAG AA compliance.
Avoid using #A2C5AC on #E85A7E for small text without careful contrast checks, as they might blend.
The combination of pink, blue, and green should be tested for colorblind users, ensuring information is not solely conveyed by these hues.
Always test color combinations with accessibility tools to meet WCAG standards, especially for text and interactive elements.

Recommended combinations

Fresh & Lively

Ideal for hero sections and call-to-action blocks, creating a lively and clear visual hierarchy.

#E85A7E · #A2C5AC · #F9F7E7

Earthy Balance

Excellent for sophisticated branding, headers, and footers, providing depth with a crisp highlight.

#5C6B99 · #7C5A5A · #F9F7E7

Berry Patch Mix

Use for infographic elements or data visualization to differentiate categories vividly and playfully.

#E85A7E · #5C6B99 · #A2C5AC

CSS variables

:root {
  --berry-patch-bliss-3-1: #E85A7E;
  --berry-patch-bliss-3-2: #5C6B99;
  --berry-patch-bliss-3-3: #A2C5AC;
  --berry-patch-bliss-3-4: #F9F7E7;
  --berry-patch-bliss-3-5: #7C5A5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "berry-patch-bliss-3": {
        1: "#E85A7E",
        2: "#5C6B99",
        3: "#A2C5AC",
        4: "#F9F7E7",
        5: "#7C5A5A",
      }
    }
  }
}

Hex values

Color 1#E85A7E

Color 2#5C6B99

Color 3#A2C5AC

Color 4#F9F7E7

Color 5#7C5A5A

Accessibility

Contrast checker

1.5:1Fail

1.8:1Fail

3.1:1AA18

1.8:1Fail

1.5:1Fail

2.8:1Fail

4.8:1AA

1.2:1Fail

1.8:1Fail

2.8:1Fail

1.8:1Fail

3.2:1AA18

3.1:1AA18

4.8:1AA

1.8:1Fail

5.6:1AA

1.8:1Fail

1.2:1Fail

3.2:1AA18

5.6:1AA

Similar palettes

More like Berry Patch Bliss

Berry Patch Bliss

See it in context.

Ready when you are.

Built with Berry Patch Bliss.

How to use Berry Patch Bliss

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh & Lively

Earthy Balance

Berry Patch Mix

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Berry Patch Bliss