Palette

Summer Fruit Punch

A playful explosion of colors inspired by a refreshing blend of exotic fruits and bright summer days.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Summer Fruit Punch 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 Summer Fruit Punch.

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

Data visualization

#FF6F61#FFD166#06D6A0#118AB2#EF476F

Palette guide

How to use Summer Fruit Punch

Overview

The Summer Fruit Punch palette is a playful explosion of colors, inspired by a refreshing blend of exotic fruits and bright summer days. Featuring a lively coral #FF6F61 and a sunny yellow #FFD166, this palette radiates warmth and cheer. The vibrant teal #06D6A0 and deep blue #118AB2 introduce a refreshing, cool contrast, while the bold pinkish-red #EF476F adds a punchy, energetic accent. This versatile selection is ideal for designs aiming for a youthful, energetic, and memorable aesthetic. Designers will find these hues perfect for creating engaging user interfaces, eye-catching advertisements, or memorable invitations, ensuring a truly playful and refreshing visual experience for any summer-themed project.

Best used for

Children's brands or educational content
Summer camp or recreational activity promotions
Playful mobile app designs
Food and beverage packaging (especially sweet drinks)
Creative agency branding
Social media graphics for fun, engaging content

Suggested color roles

primary

A bold, playful pinkish-red (#EF476F), excellent for calls to action, main headlines, or impactful brand elements.

secondary

A bright, cheerful yellow (#FFD166), perfect for secondary information, backgrounds, or complementary graphics.

accent

A vibrant, refreshing teal (#06D6A0), ideal for drawing immediate attention, highlights, or interactive states.

background

A warm, inviting yellow (#FFD166) that can serve as a soft, bright background or main content area.

text

A deep, calming blue (#118AB2), suitable for body text on lighter backgrounds like #FFD166. For maximum contrast, use black or very dark charcoal.

Accessibility notes

#FFD166 has low contrast on white backgrounds; avoid for small text.
Ensure sufficient contrast for all text, especially when using lighter colors like #FF6F61 on #FFD166.
#118AB2 and #EF476F provide good contrast for text on #FFD166.
Avoid using #06D6A0 as text on #FFD166 due to potential readability issues.

Recommended combinations

Punchy Contrast

#EF476F for dominant elements, #FFD166 as a lively background, and #118AB2 for strong, contrasting text.

#EF476F · #FFD166 · #118AB2

Tropical Splash

#FF6F61 for main content, #06D6A0 for refreshing accents, and #FFD166 for bright highlights.

#FF6F61 · #06D6A0 · #FFD166

Energetic Mix

#06D6A0 for energetic graphics, #EF476F for bold calls to action, and #118AB2 for cool, modern touches.

#06D6A0 · #EF476F · #118AB2

CSS variables

:root {
  --summer-fruit-punch-1: #FF6F61;
  --summer-fruit-punch-2: #FFD166;
  --summer-fruit-punch-3: #06D6A0;
  --summer-fruit-punch-4: #118AB2;
  --summer-fruit-punch-5: #EF476F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-fruit-punch": {
        1: "#FF6F61",
        2: "#FFD166",
        3: "#06D6A0",
        4: "#118AB2",
        5: "#EF476F",
      }
    }
  }
}

Hex values

Color 1#FF6F61

Color 2#FFD166

Color 3#06D6A0

Color 4#118AB2

Color 5#EF476F

Accessibility

Contrast checker

1.9:1Fail

1.4:1Fail

1.5:1Fail

1.3:1Fail

1.9:1Fail

1.3:1Fail

2.7:1Fail

2.5:1Fail

1.4:1Fail

1.3:1Fail

2.1:1Fail

1.9:1Fail

1.5:1Fail

2.7:1Fail

2.1:1Fail

1.1:1Fail

1.3:1Fail

2.5:1Fail

1.9:1Fail

1.1:1Fail

Similar palettes

More like Summer Fruit Punch

Summer Fruit Punch

See it in context.

Ready when you are.

Built with Summer Fruit Punch.

How to use Summer Fruit Punch

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Punchy Contrast

Tropical Splash

Energetic Mix

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Summer Fruit Punch