Pop Art color palette
Colors straight from the tube, the way Lichtenstein and Warhol used them: pure red #FF0000, yellow #FFFF00, blue #0000FF, green and magenta. Nothing is mixed or softened, and each color is as saturated as a screen can show. It works best in flat blocks with thick black outlines. Use it for a comic book layout or a gallery poster.
Pop Art palette in use
Try a #FFFF00 background with #0000FF text and black outlines. #FF0000 is the button color, and #FF00FF and #00FF00 work for Ben-Day dots, badges and speech bubbles.
This pair measures 8.00:1, so it works for body text too. The button uses #FF00FF with black text.
ButtonGood for
- Comic book layout
- Gallery exhibition poster
- Kids' museum signage
- Streetwear graphic tee
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#0000FF | #FFFF00 | 8.00:1 | AAA |
#0000FF | #00FF00 | 6.26:1 | AA |
#FF0000 | #FFFF00 | 3.72:1 | AA large |
Pop Art palette as code
CSS variables
:root {
--pop-art-1: #FF0000;
--pop-art-2: #FFFF00;
--pop-art-3: #0000FF;
--pop-art-4: #00FF00;
--pop-art-5: #FF00FF;
}Tailwind v4
@theme {
--color-pop-art-1: #FF0000;
--color-pop-art-2: #FFFF00;
--color-pop-art-3: #0000FF;
--color-pop-art-4: #00FF00;
--color-pop-art-5: #FF00FF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'pop-art': {
100: '#FF0000',
200: '#FFFF00',
300: '#0000FF',
400: '#00FF00',
500: '#FF00FF',
},SCSS
$pop-art-1: #FF0000;
$pop-art-2: #FFFF00;
$pop-art-3: #0000FF;
$pop-art-4: #00FF00;
$pop-art-5: #FF00FF;JSON
["#FF0000","#FFFF00","#0000FF","#00FF00","#FF00FF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.