Palette

Pop Art Canvas

Bold, direct colors, bringing to mind the vivid yet simple style of classic pop art.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#0000FF#FFFF00#FF8000#008000

Palette guide

How to use Pop Art Canvas

Overview

The Pop Art Canvas palette is a vibrant collection drawing inspiration from classic pop art aesthetics, perfect for projects demanding a bold, playful, and retro feel. Featuring direct, unmixed hues like #FF0000 (bright red), #0000FF (electric blue), and #FFFF00 (pure yellow), this palette evokes the iconic visual language of mid-20th-century art movements. Designers and developers can leverage the stark contrasts and high saturation of these colors, including the energetic #FF8000 (vivid orange) and the striking #008000 (bold green), to create dynamic interfaces, striking branding, or expressive digital illustrations. Its inherent playfulness makes it ideal for capturing attention and conveying a sense of fun and nostalgia.

Best used for

Retro-themed branding and logos
Children's book illustrations and toy packaging
Event posters and promotional materials
Digital art and graphic novel design
Website hero sections needing a high impact
App interfaces for playful or creative tools

Suggested color roles

primary

#FF0000. A strong, attention-grabbing red, ideal for main calls-to-action, significant headings, or focal points in illustrations.

secondary

#0000FF. This electric blue offers a vibrant contrast, excellent for secondary buttons, navigation elements, or as a strong background against other bright hues.

accent

#FFFF00. A pure, bright yellow perfect for highlighting key information, small decorative elements, or adding a burst of energy to icons.

background

#FF8000. Use this vivid orange sparingly as a background for sections where you want high energy, or as a vibrant backdrop for black or white text. Alternatively, use a neutral off-white or light gray for broader backgrounds to let these colors truly pop.

text

#008000. This bold green can be used for impactful headings or short text blocks. For body text, consider using a stark black or a very dark charcoal for optimal readability, as the palette's colors are generally too bright for extensive text.

Accessibility notes

Ensure sufficient contrast between background colors and text, especially when pairing bright hues like #FFFF00 with other vibrant colors.
Avoid using #FF0000 (red) and #008000 (green) together for critical information, as this can be problematic for color-blind users.
Use patterns or icons in addition to color to convey meaning, enhancing accessibility for all users.
Test all text and interactive element color combinations with WCAG contrast checkers to meet AA or AAA standards.

Recommended combinations

Bold Primary

Classic pop art trio for high-impact headlines, graphic elements, or distinct branding.

#FF0000 · #0000FF · #FFFF00

Energetic Duo

A lively, contrasting pair suitable for playful illustrations, call-to-action buttons, or accentuating key features.

#FF8000 · #008000 · #0000FF

Bright Highlight

Use the yellow for a vibrant background or highlight, with the red for prominent text or graphic overlays.

#FFFF00 · #FF0000 · #FF8000

CSS variables

:root {
  --pop-art-canvas-1: #FF0000;
  --pop-art-canvas-2: #0000FF;
  --pop-art-canvas-3: #FFFF00;
  --pop-art-canvas-4: #FF8000;
  --pop-art-canvas-5: #008000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pop-art-canvas": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#FF8000",
        5: "#008000",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#FF8000

Color 5#008000

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

1.6:1Fail

1.3:1Fail

2.1:1Fail

8:1AAA

3.4:1AA18

1.7:1Fail

3.7:1AA18

8:1AAA

2.3:1Fail

4.8:1AA

1.6:1Fail

3.4:1AA18

2.3:1Fail

2:1Fail

1.3:1Fail

1.7:1Fail

4.8:1AA

2:1Fail

Similar palettes

More like Pop Art Canvas

Vintage Carnival Ride

Vintage Comic Pop

Atomic Soda Pop