Palette

Pop Art Boldness

A striking and playful palette, reminiscent of classic pop art and vibrant comic books, full of impact.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#FFFF00#0000FF#000000#FFFFFF

Palette guide

How to use Pop Art Boldness

Overview

The Pop Art Boldness palette is a striking and energetic selection, perfect for designs that demand immediate attention and convey a playful, retro vibe. Featuring the iconic primary colors of bright red #FF0000, sunny yellow #FFFF00, and electric blue #0000FF, this palette is grounded by crisp black #000000 and pure white #FFFFFF. Designers can harness its high-contrast nature to create dynamic visual narratives reminiscent of classic comic books and graphic art. Developers will find these distinct hues easy to implement for UI elements, ensuring clarity and impact. This palette is ideal for projects aiming for a bold, assertive, and memorable aesthetic, offering versatility for both digital and print applications.

Best used for

Comic book art and graphic novels
Retro-themed branding and logos
Event posters and promotional flyers
Children's media and toy design
High-energy web and mobile app interfaces
Fashion and apparel designs with a vintage twist

Suggested color roles

primary

Use #FF0000 for critical calls-to-action, main headlines, or dominant graphical elements that need to convey urgency and energy immediately.

secondary

Deploy #0000FF for supporting design elements, subheadings, or backgrounds where a strong, stable contrast to the primary red is desired, adding depth.

accent

Apply #FFFF00 sparingly for highlights, warnings, or interactive states to create a playful visual pop, drawing the eye without overwhelming the primary focus.

background

Utilize #FFFFFF as a clean, expansive canvas, allowing the bold primary and secondary colors to truly stand out, ensuring maximum readability and a fresh feel.

text

Employ #000000 for all body text, headings, and crucial information, particularly against white or light backgrounds, to ensure optimal contrast and readability.

Accessibility notes

Ensure #000000 text on #FFFFFF background meets WCAG AAA standards for optimal readability across all content.
Avoid placing #FFFF00 (Yellow) text or small interactive elements directly against #FFFFFF (White) due to insufficient contrast.
Use the vibrant primary colors like #FF0000 and #0000FF cautiously for large blocks of text; reserve them for headlines or accents.
Verify sufficient contrast when pairing any of the bright colors, such as #FF0000 on #0000FF, for critical information display.

Recommended combinations

Dynamic Duo

Ideal for high-impact headers, hero sections, or graphic novel panels to create dramatic visual tension and focus.

#FF0000 · #0000FF · #FFFFFF

Pop Contrast

Perfect for alert messages, callout boxes, or interactive buttons where bright visibility and clear messaging are paramount.

#FFFF00 · #000000 · #FFFFFF

Retro Base

Excellent for bold branding elements, background patterns, or navigation bars to evoke a classic comic book aesthetic.

#0000FF · #FF0000 · #000000

CSS variables

:root {
  --pop-art-boldness-1: #FF0000;
  --pop-art-boldness-2: #FFFF00;
  --pop-art-boldness-3: #0000FF;
  --pop-art-boldness-4: #000000;
  --pop-art-boldness-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pop-art-boldness": {
        1: "#FF0000",
        2: "#FFFF00",
        3: "#0000FF",
        4: "#000000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#FFFF00

Color 3#0000FF

Color 4#000000

Color 5#FFFFFF

Accessibility

Contrast checker

3.7:1AA18

2.1:1Fail

5.3:1AA

4:1AA18

3.7:1AA18

8:1AAA

19.6:1AAA

1.1:1Fail

2.1:1Fail

8:1AAA

2.4:1Fail

8.6:1AAA

5.3:1AA

19.6:1AAA

2.4:1Fail

21:1AAA

4:1AA18

1.1:1Fail

8.6:1AAA

21:1AAA

Similar palettes

More like Pop Art Boldness