Palette

Pop Art Fizz

A dynamic and edgy palette bursting with high-contrast, energetic colors of pop art.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFEC00#FF006E#007FFF#00FF00#222222

Palette guide

How to use Pop Art Fizz

Overview

The Pop Art Fizz palette is a dynamic and edgy collection bursting with high-contrast, energetic colors, perfect for designers and developers aiming for a modern, playful aesthetic. Featuring a zesty yellow (#FFEC00), electric fuchsia (#FF006E), vivid blue (#007FFF), striking green (#00FF00), and a grounding dark gray (#222222), this palette evokes the daring spirit of pop art with a contemporary twist. It’s ideal for projects that demand attention and convey a sense of fun and innovation, from digital interfaces to bold print materials. This palette provides a strong visual hierarchy and allows for highly readable text against its vibrant and dark tones.

Best used for

Modern branding and logos
Digital marketing campaigns
Youth-focused apps
Event promotions
Packaging design
Interactive web experiences

Suggested color roles

primary

Utilize electric fuchsia #FF006E or vivid blue #007FFF for dominant elements, creating a strong, memorable visual anchor.

secondary

Employ zesty yellow #FFEC00 for secondary calls-to-action, highlights, or to add a bright, optimistic counterpoint.

accent

Introduce striking green #00FF00 for small, impactful accents, interactive states, or to add a fresh, unexpected pop of color.

background

Use the deep dark gray #222222 for sophisticated, high-contrast backgrounds, or a pure white for a cleaner, more open feel.

text

For optimal readability, use pure white text on #222222, #FF006E, or #007FFF. Use the dark gray #222222 for text on lighter backgrounds like #FFEC00 and #00FF00.

Accessibility notes

Ensure white text on #222222, #FF006E, #007FFF, and #00FF00 meets WCAG AA contrast standards.
Verify #222222 text on #FFEC00 has sufficient contrast for readability.
Avoid using #007FFF text on #00FF00 or similar vibrant-on-vibrant pairings due to low contrast.
Use focus indicators that stand out against all colors, especially the vibrant ones.

Recommended combinations

Bold Statement

Ideal for strong branding and impactful headlines, creating a sophisticated yet vibrant look.

#FF006E · #007FFF · #222222

Energetic Pop

Excellent for playful accents and interactive elements, adding a lively spark against a dark base.

#FFEC00 · #00FF00 · #222222

Modern Fresh

Create dynamic visual hierarchies or graphic patterns that feel contemporary and vibrant.

#007FFF · #FFEC00 · #FF006E

CSS variables

:root {
  --pop-art-fizz-1: #FFEC00;
  --pop-art-fizz-2: #FF006E;
  --pop-art-fizz-3: #007FFF;
  --pop-art-fizz-4: #00FF00;
  --pop-art-fizz-5: #222222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pop-art-fizz": {
        1: "#FFEC00",
        2: "#FF006E",
        3: "#007FFF",
        4: "#00FF00",
        5: "#222222",
      }
    }
  }
}

Hex values

Color 1#FFEC00

Color 2#FF006E

Color 3#007FFF

Color 4#00FF00

Color 5#222222

Accessibility

Contrast checker

3.1:1AA18

1.1:1Fail

13.1:1AAA

3.1:1AA18

1:1Fail

2.8:1Fail

4.1:1AA18

3.1:1AA18

1:1Fail

2.8:1Fail

4.2:1AA18

1.1:1Fail

2.8:1Fail

11.6:1AAA

13.1:1AAA

4.1:1AA18

4.2:1AA18

11.6:1AAA

Similar palettes

More like Pop Art Fizz

Pop Art Fizz

See it in context.

Ready when you are.

Built with Pop Art Fizz.

How to use Pop Art Fizz

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Bold Statement

Energetic Pop

Modern Fresh

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pop Art Fizz