darkneonvibrant
Cyberpunk Color Palette
Cyberpunk is a dark, neon and vibrant color palette of 5 colors: Oxford Blue (#0d0221), Space Cadet (#261447), Rose (#ff3864), Turquoise (#2de2e6) and Deep Pink (#f6019d). Its dominant hue is pink.
The darkest color, Oxford Blue, on the lightest, Turquoise, gives a 12.53:1 contrast ratio — enough for body text at WCAG AAA. 5 pairs in this palette pass AA for normal text. Deep Pink (#f6019d) is its most saturated color and a natural choice for buttons and links.
Colors
- Oxford Blue
- Space Cadet
- Rose
- Turquoise
- Deep Pink
CSS Output
:root {
--cyberpunk-1: #0d0221;
--cyberpunk-2: #261447;
--cyberpunk-3: #ff3864;
--cyberpunk-4: #2de2e6;
--cyberpunk-5: #f6019d;
}Cyberpunk on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Oxford Blue on Turquoise#0d0221 on #2de2e612.53:1AAA
- Space Cadet on Turquoise#261447 on #2de2e610.31:1AAA
- Oxford Blue on Rose#0d0221 on #ff38645.72:1AA
- Oxford Blue on Deep Pink#0d0221 on #f6019d5.16:1AA
- Space Cadet on Rose#261447 on #ff38644.71:1AA
- Space Cadet on Deep Pink#261447 on #f6019d4.24:1AA Large