80s Arcade color palette
These are the colors of a glowing arcade cabinet: hot pink #FF0080, orange, pure yellow #FFFF00, pure green and cyan, every one at maximum saturation. Three of them are very light, so on a white page they wash out. Put them on black and they look like a high-score screen. Use it for a roller rink poster or a retro game's title screen.
80s Arcade palette in use
Use black as the background and set text in #FFFF00 or #00FFFF. #FF0080 makes the primary button, #00FF00 marks scores or success, and #FF8000 suits secondary highlights.
This pair measures 19.55:1, so it works for body text too. The button uses #00FF00 with black text.
ButtonGood for
- Retro game UI
- Roller rink poster
- 80s party invitation
- Pixel art portfolio
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 |
|---|---|---|---|
#FF0080 | #FFFF00 | 3.51:1 | AA large |
#FF0080 | #00FFFF | 3.01:1 | AA large |
80s Arcade palette as code
CSS variables
:root {
--80s-arcade-1: #FF0080;
--80s-arcade-2: #FF8000;
--80s-arcade-3: #FFFF00;
--80s-arcade-4: #00FF00;
--80s-arcade-5: #00FFFF;
}Tailwind v4
@theme {
--color-80s-arcade-1: #FF0080;
--color-80s-arcade-2: #FF8000;
--color-80s-arcade-3: #FFFF00;
--color-80s-arcade-4: #00FF00;
--color-80s-arcade-5: #00FFFF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'80s-arcade': {
100: '#FF0080',
200: '#FF8000',
300: '#FFFF00',
400: '#00FF00',
500: '#00FFFF',
},SCSS
$80s-arcade-1: #FF0080;
$80s-arcade-2: #FF8000;
$80s-arcade-3: #FFFF00;
$80s-arcade-4: #00FF00;
$80s-arcade-5: #00FFFF;JSON
["#FF0080","#FF8000","#FFFF00","#00FF00","#00FFFF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.