Back to palettes

Palette

Neon City Lights

An electrifying array of glowing hues, reminiscent of a bustling city at night under neon signs.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon City Lights 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 Neon City Lights.

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 Neon City Lights

Overview

The Neon City Lights palette is an electrifying array of glowing hues, reminiscent of a bustling city at night under vibrant neon signs. Featuring #FF00FF (magenta), #00FFFF (cyan), #FFFF00 (yellow), #FF4500 (orange-red), and #1E90FF (dodger blue), this scheme is pure energy. Designers and developers can leverage these highly saturated colors to create dynamic, eye-catching digital experiences, energetic branding, or captivating visual content that truly pops. It's an ideal choice for projects aiming for a futuristic, bright, and unmistakably urban pop aesthetic, ensuring high visibility and an engaging user experience.

Best used for

  • Event promotion and party flyers
  • Youth-oriented fashion and lifestyle branding
  • Dynamic website hero sections and banners
  • Digital art and abstract illustrations
  • Arcade game interfaces and retro themes
  • Social media campaigns requiring high visual impact

Suggested color roles

primary

Use #1E90FF (Dodger Blue) as a strong, cool base color for sections or larger UI elements, providing depth and a sense of stability.

secondary

Employ #00FFFF (Cyan) for complementary graphics, secondary navigation, or as a vibrant digital glow effect.

accent

Apply #FFFF00 (Yellow) for crucial call-to-action buttons, spotlight elements, or to create the highest level of visual urgency.

background

While not in the palette, a very dark gray or black is recommended to make these vibrant colors truly pop. Alternatively, use #1E90FF for a darker blue base.

text

For headlines, #FFFF00 offers excellent visibility. For body text, white or a light gray is recommended on a dark background for readability.

Accessibility notes

  • Ensure all vibrant colors are used on a sufficiently dark background (e.g., black or dark gray) to meet WCAG AA contrast standards.
  • Avoid using #FF4500 (Orange-Red) for small text, as its luminosity can make it challenging to read on many backgrounds.
  • Be cautious when placing #FF00FF and #FF4500 directly adjacent for critical information due to potential contrast issues for some users.
  • For body text, use a neutral light color like white or near-white against a dark background for optimal legibility.

Recommended combinations

Urban Glow Interface

Ideal for dynamic interface elements, header sections, and data visualization in a bright, energetic design.

#1E90FF · #00FFFF · #FFFF00

Fiery Accent

Perfect for high-impact call-to-action buttons, urgent notifications, and vibrant graphic highlights.

#FF4500 · #FFFF00 · #FF00FF

Electric Trio

Excellent for futuristic branding, striking visuals, or hero images that need to convey energy and modernity.

#FF00FF · #00FFFF · #1E90FF

CSS variables

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

Tailwind config

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

Related searches

bright city lights palettevibrant pop colorselectric urban schemefuturistic neon designenergetic color combinations

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#FFFF00
·
Color 4#FF4500
·
Color 5#1E90FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.9:1Fail
1.1:1Fail
1:1Fail
2
2.5:1Fail
1.2:1Fail
2.7:1Fail
2.6:1Fail
3
2.9:1Fail
1.2:1Fail
3.2:1AA18
3:1AA18
4
1.1:1Fail
2.7:1Fail
3.2:1AA18
1.1:1Fail
5
1:1Fail
2.6:1Fail
3:1AA18
1.1:1Fail

Similar palettes

More like Neon City Lights

View all vibrant
Neon City Circuit
City Canvas Pop
Cybernetic City Grid
Cybernetic Street Grid
Electric Bloom Pop
Electric City Pop