Neon Sprawl Color Palette
Neon city after midnight: an inky navy-purple night lit by hot magenta, electric cyan, acid lime, and high-voltage purple. Maximum contrast — saturated signage glow against near-black — for that Blade Runner, rain-slicked-street look. Made for sci-fi illustration, game UI, and glowing cyberpunk type.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--cyberpunk-neon-1: #1A1030;
--cyberpunk-neon-2: #160D2A;
--cyberpunk-neon-3: #120A24;
--cyberpunk-neon-4: #0E081E;
--cyberpunk-neon-5: #0A0618;
--cyberpunk-neon-6: #070412;
--cyberpunk-neon-7: #FF2D9B;
--cyberpunk-neon-8: #F01E8C;
--cyberpunk-neon-9: #DE127D;
--cyberpunk-neon-10: #C8086D;
--cyberpunk-neon-11: #B0005D;
--cyberpunk-neon-12: #98004F;
--cyberpunk-neon-13: #1FE6F0;
--cyberpunk-neon-14: #16D2E4;
--cyberpunk-neon-15: #0FBDD6;
--cyberpunk-neon-16: #0AA6C4;
--cyberpunk-neon-17: #078FB0;
--cyberpunk-neon-18: #05789A;
--cyberpunk-neon-19: #B6F03A;
--cyberpunk-neon-20: #A2E22C;
--cyberpunk-neon-21: #8DD220;
--cyberpunk-neon-22: #77BC18;
--cyberpunk-neon-23: #62A412;
--cyberpunk-neon-24: #4F8C0D;
--cyberpunk-neon-25: #7B30F0;
--cyberpunk-neon-26: #6A24E0;
--cyberpunk-neon-27: #5A1ACE;
--cyberpunk-neon-28: #4B12B8;
--cyberpunk-neon-29: #3D0CA0;
--cyberpunk-neon-30: #310886;
}SCSS
$cyberpunk-neon-1: #1A1030;
$cyberpunk-neon-2: #160D2A;
$cyberpunk-neon-3: #120A24;
$cyberpunk-neon-4: #0E081E;
$cyberpunk-neon-5: #0A0618;
$cyberpunk-neon-6: #070412;
$cyberpunk-neon-7: #FF2D9B;
$cyberpunk-neon-8: #F01E8C;
$cyberpunk-neon-9: #DE127D;
$cyberpunk-neon-10: #C8086D;
$cyberpunk-neon-11: #B0005D;
$cyberpunk-neon-12: #98004F;
$cyberpunk-neon-13: #1FE6F0;
$cyberpunk-neon-14: #16D2E4;
$cyberpunk-neon-15: #0FBDD6;
$cyberpunk-neon-16: #0AA6C4;
$cyberpunk-neon-17: #078FB0;
$cyberpunk-neon-18: #05789A;
$cyberpunk-neon-19: #B6F03A;
$cyberpunk-neon-20: #A2E22C;
$cyberpunk-neon-21: #8DD220;
$cyberpunk-neon-22: #77BC18;
$cyberpunk-neon-23: #62A412;
$cyberpunk-neon-24: #4F8C0D;
$cyberpunk-neon-25: #7B30F0;
$cyberpunk-neon-26: #6A24E0;
$cyberpunk-neon-27: #5A1ACE;
$cyberpunk-neon-28: #4B12B8;
$cyberpunk-neon-29: #3D0CA0;
$cyberpunk-neon-30: #310886;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'cyberpunk-neon': {
'1': '#1A1030',
'2': '#160D2A',
'3': '#120A24',
'4': '#0E081E',
'5': '#0A0618',
'6': '#070412',
'7': '#FF2D9B',
'8': '#F01E8C',
'9': '#DE127D',
'10': '#C8086D',
'11': '#B0005D',
'12': '#98004F',
'13': '#1FE6F0',
'14': '#16D2E4',
'15': '#0FBDD6',
'16': '#0AA6C4',
'17': '#078FB0',
'18': '#05789A',
'19': '#B6F03A',
'20': '#A2E22C',
'21': '#8DD220',
'22': '#77BC18',
'23': '#62A412',
'24': '#4F8C0D',
'25': '#7B30F0',
'26': '#6A24E0',
'27': '#5A1ACE',
'28': '#4B12B8',
'29': '#3D0CA0',
'30': '#310886',
},
},
},
},
};JSON
{
"name": "Neon Sprawl",
"colors": [
"#1A1030",
"#160D2A",
"#120A24",
"#0E081E",
"#0A0618",
"#070412",
"#FF2D9B",
"#F01E8C",
"#DE127D",
"#C8086D",
"#B0005D",
"#98004F",
"#1FE6F0",
"#16D2E4",
"#0FBDD6",
"#0AA6C4",
"#078FB0",
"#05789A",
"#B6F03A",
"#A2E22C",
"#8DD220",
"#77BC18",
"#62A412",
"#4F8C0D",
"#7B30F0",
"#6A24E0",
"#5A1ACE",
"#4B12B8",
"#3D0CA0",
"#310886"
]
}Hex list
#1A1030
#160D2A
#120A24
#0E081E
#0A0618
#070412
#FF2D9B
#F01E8C
#DE127D
#C8086D
#B0005D
#98004F
#1FE6F0
#16D2E4
#0FBDD6
#0AA6C4
#078FB0
#05789A
#B6F03A
#A2E22C
#8DD220
#77BC18
#62A412
#4F8C0D
#7B30F0
#6A24E0
#5A1ACE
#4B12B8
#3D0CA0
#310886