Palette
A high-contrast burst of electric purples and pinks, reminiscent of a futuristic, glowing cityscape at night.
Preview
Interface
A quick look at how Electric Cyber Glow reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The 'Electric Cyber Glow' palette is a high-contrast burst of electric purples and pinks, reminiscent of a futuristic, glowing cityscape at night. From the deep #080D1D to the radiant #FF7BF7, with intermediary shades like #2B0A4F, #8F0A7D, and #D01BD0, it offers a dramatic and energetic spectrum. This scheme is perfect for cyberpunk or synthwave aesthetics, conveying a powerful digital glow, innovation, and a sense of otherworldliness.
primary
Utilize #D01BD0 as the dominant electric magenta for main calls-to-action, prominent headings, or key interactive elements.
secondary
Employ #8F0A7D for supporting backgrounds, subheadings, or to create a subtle depth within the purple spectrum, complementing the primary hue.
accent
Apply #FF7BF7 sparingly for high-energy highlights, glowing effects, notifications, or small details that need to pop dramatically.
background
Use #080D1D as the primary background color to establish a deep, atmospheric canvas, enhancing the luminosity of the brighter purples and pinks.
text
For body text on dark backgrounds, use white or a very light grey. For impactful headings or alerts, #FF7BF7 will provide excellent contrast and visibility.
Ideal for a dark UI: #080D1D as background, #D01BD0 for primary content, and #FF7BF7 for urgent notifications or interactive elements.
#080D1D · #D01BD0 · #FF7BF7Create a smooth, sophisticated purple gradient for backgrounds or large graphical elements, adding depth and visual interest.
#2B0A4F · #8F0A7D · #D01BD0Use #080D1D as a base, #8F0A7D for subtle elements, and #FF7BF7 for striking, eye-catching accents in digital art or tech interfaces.
#080D1D · #8F0A7D · #FF7BF7:root {
--electric-cyber-glow-1: #080D1D;
--electric-cyber-glow-2: #2B0A4F;
--electric-cyber-glow-3: #8F0A7D;
--electric-cyber-glow-4: #D01BD0;
--electric-cyber-glow-5: #FF7BF7;
}theme: {
extend: {
colors: {
"electric-cyber-glow": {
1: "#080D1D",
2: "#2B0A4F",
3: "#8F0A7D",
4: "#D01BD0",
5: "#FF7BF7",
}
}
}
}Palette colors
Accessibility
Similar palettes