Palette

Summer Medley

A joyful medley of vivid colors, capturing the bright and carefree essence of a summer day.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFAB00#F44336#2196F3#8BC34A#9C27B0

Palette guide

How to use Summer Medley

Overview

The Summer Medley palette is a burst of vibrant and energetic colors, designed to capture the playful and carefree essence of a bright summer day. It features a lively orange (#FFAB00), a bold red (#F44336), a striking blue (#2196F3), a fresh green (#8BC34A), and a rich purple (#9C27B0). This collection offers high contrast and visual punch, making it ideal for designers and developers looking to create dynamic, cheerful, and attention-grabbing projects. Whether for digital marketing, playful branding, or engaging user interfaces, these vivid hues ensure a memorable and spirited design experience.

Best used for

Youth-oriented brand campaigns
Event posters and flyers
Interactive mobile app interfaces
Children's product packaging
Creative agency branding
Website hero sections

Suggested color roles

primary

Use #2196F3 (striking blue) for main calls-to-action or key navigational elements, providing a strong, reliable anchor.

secondary

Apply #FFAB00 (lively orange) for secondary buttons, highlights, or illustrative elements, adding warmth and enthusiasm.

accent

Introduce #9C27B0 (rich purple) for unique design details, icons, or subtle patterns, offering a touch of creativity.

background

Given the vibrancy, a clean white or very light neutral background works best to let the colors truly pop.

text

Employ black or a very dark charcoal for body text and headings to ensure maximum readability against the bright palette colors.

Accessibility notes

All vibrant colors will require dark text (black/charcoal) or white text to ensure sufficient contrast.
Check contrast ratios carefully when pairing any two palette colors for text and background combinations.
The #F44336 red and #FFAB00 orange can be particularly challenging for text readability without high contrast.
Use color alongside other visual cues, as some color-blind individuals may struggle to distinguish between certain vibrant hues.

Recommended combinations

Energetic Trio

Perfect for dynamic headlines or hero sections, creating an immediate and exciting visual impact.

#FFAB00 · #F44336 · #2196F3

Fresh & Bold

Ideal for modern branding or app interfaces, combining cool and fresh tones with a vibrant purple accent.

#8BC34A · #2196F3 · #9C27B0

Playful Pop

Use for playful elements or infographics, offering high contrast and a cheerful, inviting feel.

#F44336 · #FFAB00 · #8BC34A

CSS variables

:root {
  --summer-medley-1: #FFAB00;
  --summer-medley-2: #F44336;
  --summer-medley-3: #2196F3;
  --summer-medley-4: #8BC34A;
  --summer-medley-5: #9C27B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-medley": {
        1: "#FFAB00",
        2: "#F44336",
        3: "#2196F3",
        4: "#8BC34A",
        5: "#9C27B0",
      }
    }
  }
}

Hex values

Color 1#FFAB00

Color 2#F44336

Color 3#2196F3

Color 4#8BC34A

Color 5#9C27B0

Accessibility

Contrast checker

1.9:1Fail

1.6:1Fail

1.1:1Fail

3.3:1AA18

1.9:1Fail

1.2:1Fail

1.8:1Fail

1.7:1Fail

1.6:1Fail

1.2:1Fail

1.5:1Fail

2:1Fail

1.1:1Fail

1.8:1Fail

1.5:1Fail

3:1AA18

3.3:1AA18

1.7:1Fail

2:1Fail

3:1AA18

Similar palettes

More like Summer Medley

Bright Carnival Swirl

Candy Carnival Swirl