Palette
A dazzling array of electric purples, blues, and yellows, embodying the high-octane glow of a futuristic city at night.
Preview
Interface
A quick look at how Electric City Night 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 City Night' palette offers a dazzling array of electric purples, blues, and yellows, embodying the high-octane glow of a futuristic city at night. Anchored by a deep indigo #0A0F1D, it transitions through rich #2E0D4B and vibrant #7A0BCB purples, punctuated by brilliant neon cyan #00FFFF and energetic yellow #FFFF00. This scheme is perfectly suited for creating immersive digital experiences, high-tech branding, and visuals that demand attention with a modern, urban edge.
primary
Use #7A0BCB as the dominant vibrant purple for main calls-to-action, primary interactive elements, or focal points in a design.
secondary
Employ #2E0D4B for supporting backgrounds, subheadings, or to create a subtle depth within the purple spectrum, complementing the primary hue.
accent
Apply #00FFFF or #FFFF00 sparingly for high-energy highlights, glowing effects, notifications, or key information that needs to pop dramatically.
background
Utilize #0A0F1D as the primary background color to establish a deep, atmospheric canvas, enhancing the luminosity of the brighter colors.
text
For body text on dark backgrounds, use white or a very light grey. For impactful headings or alerts, #FFFF00 or #00FFFF will provide excellent contrast and visibility.
Ideal for a dark UI: #0A0F1D as background, #7A0BCB for primary content, and #FFFF00 for urgent notifications or interactive elements.
#0A0F1D · #7A0BCB · #FFFF00Combine #2E0D4B for a rich backdrop, with #00FFFF and #FFFF00 providing dynamic, eye-catching highlights in digital art or event graphics.
#2E0D4B · #00FFFF · #FFFF00Use the dark blues for depth in backgrounds, with #00FFFF as a striking, electric accent for text or glowing elements in futuristic designs.
#0A0F1D · #2E0D4B · #00FFFF:root {
--electric-city-night-4-1: #0A0F1D;
--electric-city-night-4-2: #2E0D4B;
--electric-city-night-4-3: #7A0BCB;
--electric-city-night-4-4: #00FFFF;
--electric-city-night-4-5: #FFFF00;
}theme: {
extend: {
colors: {
"electric-city-night-4": {
1: "#0A0F1D",
2: "#2E0D4B",
3: "#7A0BCB",
4: "#00FFFF",
5: "#FFFF00",
}
}
}
}Palette colors
Accessibility
Similar palettes