Back to palettes

Palette

Neon City Circuit

A high-energy blend of electric hues, reminiscent of a bustling futuristic city's glow.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF33FF#00FFFF#FFCC00#33FF33#6600FF

Palette guide

How to use Neon City Circuit

Overview

The Neon City Circuit palette is a high-octane collection designed to electrify digital experiences. Featuring a dazzling magenta (#FF33FF), vibrant cyan (#00FFFF), energetic orange-yellow (#FFCC00), electric lime green (#33FF33), and deep electric purple (#6600FF), this palette evokes the pulsating glow of a futuristic urban landscape. It's perfect for projects demanding a bold, dynamic, and modern aesthetic. Designers and developers can leverage these hues to create immersive UI/UX, compelling branding, or striking visual content that truly stands out. Its vibrant nature makes it ideal for capturing attention and conveying innovation.

Best used for

  • Gaming interfaces and branding
  • Tech event promotions and marketing
  • Cyberpunk-themed UI/UX designs
  • Music festival visuals and branding
  • Youth-oriented fashion or streetwear branding
  • Digital art and motion graphics

Suggested color roles

primary

Utilize #00FFFF (Cyan) as a foundational vibrant element, perfect for navigation bars, prominent headings, or large interactive areas, establishing a cool, digital anchor.

secondary

Deploy #FF33FF (Magenta) to create strong visual interest and contrast against the cyan, ideal for secondary buttons, key illustrations, or energetic graphic elements.

accent

Reserve #FFCC00 (Orange-Yellow) for critical calls to action, notifications, or small, high-impact details, ensuring maximum visibility and urgency.

background

Best used in conjunction with a very dark or black background (e.g., #000000), where #6600FF (Electric Purple) can define large sections, gradients, or atmospheric overlays, providing depth without overwhelming.

text

For optimal readability, use white or a very light gray (e.g., #F0F0F0) for primary text on these vibrant colors, or apply the palette's brighter hues as text on a dark neutral background.

Accessibility notes

  • Ensure high contrast ratios for text and interactive elements, especially when pairing bright colors like #FFCC00 on #33FF33.
  • Avoid using similar luminance values for foreground and background colors to prevent legibility issues for all users.
  • Test all primary text and background color combinations against WCAG 2.1 AA or AAA guidelines for readability.
  • Consider alternative indicators to color alone for conveying important information, particularly for users with color vision deficiencies.

Recommended combinations

Cyberpunk Grid

Create dynamic UI frameworks or striking header sections, blending cool and warm electric tones for a futuristic vibe.

#00FFFF · #FF33FF · #6600FF

Action Glow

Highlight interactive elements, buttons, or critical alerts with high-visibility, energetic pairings that demand attention.

#FFCC00 · #33FF33 · #00FFFF

Vaporwave Haze

Develop atmospheric backgrounds, gradients, or layered graphic effects with a dreamy, electric feel reminiscent of synthwave aesthetics.

#FF33FF · #6600FF · #33FF33

CSS variables

:root {
  --neon-city-circuit-1: #FF33FF;
  --neon-city-circuit-2: #00FFFF;
  --neon-city-circuit-3: #FFCC00;
  --neon-city-circuit-4: #33FF33;
  --neon-city-circuit-5: #6600FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-circuit": {
        1: "#FF33FF",
        2: "#00FFFF",
        3: "#FFCC00",
        4: "#33FF33",
        5: "#6600FF",
      }
    }
  }
}

Related searches

cyberpunk color schemeneon UI colorsfuturistic palettevibrant tech colorsbright digital design

Palette colors

Hex values

Color 1#FF33FF
·
Color 2#00FFFF
·
Color 3#FFCC00
·
Color 4#33FF33
·
Color 5#6600FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
1.9:1Fail
2.2:1Fail
2.4:1Fail
2
2.3:1Fail
1.2:1Fail
1.1:1Fail
5.6:1AA
3
1.9:1Fail
1.2:1Fail
1.1:1Fail
4.6:1AA
4
2.2:1Fail
1.1:1Fail
1.1:1Fail
5.1:1AA
5
2.4:1Fail
5.6:1AA
4.6:1AA
5.1:1AA

Similar palettes

More like Neon City Circuit

View all vibrant
Neon Arcade Nights
Neon Arcade Nights
Neon City Lights
Neon City Pulse
Neon Street Pulse
Cyber City Synth