Palette

Neon City Pulse

Blinding electric colors against a dark urban backdrop, capturing the energetic rush of city lights.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF006E#00F8FF#B8FF00#1C1C1C#6A00FF

Palette guide

How to use Neon City Pulse

Overview

The Neon City Pulse palette features blinding electric colors against a dark urban backdrop, capturing the energetic rush of city lights. With a deep #1C1C1C (very dark gray) as its foundation, this palette ignites with #FF006E (bright pink), #00F8FF (electric cyan), #B8FF00 (bright lime green), and #6A00FF (vivid purple). Designers and developers can leverage these intense hues to create modern app UIs, captivating cyberpunk art, or high-energy event branding. It's an excellent choice for projects that demand a bold, energetic, and visually striking aesthetic, ensuring a strong presence and an immersive user experience.

Best used for

Modern app UI design and dashboards
Cyberpunk art and digital illustrations
Gaming themes and e-sports branding
High-energy event branding and promotions
Fashion and lifestyle brands with an urban edge
Interactive experiences and virtual reality interfaces

Suggested color roles

primary

Use #1C1C1C (Very Dark Gray) as the deep, neutral background, providing a solid anchor that makes the neon colors intensely vibrant.

secondary

Employ #6A00FF (Vivid Purple) for secondary navigation, subtle glow effects, or to add a touch of mysterious elegance.

accent

Apply #B8FF00 (Bright Lime Green) for crucial call-to-action buttons, key highlights, or to signify growth and innovation.

background

Utilize #1C1C1C (Very Dark Gray) as the primary background color to maximize contrast and create an immersive, dark aesthetic.

text

For headlines, #00F8FF (Electric Cyan) or #B8FF00 offer excellent visibility. For body text, white or a light gray ensures readability on dark backgrounds.

Accessibility notes

All bright colors offer excellent contrast against #1C1C1C, generally meeting WCAG AA standards for text and UI elements.
Be cautious when using #FF006E and #6A00FF together for interactive elements, as their distinction might be difficult for some users.
For long-form content, use a highly legible neutral light color (e.g., white) for body text on the dark background.
Avoid using pure neon colors for small body text; reserve them for larger headings, accents, or interactive elements.

Recommended combinations

Dark Electric Interface

Ideal for main UI layouts, dark theme elements, and primary interactive components with a strong neon pop.

#1C1C1C · #00F8FF · #FF006E

Cyber Glow Dynamic

Perfect for dynamic graphic elements, progress bars, and data visualization that needs to stand out.

#B8FF00 · #6A00FF · #1C1C1C

Energetic Highlight

Excellent for vibrant headers, call-to-action buttons, and hero sections that demand immediate attention and energy.

#FF006E · #00F8FF · #B8FF00

CSS variables

:root {
  --neon-city-pulse-3-1: #FF006E;
  --neon-city-pulse-3-2: #00F8FF;
  --neon-city-pulse-3-3: #B8FF00;
  --neon-city-pulse-3-4: #1C1C1C;
  --neon-city-pulse-3-5: #6A00FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-pulse-3": {
        1: "#FF006E",
        2: "#00F8FF",
        3: "#B8FF00",
        4: "#1C1C1C",
        5: "#6A00FF",
      }
    }
  }
}

Hex values

Color 1#FF006E

Color 2#00F8FF

Color 3#B8FF00

Color 4#1C1C1C

Color 5#6A00FF

Accessibility

Contrast checker

2.9:1Fail

3.2:1AA18

4.4:1AA18

1.8:1Fail

2.9:1Fail

1.1:1Fail

12.9:1AAA

5.2:1AA

3.2:1AA18

1.1:1Fail

14.1:1AAA

5.7:1AA

4.4:1AA18

12.9:1AAA

14.1:1AAA

2.5:1Fail

1.8:1Fail

5.2:1AA

5.7:1AA

2.5:1Fail

Similar palettes

More like Neon City Pulse