Palette

Neon City Pulse

Bold, contrasting lights against a dark backdrop, capturing the pulsing energy of a cyberpunk city.

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

#000000#36454F#00BFFF#00FF7F#FFD700

Palette guide

How to use Neon City Pulse

Overview

The Neon City Pulse palette features bold, contrasting lights against a dark backdrop, perfectly capturing the pulsing energy of a cyberpunk city. With #000000 (black) and #36454F (charcoal gray) providing a deep, atmospheric base, this palette ignites with #00BFFF (deep sky blue), #00FF7F (spring green), and #FFD700 (gold). Designers and developers can leverage these vibrant contrasts to create immersive tech interfaces, dynamic gaming themes, or striking dark mode applications. It's an excellent choice for projects demanding a modern, energetic, and visually compelling aesthetic with a clear sense of depth and glow.

Best used for

Cyberpunk game UI and character design
Dark mode web and mobile applications
Tech startup branding and digital marketing
Sci-fi themed digital art and illustrations
Interactive data visualization with a dark theme
E-sports broadcast overlays and team branding

Suggested color roles

primary

Use #000000 (Black) as the core background, providing a deep, stable foundation that allows all other colors to intensely glow.

secondary

Employ #36454F (Charcoal Gray) for secondary backgrounds, subtle divisions, or as a softer dark alternative for depth.

accent

Apply #FFD700 (Gold) for crucial call-to-action buttons, important alerts, or to signify premium features with a rich glow.

background

Utilize #000000 (Black) or #36454F (Charcoal Gray) for backgrounds, depending on the desired level of depth and contrast for your content.

text

For headlines, #00BFFF (Deep Sky Blue) or #FFD700 offer excellent visibility. For body text, white or light gray ensures readability on dark backgrounds.

Accessibility notes

Ensure all bright neon colors have strong contrast against #000000 and #36454F, which they generally do, meeting WCAG AA standards.
Be mindful that #00BFFF and #00FF7F might be challenging for some colorblind users when placed side-by-side; use distinct sizes or weights.
For long-form content, use a neutral light color (e.g., white or light gray) for body text on the dark backgrounds.
Avoid using #FFD700 for small text on a light background (if ever introduced) as it might lack sufficient contrast.

Recommended combinations

Dark Core Interface

Ideal for main UI layouts, background elements, and primary interactive components in a dark theme.

#000000 · #36454F · #00BFFF

Cyber Glow Accents

Perfect for vibrant graphic elements, data visualization, and dynamic progress indicators.

#00BFFF · #00FF7F · #FFD700

Highlighted Pulse

Excellent for urgent call-to-action buttons, important notifications, and spotlighting key information.

#FFD700 · #36454F · #000000

CSS variables

:root {
  --neon-city-pulse-2-1: #000000;
  --neon-city-pulse-2-2: #36454F;
  --neon-city-pulse-2-3: #00BFFF;
  --neon-city-pulse-2-4: #00FF7F;
  --neon-city-pulse-2-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-pulse-2": {
        1: "#000000",
        2: "#36454F",
        3: "#00BFFF",
        4: "#00FF7F",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#36454F

Color 3#00BFFF

Color 4#00FF7F

Color 5#FFD700

Accessibility

Contrast checker

2.1:1Fail

9.9:1AAA

15.6:1AAA

15:1AAA

2.1:1Fail

4.7:1AA

7.4:1AAA

7.1:1AAA

9.9:1AAA

4.7:1AA

1.6:1Fail

1.5:1Fail

15.6:1AAA

7.4:1AAA

1.6:1Fail

1:1Fail

15:1AAA

7.1:1AAA

1.5:1Fail

1:1Fail

Similar palettes

More like Neon City Pulse

View all vibrant

Pixel Game Neon

Carnival Kaleidoscope