Back to palettes

Palette

Cyberpunk Street Beat

A bold and electric mix of neon colors, pulsating with the raw energy of a future city street.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyberpunk Street Beat 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 Cyberpunk Street Beat.

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

Data visualization

#000000#FF00FF#00FFFF#32CD32#FFD700

Palette guide

How to use Cyberpunk Street Beat

Overview

The Cyberpunk Street Beat palette delivers a powerful, high-contrast visual experience, perfectly capturing the raw, energetic pulse of a futuristic urban environment. Anchored by solid black (#000000), it explodes with vibrant neon accents: electric magenta (#FF00FF), brilliant cyan (#00FFFF), vivid lime green (#32CD32), and glowing gold (#FFD700). This palette is an excellent choice for designers and developers building dynamic user interfaces, engaging game assets, or bold branding that demands attention and evokes a cutting-edge, street-smart aesthetic.

Best used for

  • Urban-themed game interfaces
  • Event posters for electronic music
  • Fashion and streetwear branding
  • Interactive kiosks and digital signage
  • Motion graphics for title sequences
  • Creative app splash screens

Suggested color roles

primary

#FF00FF (Magenta) for primary calls to action or key headings, providing an undeniable pop.

secondary

#00FFFF (Cyan) can highlight secondary navigation or interactive elements, offering a cool, digital contrast.

accent

#FFD700 (Gold) is excellent for urgent notifications, warnings, or small, impactful details.

background

#000000 (Pure Black) serves as the foundational backdrop, making the neon colors radiate intensely.

text

Use white (#FFFFFF) for body text to ensure optimal legibility, reserving the vibrant palette colors for larger display text or highlights.

Accessibility notes

  • Ensure high contrast for any text using neon colors like #32CD32 against the black background.
  • Avoid using color as the sole indicator for interactive states or important information.
  • Test combinations of #FF00FF and #00FFFF for distinguishability by colorblind users.
  • Prioritize clear, legible typography, especially when using such saturated colors.

Recommended combinations

Night Glow

Ideal for creating dark mode interfaces with striking, luminous elements.

#000000 · #FF00FF · #00FFFF

Street Pulse

Excellent for progress bars, loading animations, or energetic status indicators.

#32CD32 · #FFD700 · #FF00FF

Urban Flux

Use for layered graphical elements, data visualizations, or abstract background patterns.

#00FFFF · #FFD700 · #32CD32

CSS variables

:root {
  --cyberpunk-street-beat-1: #000000;
  --cyberpunk-street-beat-2: #FF00FF;
  --cyberpunk-street-beat-3: #00FFFF;
  --cyberpunk-street-beat-4: #32CD32;
  --cyberpunk-street-beat-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-street-beat": {
        1: "#000000",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#32CD32",
        5: "#FFD700",
      }
    }
  }
}

Related searches

neon black color schemecyberpunk urban palettevibrant street art colorsfuturistic game uielectric green pink blue

Palette colors

Hex values

Color 1#000000
·
Color 2#FF00FF
·
Color 3#00FFFF
·
Color 4#32CD32
·
Color 5#FFD700
·

Accessibility

Contrast checker

1
2
3
4
5
1
6.7:1AA
16.7:1AAA
9.9:1AAA
15:1AAA
2
6.7:1AA
2.5:1Fail
1.5:1Fail
2.2:1Fail
3
16.7:1AAA
2.5:1Fail
1.7:1Fail
1.1:1Fail
4
9.9:1AAA
1.5:1Fail
1.7:1Fail
1.5:1Fail
5
15:1AAA
2.2:1Fail
1.1:1Fail
1.5:1Fail

Similar palettes

More like Cyberpunk Street Beat

View all vibrant
Cyberpunk City Pulse
Digital Pixel Bloom
Electric City Vibe
Electric Night Cityscape
Neon Alley Glaze
Neon Alley Glitch