Palette
Dark, inky blues and electric teals illuminate, capturing the vivid, dynamic glow of a bustling metropolis at night.
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 uses dark, inky blues and electric teals to illuminate, capturing the vivid, dynamic glow of a bustling metropolis at night. With a deep #0F0F0F base, it features a subtle #1C2B2D, a striking #2A9D8F teal, and warm, inviting accents of #E9C46A yellow and #F4A261 orange. This sophisticated yet vibrant scheme is ideal for designs that blend modern urban aesthetics with a touch of technological glow, perfect for tech, luxury, or artistic projects.
primary
Utilize #2A9D8F as the dominant electric teal for main calls-to-action, primary interactive elements, or focal points to convey modernity.
secondary
Employ #E9C46A for supporting elements, subheadings, or to add a warm, inviting glow that contrasts beautifully with the cooler tones.
accent
Apply #F4A261 sparingly for high-energy highlights, notifications, or small details that need to pop with a warm, energetic intensity.
background
Use #0F0F0F as the primary background color to create a deep, atmospheric canvas, enhancing the luminosity of the brighter colors.
text
For body text on dark backgrounds, use white or a very light grey. For impactful headings or alerts, #E9C46A or #F4A261 will provide excellent contrast.
Ideal for dark mode UI: #0F0F0F as background, #2A9D8F for primary content, and #E9C46A for warm, inviting highlights.
#0F0F0F · #2A9D8F · #E9C46ACombine #1C2B2D for a rich, dark background, with #F4A261 and #2A9D8F providing vibrant, complementary accents in branding.
#1C2B2D · #F4A261 · #2A9D8FCreate depth with the dark blues, using #E9C46A as a luminous element for text or graphical details against the deep background.
#0F0F0F · #1C2B2D · #E9C46A:root {
--electric-city-nights-1: #0F0F0F;
--electric-city-nights-2: #1C2B2D;
--electric-city-nights-3: #2A9D8F;
--electric-city-nights-4: #E9C46A;
--electric-city-nights-5: #F4A261;
}theme: {
extend: {
colors: {
"electric-city-nights": {
1: "#0F0F0F",
2: "#1C2B2D",
3: "#2A9D8F",
4: "#E9C46A",
5: "#F4A261",
}
}
}
}Palette colors
Accessibility
Similar palettes