Cyberpunk Color Palette — HEX Codes, Swatches & UI Palette
Inspired by rainy futuristic megacities, holograms, and neon kanji signs. Glaring laser cyan and hot fuchsia slice through pitch-black rainy asphalt and ultraviolet shadows.
Color Swatches & Technical Specifications
Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Cyberpunk Color Palette.
UI Design & Color Hierarchy Guide
Ideal for sci-fi video games, esports tournaments, crypto analytics, and tech launch pages. Use glowing box-shadows with cyan (#00F0FF) and neon pink (#FF007F) over pure black (#0D0E15).
WCAG 2.1 Accessibility & Contrast Matrix
Legibility ratings between palette elements and key backgrounds (Lightest: Acid Yellow HUD | Darkest: Dystopian Asphalt):
| Swatch | Contrast vs Light Canvas | Contrast vs Dark Canvas |
|---|---|---|
| Neon Cyan Glitch (#00F0FF) | 1.11:1 Fail | 13.68:1 AAA |
| Hot Fuchsia Laser (#FF007F) | 2.98:1 Fail | 5.1:1 AA |
| Ultraviolet Night (#7000FF) | 5.29:1 AA | 2.87:1 Fail |
| Acid Yellow HUD (#FFE600) | 1.0:1 Fail | 15.2:1 AAA |
| Dystopian Asphalt (#0D0E15) | 15.2:1 AAA | 1.0:1 Fail |
CSS Custom Properties & Design Tokens
Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:
:root {
--color-1: #00F0FF; /* Neon Cyan Glitch - Electric High-Tech Lead */
--color-2: #FF007F; /* Hot Fuchsia Laser - Secondary Punch */
--color-3: #7000FF; /* Ultraviolet Night - Atmospheric Violet */
--color-4: #FFE600; /* Acid Yellow HUD - Warning Highlight */
--color-5: #0D0E15; /* Dystopian Asphalt - Abyssal Black Ground */
}{
colors: {
'palette-1': '#00F0FF',
'palette-2': '#FF007F',
'palette-3': '#7000FF',
'palette-4': '#FFE600',
'palette-5': '#0D0E15'
}
}Explore More Curated Color Palettes
Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.