Palette

Neon City Drip

Intense, glowing colors capturing the electric pulse of a rain-slicked futuristic city at night.

VibrantEnergetic5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF3366#33CCFF#FFFF33#CC33FF#00FF99

Palette guide

How to use Neon City Drip

Overview

The Neon City Drip palette delivers an electrifying visual experience, perfect for projects demanding high energy and a futuristic edge. Dominated by intense, glowing hues like the vibrant pink #FF3366, electric blue #33CCFF, and luminous yellow #FFFF33, this collection evokes the dynamic pulse of a rain-slicked metropolis at night. Designers and developers can leverage its powerful contrast and saturation to create immersive, cyberpunk-inspired interfaces, bold branding, or captivating digital art. With its striking combination of #CC33FF (purple) and #00FF99 (green), the palette is built for impact, ensuring designs pop off the screen with an undeniable, energetic mood.

Best used for

Cyberpunk-themed UI/UX design
Gaming interfaces and streaming overlays
Music festival branding and event posters
Futuristic digital illustrations and concept art
Motion graphics and animated title sequences
High-energy product packaging

Suggested color roles

primary

Use #33CCFF as a dominant digital glow, ideal for primary calls-to-action, key interactive elements, or expansive background gradients that set a futuristic tone.

secondary

Employ #FF3366 to introduce energetic contrast and visual interest. Excellent for secondary buttons, interactive states, or graphic accents that need to pop.

accent

Reserve #FFFF33 for luminous highlights, small but crucial details, or warnings. Its high luminosity ensures it catches the eye immediately against darker tones.

background

Utilize #CC33FF as a deep, atmospheric background, especially in dark mode themes or for creating a sense of depth in digital environments. It provides a rich canvas for the brighter colors.

text

For optimal legibility against the vibrant palette, use pure white or a very light grey for body text. For headlines or impactful short text, consider #FFFF33 for maximum visibility.

Accessibility notes

Avoid placing bright colors like #FFFF33 directly on #00FF99 or #33CCFF without sufficient contrast; ensure text meets WCAG AA standards.
Always test text legibility on chosen backgrounds, particularly when using #CC33FF as a background with other vibrant palette colors.
Prioritize pure white or near-white for essential text elements to ensure readability across all vibrant backgrounds.
Be mindful of color-blind users; do not rely solely on color differences between #FF3366 and #CC33FF to convey information.

Recommended combinations

Cyberpunk Glow

Ideal for digital interfaces, animated intros, or dynamic web headers that require a high-tech, glowing aesthetic.

#33CCFF · #FFFF33 · #CC33FF

Electric Pulse

Perfect for event flyers, energetic branding elements, or social media graphics that demand immediate attention and a vibrant feel.

#FF3366 · #00FF99 · #33CCFF

Urban Night

Excellent for dark mode applications, futuristic illustrations, or dramatic visual compositions that evoke a moody, yet luminous city scene.

#CC33FF · #FF3366 · #FFFF33

CSS variables

:root {
  --neon-city-drip-1: #FF3366;
  --neon-city-drip-2: #33CCFF;
  --neon-city-drip-3: #FFFF33;
  --neon-city-drip-4: #CC33FF;
  --neon-city-drip-5: #00FF99;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-drip": {
        1: "#FF3366",
        2: "#33CCFF",
        3: "#FFFF33",
        4: "#CC33FF",
        5: "#00FF99",
      }
    }
  }
}

Hex values

Color 1#FF3366

Color 2#33CCFF

Color 3#FFFF33

Color 4#CC33FF

Color 5#00FF99

Accessibility

Contrast checker

1.9:1Fail

3.3:1AA18

1.1:1Fail

2.7:1Fail

1.9:1Fail

1.7:1Fail

2:1Fail

1.4:1Fail

3.3:1AA18

1.7:1Fail

3.6:1AA18

1.2:1Fail

1.1:1Fail

2:1Fail

3.6:1AA18

2.9:1Fail

2.7:1Fail

1.4:1Fail

1.2:1Fail

2.9:1Fail

Similar palettes

More like Neon City Drip

View all Vibrant

Cybernetic Chroma Burst

Electric Glitch Bloom