Palette
Blazing primary colors creating a high-energy, futuristic urban glow.
Preview
Interface
A quick look at how Electric City Pulse 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 Pulse' palette defines blazing primary colors, creating a high-energy, futuristic urban glow. With intense #00FFFF cyan, vibrant #FF00FF magenta, brilliant #FFFF00 yellow, vivid #00FF00 green, and bold #FF0000 red, this scheme is a direct and powerful collection. It's perfectly suited for designs that need to convey urgency, excitement, or a stark digital aesthetic, demanding immediate attention with its raw, energetic hues.
primary
Utilize #FF0000 as the dominant, urgent red for critical alerts, main calls-to-action, or focal points that demand immediate attention.
secondary
Employ #00FFFF for strong supporting elements, subheadings, or to create a vibrant contrast with the primary red, adding dynamic energy.
accent
Apply #FFFF00 or #FF00FF sparingly for high-energy highlights, glowing effects, notifications, or small details that need to pop dramatically.
background
For maximum impact, use a neutral background like black or very dark grey. White can also create a stark, modern contrast.
text
On dark backgrounds, white or #FFFF00 for impactful headlines will be highly visible. On white, black or dark grey is recommended for body text.
A classic primary neon trio for energetic backgrounds, striking headlines, or dynamic animated elements in digital ads.
#00FFFF · #FF00FF · #FFFF00Combine these for a high-contrast effect perfect for alerts or warnings, where #FF0000 and #00FF00 provide clear visual cues.
#FF0000 · #00FF00 · #FFFF00Use for clear, impactful visuals where #00FFFF and #FFFF00 create a luminous base with #FF0000 adding a bold, urgent accent.
#00FFFF · #FFFF00 · #FF0000:root {
--electric-city-pulse-2-1: #00FFFF;
--electric-city-pulse-2-2: #FF00FF;
--electric-city-pulse-2-3: #FFFF00;
--electric-city-pulse-2-4: #00FF00;
--electric-city-pulse-2-5: #FF0000;
}theme: {
extend: {
colors: {
"electric-city-pulse-2": {
1: "#00FFFF",
2: "#FF00FF",
3: "#FFFF00",
4: "#00FF00",
5: "#FF0000",
}
}
}
}Palette colors
Accessibility
Similar palettes