Cyber Punk color palette
Deep violet-black #120024 sets the scene, and four colors at full saturation fight for attention on top of it: magenta, cyan, a red-orange and gold. It looks like rain-soaked neon signs in a film city. A little of the bright colors goes a long way, and using all four at once gets loud fast. It was made for sci-fi game menus and synthwave album covers.
Cyber Punk palette in use
Lay everything on #120024 and set body text in #00FFFF. #FF00FF makes a strong button color, #FFD700 highlights prices or scores, and #FF4500 flags warnings.
This pair measures 15.93:1, so it works for body text too. The button uses #FF00FF with black text.
ButtonGood for
- Sci-fi game UI
- Synthwave album cover
- Gaming hardware launch
- Night market poster
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 |
|---|---|---|---|
#120024 | #00FFFF | 15.93:1 | AAA |
#120024 | #FFD700 | 14.24:1 | AAA |
#120024 | #FF00FF | 6.36:1 | AA |
#120024 | #FF4500 | 5.80:1 | AA |
Cyber Punk palette as code
CSS variables
:root {
--cyber-punk-1: #120024;
--cyber-punk-2: #FF00FF;
--cyber-punk-3: #00FFFF;
--cyber-punk-4: #FF4500;
--cyber-punk-5: #FFD700;
}Tailwind v4
@theme {
--color-cyber-punk-1: #120024;
--color-cyber-punk-2: #FF00FF;
--color-cyber-punk-3: #00FFFF;
--color-cyber-punk-4: #FF4500;
--color-cyber-punk-5: #FFD700;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'cyber-punk': {
100: '#120024',
200: '#FF00FF',
300: '#00FFFF',
400: '#FF4500',
500: '#FFD700',
},SCSS
$cyber-punk-1: #120024;
$cyber-punk-2: #FF00FF;
$cyber-punk-3: #00FFFF;
$cyber-punk-4: #FF4500;
$cyber-punk-5: #FFD700;JSON
["#120024","#FF00FF","#00FFFF","#FF4500","#FFD700"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.