Palette
Pulse with the energetic glow of urban nights, a vibrant symphony of electric purples and magentas.
Preview
Interface
A quick look at how Electric City Rhythm 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 Rhythm' palette pulses with the energetic glow of urban nights, a vibrant symphony of electric purples and magentas. Ranging from the deep #000033 to the brilliant #CC00FF, with intermediary shades like #330066, #660099, and #9900CC, it creates a dynamic, layered effect. This scheme is perfect for designs that need depth and an intense, modern feel, ideal for nightlife, tech, or futuristic branding that evokes a powerful, rhythmic energy.
primary
Utilize #9900CC as the dominant vibrant purple for main calls-to-action, primary interactive elements, or focal points that convey energy.
secondary
Employ #660099 for supporting backgrounds, subheadings, or to create a subtle depth within the purple spectrum, complementing the primary hue.
accent
Apply #CC00FF sparingly for high-energy highlights, glowing effects, notifications, or key information that needs to pop dramatically.
background
Use #000033 as the primary background color to establish a deep, atmospheric canvas, enhancing the luminosity of the brighter purples.
text
For body text on dark backgrounds, use white or a very light grey. For impactful headings or alerts, #CC00FF will provide excellent contrast and visibility.
Ideal for a dark UI: #000033 as background, #9900CC for primary content, and #CC00FF for urgent notifications or interactive elements.
#000033 · #9900CC · #CC00FFCreate a smooth, sophisticated purple gradient for backgrounds or large graphical elements, adding depth and visual interest.
#330066 · #660099 · #9900CCUse #000033 as a base, #660099 for subtle elements, and #CC00FF for striking, eye-catching accents in digital art or event graphics.
#000033 · #660099 · #CC00FF:root {
--electric-city-rhythm-1: #000033;
--electric-city-rhythm-2: #330066;
--electric-city-rhythm-3: #660099;
--electric-city-rhythm-4: #9900CC;
--electric-city-rhythm-5: #CC00FF;
}theme: {
extend: {
colors: {
"electric-city-rhythm": {
1: "#000033",
2: "#330066",
3: "#660099",
4: "#9900CC",
5: "#CC00FF",
}
}
}
}Palette colors
Accessibility
Similar palettes