Palette

Pop Art Electric

A striking, high-contrast palette with vivid primary colors, embodying the bold spirit 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 Electric 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 Electric.

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

Data visualization

#00FFFF#FF0000#FFFF00#000000#FFFFFF

Palette guide

How to use Pop Art Electric

Overview

The Pop Art Electric palette is a high-voltage collection designed for designers and developers seeking a bold, energetic aesthetic. Featuring striking cyan (#00FFFF), intense red (#FF0000), and vibrant yellow (#FFFF00), this palette offers maximum contrast and visual impact. Grounded by crisp black (#000000) and pure white (#FFFFFF), it’s perfect for projects demanding immediate attention and a modern, graphic sensibility. Use these colors to create dynamic layouts, eye-catching UI elements, or distinctive branding that truly pops. Its inherent contrast simplifies accessibility considerations for text and interactive components, making it a powerful choice for digital and print media alike.

Best used for

Dynamic digital interfaces
Event posters and flyers
Youth-oriented branding
Comic book art styles
Advertising campaigns
Product packaging

Suggested color roles

primary

Utilize electric cyan #00FFFF for hero sections, main calls-to-action, or dominant graphic elements to establish a modern, energetic feel.

secondary

Deploy bold red #FF0000 for critical alerts, secondary calls-to-action, or to create strong visual anchors that complement the primary cyan.

accent

Introduce vibrant yellow #FFFF00 for highlights, interactive states, or small decorative elements to add a playful, high-energy spark.

background

Employ pure white #FFFFFF for clean, expansive backgrounds that allow the vibrant colors to truly stand out, or use #000000 for dramatic, high-contrast backdrops.

text

Prefer stark black #000000 for primary text on light backgrounds or pure white #FFFFFF for text on dark backgrounds like #FF0000 or #00FFFF to ensure maximum readability.

Accessibility notes

Ensure #000000 text on #FFFF00 background has sufficient contrast (WCAG AA).
Verify #FFFFFF text on #FF0000 and #00FFFF meets WCAG AA standards for readability.
Avoid using #FF0000 text on #FFFF00 background due to low contrast and potential eye strain.
Use a contrast checker for all foreground/background pairings, especially with vibrant hues like #00FFFF.

Recommended combinations

High Impact

Ideal for banners or headlines where maximum attention is required, creating a bold statement.

#00FFFF · #FF0000 · #000000

Clean Pop

Excellent for clean UI elements and calls-to-action on a light canvas, maintaining vibrancy.

#FFFFFF · #00FFFF · #FF0000

Energetic Contrast

Create striking graphic patterns or strong visual hierarchy on a dark base for a dramatic effect.

#000000 · #FFFF00 · #00FFFF

CSS variables

:root {
  --pop-art-electric-1: #00FFFF;
  --pop-art-electric-2: #FF0000;
  --pop-art-electric-3: #FFFF00;
  --pop-art-electric-4: #000000;
  --pop-art-electric-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pop-art-electric": {
        1: "#00FFFF",
        2: "#FF0000",
        3: "#FFFF00",
        4: "#000000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF0000

Color 3#FFFF00

Color 4#000000

Color 5#FFFFFF

Accessibility

Contrast checker

3.2:1AA18

1.2:1Fail

16.7:1AAA

1.3:1Fail

3.2:1AA18

3.7:1AA18

5.3:1AA

4:1AA18

1.2:1Fail

3.7:1AA18

19.6:1AAA

1.1:1Fail