Palette

City Lights Energy

A bold, electric palette mirroring the dynamic, pulsating energy of city lights at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Lights Energy reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with City Lights Energy.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#FF00FF#00FFFF#FFFF00#FF4500#1E90FF

Palette guide

How to use City Lights Energy

Overview

The City Lights Energy palette is a bold, electric collection mirroring the dynamic, pulsating energy of city lights at night. Featuring intense, almost neon hues like the vibrant magenta #FF00FF, the dazzling cyan #00FFFF, the bright yellow #FFFF00, the fiery orange #FF4500, and the striking blue #1E90FF, this palette is designed for maximum visual impact and excitement. It's an excellent choice for designers aiming to create energetic, futuristic, or nightlife-inspired aesthetics. This palette communicates high energy, modernity, and a strong sense of individuality, perfect for projects that demand to stand out and capture attention.

Best used for

Nightclub and event promotion
Gaming interfaces and streaming overlays
Cyberpunk-themed media and branding
Tech startup marketing with a futuristic edge
Music video graphics and album art
Interactive digital art installations

Suggested color roles

primary

Use #FF00FF as a powerful primary for calls-to-action or key focal points, demanding immediate attention and conveying high energy.

secondary

Employ #00FFFF or #1E90FF for secondary headers or graphical elements, adding a cool, electric contrast to the warmer primaries.

accent

Reserve #FFFF00 for vibrant accents, highlights, or interactive elements, ensuring they pop with an intense glow.

background

A deep black or very dark charcoal is recommended as a background to allow these intense, luminous colors to truly glow.

text

For text, a crisp white or a very light grey will provide the necessary contrast against these bright, saturated colors. Avoid using these bright colors for small body text.

Accessibility notes

Many combinations within this vibrant, high-lumen palette will have low contrast; careful testing is crucial for text readability.
Avoid placing similarly bright colors next to each other for text or critical information (e.g., #FFFF00 text on #00FFFF background).
Always use a dark background (e.g., black) with these colors for text to ensure sufficient contrast.
Prioritize high contrast for interactive elements and essential information, possibly using white text on the darkest options.

Recommended combinations

Neon Glow

Creates an electrifying, high-contrast visual, perfect for headlines, digital banners, or futuristic UI elements.

#FF00FF · #00FFFF · #FFFF00

Urban Pulse

Ideal for dynamic patterns, energetic illustrations, or elements that require a playful yet impactful color transition.

#FF4500 · #1E90FF · #FFFF00

Dark City

Provides a darker, intense look, suitable for backgrounds or elements needing to stand out against black, evoking night scenes.

#1E90FF · #FF00FF · #FF4500

CSS variables

:root {
  --city-lights-energy-1: #FF00FF;
  --city-lights-energy-2: #00FFFF;
  --city-lights-energy-3: #FFFF00;
  --city-lights-energy-4: #FF4500;
  --city-lights-energy-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-lights-energy": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#FF4500",
        5: "#1E90FF",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFFF00

Color 4#FF4500

Color 5#1E90FF

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

1.1:1Fail

1:1Fail

2.5:1Fail

1.2:1Fail

2.7:1Fail

2.6:1Fail

2.9:1Fail

1.2:1Fail

3.2:1AA18

3:1AA18

1.1:1Fail

2.7:1Fail

3.2:1AA18

1.1:1Fail

1:1Fail

2.6:1Fail

3:1AA18

1.1:1Fail

Similar palettes

More like City Lights Energy

City Lights Energy

See it in context.

Ready when you are.

Built with City Lights Energy.

How to use City Lights Energy

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Neon Glow

Urban Pulse

Dark City

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like City Lights Energy