Palette

Retro Pop Art

Bold and graphic colors inspired by mid-century pop art, exuding playful energy and iconic style.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#0000FF#FFFF00#000000#F8F8F8

Palette guide

How to use Retro Pop Art

Overview

The Retro Pop Art palette offers a bold and graphic aesthetic, drawing inspiration from mid-century pop art to exude playful energy and iconic style. This collection features classic primary colors: striking Red (#FF0000), deep Blue (#0000FF), and vivid Yellow (#FFFF00), grounded by a stark Black (#000000) and bright Near White (#F8F8F8). It's an excellent choice for designers and developers looking to create impactful, high-contrast visuals that are both nostalgic and modern, perfect for conveying a strong brand message with a playful twist.

Best used for

Branding for creative agencies and art studios
Event promotions (art exhibitions, festivals)
Magazine layouts and editorial design
Fashion and apparel graphics
Product packaging with a playful, graphic appeal
Digital advertising campaigns requiring high visual impact

Suggested color roles

primary

Utilize #FF0000 (Red) for commanding attention, main calls to action, or as a dominant brand color.

secondary

Apply #0000FF (Blue) to provide a stable counterpoint, for subheadings, key links, or informational sections.

accent

Use #FFFF00 (Yellow) for highlights, playful details, interactive states, or to draw attention to specific elements.

background

The crisp #F8F8F8 (Near White) provides a clean canvas, allowing the bold primary colors to stand out vibrantly.

text

Employ #000000 (Black) for body text on #F8F8F8 to ensure maximum readability and a classic pop art feel.

Accessibility notes

Ensure #FF0000 and #0000FF provide sufficient contrast against #F8F8F8 for both large and small text.
Avoid using #FFFF00 for small text on #F8F8F8; opt for #000000 or a darker color for legibility.
High contrast pairs like #FF0000 on #000000 work well for headings but may be too intense for extensive body text.
Test all color combinations for WCAG AA/AAA compliance, especially for critical user interface elements.

Recommended combinations

Primary Pop

For bold headlines, foundational branding elements, and striking visual compositions.

#F8F8F8 · #FF0000 · #0000FF

Comic Contrast

Ideal for dynamic call-outs, graphic novel aesthetics, and high-energy banners.

#000000 · #FFFF00 · #FF0000

Clean Graphic

Perfect for minimalist layouts with strong visual anchors and clear information hierarchy.

#F8F8F8 · #000000 · #0000FF

CSS variables

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

Tailwind config

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

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#000000

Color 5#F8F8F8

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

5.3:1AA

3.8:1AA18

2.1:1Fail

8:1AAA

2.4:1Fail

8.1:1AAA

3.7:1AA18

8:1AAA

19.6:1AAA

1:1Fail