Palette

Pop Art Punch

Explodes with dynamic and playful energy, inspired by iconic pop art aesthetics.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pop Art 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 Pop Art Punch.

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

Data visualization

#FF5733#FFC300#33FF57#3357FF#C70039

Palette guide

How to use Pop Art Punch

Overview

The Pop Art Punch palette explodes with dynamic and playful energy, inspired by iconic pop art aesthetics. Designed for designers and developers, this vibrant collection features bold orange-red (#FF5733), sunny yellow (#FFC300), lively green (#33FF57), electric blue (#3357FF), and a striking crimson (#C70039). This palette is perfect for projects that need to make a statement, conveying enthusiasm and creativity. Its high saturation and distinct hues create strong visual contrast, making it ideal for eye-catching branding, engaging digital interfaces, and energetic print materials. This palette ensures designs are memorable and full of personality.

Best used for

Youth-oriented advertising
Event promotions
Game interfaces
Creative branding
Digital illustrations
Children's book design

Suggested color roles

primary

Utilize bold orange-red #FF5733 or electric blue #3357FF for dominant elements, drawing immediate attention and establishing a playful yet strong foundation.

secondary

Employ sunny yellow #FFC300 for secondary calls-to-action, highlights, or to add a cheerful, optimistic counterpoint.

accent

Introduce lively green #33FF57 for small, impactful accents, interactive states, or to provide a fresh, unexpected pop of color.

background

Consider a pure white or very light gray background to let the vibrant colors truly pop. Alternatively, use a deep neutral like charcoal for dramatic contrast.

text

For optimal readability, use pure black or very dark gray text on #FFC300 and #33FF57. For text on #FF5733, #3357FF, or #C70039, crisp white text is essential to ensure contrast.

Accessibility notes

Ensure dark text on #FFC300 and #33FF57 meets WCAG AA contrast standards.
Verify white text on #FF5733, #3357FF, and #C70039 has sufficient contrast.
Avoid using vibrant colors as text on other vibrant colors (e.g., #33FF57 text on #FFC300) due to low contrast.
Interactive elements should have distinct focus states that are easily visible against all hues.

Recommended combinations

Dynamic Trio

Ideal for energetic headers and main content blocks, creating a vibrant and engaging focal point.

#FF5733 · #3357FF · #FFC300

Playful Accent

Excellent for highlights and graphic patterns, adding a cheerful and bold touch to designs.

#FFC300 · #33FF57 · #C70039

Bold Contrast

Create striking visual hierarchies and calls-to-action, ensuring maximum impact and readability.

#3357FF · #C70039 · #FF5733

CSS variables

:root {
  --pop-art-punch-1: #FF5733;
  --pop-art-punch-2: #FFC300;
  --pop-art-punch-3: #33FF57;
  --pop-art-punch-4: #3357FF;
  --pop-art-punch-5: #C70039;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pop-art-punch": {
        1: "#FF5733",
        2: "#FFC300",
        3: "#33FF57",
        4: "#3357FF",
        5: "#C70039",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#FFC300

Color 3#33FF57

Color 4#3357FF

Color 5#C70039

Accessibility

Contrast checker

2:1Fail

2.3:1Fail

1.7:1Fail

1.9:1Fail

2:1Fail

1.2:1Fail

3.3:1AA18

3.7:1AA18

2.3:1Fail

1.2:1Fail

3.9:1AA18

4.5:1AA18

1.7:1Fail

3.3:1AA18

3.9:1AA18

1.1:1Fail

1.9:1Fail

3.7:1AA18

4.5:1AA18

1.1:1Fail

Similar palettes

More like Pop Art Punch

View all vibrant

Carnival Lights

Disco Glitz Beat

Festival Marquee Lights

Primary Block Party

Tropical Fiesta Juice

Circus Tent Jubilee