Color collection
Cyberpunk Purple Palettes
Neon purple palettes for cyberpunk landing pages, stream overlays, and futuristic game UI.
#1E66EBAccent#F2A036Surface#EBEDF4Text#121621Support#EC6594Cyberpunk Purple 13Cyberpunk / Purple / GamingQuality 97Primary#1EA0EBAccent#F24936Surface#EBF0F4Text#121A21Support#EC65BACyberpunk Purple 15Cyberpunk / Purple / GamingQuality 96Primary#1E2BEBAccent#ECF236Surface#ECEBF4Text#121221Support#EC656ECyberpunk Purple 16Cyberpunk / Purple / GamingQuality 95Primary#4A1EEBAccent#C9F236Surface#EEEBF4Text#161221Support#EC8265Cyberpunk Purple 17Cyberpunk / Purple / GamingQuality 95Primary#851EEBAccent#3CF236Surface#F1EBF4Text#1A1221Support#ECA865Cyberpunk Purple 1Cyberpunk / Purple / GamingQuality 94Primary#EB1E25Accent#F29436Surface#F4ECEBText#211312Support#69EC65How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for stream overlays, game UI, and futuristic event pages. Combine purple with cyan or lime accents and keep backgrounds dark enough for glow effects.
Vivid colors are limited to action and highlight roles so the palette feels energetic without overpowering UI text.
CSS Variables
:root {
--primary: #1E66EB;
--accent: #F2A036;
--surface: #EBEDF4;
--text: #121621;
--support: #EC6594;
}FAQ
Where should I use cyberpunk purple palettes?
These palettes are designed for stream overlays, game UI, and futuristic event pages.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Combine purple with cyan or lime accents and keep backgrounds dark enough for glow effects.