Palette
Illustrates the dynamic energy of a city at night, with bright lights cutting through the darkness.
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 illustrates the dynamic energy of a city at night, with bright lights cutting through the darkness. This high-contrast scheme features a brilliant #FFFF00 yellow, a deep #4B0082 indigo, a stark #000000 black, a cool #C0C0C0 silver, and a vibrant #00BFFF electric blue. It's a versatile palette for designs that require a modern, energetic, and slightly gritty urban aesthetic, making it excellent for tech, gaming, or contemporary branding.
primary
Designate #00BFFF as the primary color for interactive elements, main headings, or key graphical features to convey energy and modernity.
secondary
Employ #4B0082 for supporting sections, subheadings, or as a contrasting dark element to add depth and sophistication.
accent
Utilize #FFFF00 for high-impact accents, alerts, call-to-action buttons, or glowing details to draw immediate attention.
background
Apply #000000 as the main background to create a dramatic, infinite dark canvas, allowing the brighter colors to truly pop.
text
For body text on dark backgrounds, #C0C0C0 provides excellent readability. For prominent headlines, #FFFF00 or #00BFFF can be used for strong impact.
A dynamic trio for dark mode UI: #000000 background, #00BFFF for primary elements, and #FFFF00 for striking accents.
#000000 · #00BFFF · #FFFF00Use #4B0082 as a rich background, with #C0C0C0 for legible text and #00BFFF for a cool, electric highlight.
#4B0082 · #C0C0C0 · #00BFFFCreate depth with a #000000 background, #C0C0C0 for body text, and #4B0082 for subtle UI elements or secondary graphics.
#000000 · #C0C0C0 · #4B0082:root {
--electric-city-night-5-1: #FFFF00;
--electric-city-night-5-2: #4B0082;
--electric-city-night-5-3: #000000;
--electric-city-night-5-4: #C0C0C0;
--electric-city-night-5-5: #00BFFF;
}theme: {
extend: {
colors: {
"electric-city-night-5": {
1: "#FFFF00",
2: "#4B0082",
3: "#000000",
4: "#C0C0C0",
5: "#00BFFF",
}
}
}
}Palette colors
Accessibility
Similar palettes