Palette
A dazzling array of bright, artificial lights defining the electric atmosphere of a bustling metropolis.
Preview
Interface
A quick look at how Electric City Nights 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 Nights' palette is a dazzling array of bright, artificial lights, defining the electric atmosphere of a bustling metropolis. Featuring intense #00FFFF cyan, vibrant #FF00FF magenta, brilliant #FFFF00 yellow, electric #39FF14 green, and fiery #FF4500 orange, this scheme is a high-energy, playful collection. It's perfectly suited for designs that need to evoke a sense of excitement, celebration, or a bold, pop-art aesthetic.
primary
Utilize #00FFFF as the dominant electric blue/cyan for main calls-to-action, prominent headings, or large graphical elements that demand attention.
secondary
Employ #FF00FF for strong supporting elements, subheadings, or to create a vibrant contrast with the primary cyan, adding dynamic energy.
accent
Apply #FFFF00 or #39FF14 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 #FFFF00 for impactful headlines will be highly visible.
A classic neon trio for energetic backgrounds, striking headlines, or dynamic animated elements in digital ads.
#00FFFF · #FF00FF · #FFFF00Combine these for a playful, high-contrast effect perfect for festival branding, where #39FF14 and #FF4500 provide vibrant energy.
#39FF14 · #FF4500 · #FF00FFUse for clear, impactful visuals where #00FFFF and #FFFF00 create a luminous base with #FF4500 adding a warm, vibrant accent.
#00FFFF · #FFFF00 · #FF4500:root {
--electric-city-nights-2-1: #00FFFF;
--electric-city-nights-2-2: #FF00FF;
--electric-city-nights-2-3: #FFFF00;
--electric-city-nights-2-4: #39FF14;
--electric-city-nights-2-5: #FF4500;
}theme: {
extend: {
colors: {
"electric-city-nights-2": {
1: "#00FFFF",
2: "#FF00FF",
3: "#FFFF00",
4: "#39FF14",
5: "#FF4500",
}
}
}
}Palette colors
Accessibility
Similar palettes