Palette
A dynamic burst of bright, artificial colors inspired by a bustling city's neon lights and vibrant signs.
Preview
Interface
A quick look at how Electric City Pop 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 Pop' palette is a dynamic burst of bright, artificial colors inspired by a bustling city's neon lights and vibrant signs. Featuring intense #FF00FF magenta, electric #00FFFF cyan, brilliant #FFD700 gold, vivid #00FF00 green, and fiery #FF4500 orange, this scheme is a high-energy, playful collection. It's perfectly suited for designs that need to convey excitement, youthfulness, or a bold, pop-art aesthetic, demanding immediate attention.
primary
Utilize #FF00FF as the dominant electric magenta for main calls-to-action, prominent headings, or large graphical elements that demand attention.
secondary
Employ #00FFFF for strong supporting elements, subheadings, or to create a vibrant contrast with the primary magenta, adding dynamic energy.
accent
Apply #FFD700 or #00FF00 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 white or a very light grey. If a dark background is desired, opt for deep charcoal or black.
text
On light backgrounds, use black or very dark grey for readability. On dark backgrounds, white or #FFD700 for impactful headlines will be highly visible.
A classic neon combination for energetic backgrounds, striking headlines, or dynamic animated elements in digital ads.
#FF00FF · #00FFFF · #FFD700Combine these for a playful, high-contrast effect perfect for festival branding, where #00FF00 and #FF4500 provide vibrant energy.
#00FF00 · #FF4500 · #FF00FFUse for clear, impactful visuals where #00FFFF and #FFD700 create a luminous base with #FF4500 adding a warm, vibrant accent.
#00FFFF · #FFD700 · #FF4500:root {
--electric-city-pop-1: #FF00FF;
--electric-city-pop-2: #00FFFF;
--electric-city-pop-3: #FFD700;
--electric-city-pop-4: #00FF00;
--electric-city-pop-5: #FF4500;
}theme: {
extend: {
colors: {
"electric-city-pop": {
1: "#FF00FF",
2: "#00FFFF",
3: "#FFD700",
4: "#00FF00",
5: "#FF4500",
}
}
}
}Palette colors
Accessibility
Similar palettes