Palette

Cybernetic Street Grid

High-contrast palette mimicking futuristic city lights against dark, wet streets, pulsating with energy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cybernetic Street Grid 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 Cybernetic Street Grid.

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

Data visualization

#1A1A1D#722F9C#00F0FF#CCFF00#4A4A4D

Palette guide

How to use Cybernetic Street Grid

Overview

The Cybernetic Street Grid palette offers a high-contrast blend of electric hues and dark urban grit, mimicking futuristic city lights against dark, wet streets. It features a profound near-black (#1A1A1D) and a deep charcoal (#4A4A4D) as its foundation, punctuated by a striking blue-violet (#722F9C), a brilliant electric cyan (#00F0FF), and a dazzling neon yellow-green (#CCFF00). This palette is designed for designers and developers seeking to create bold, energetic, and visually arresting experiences. Its unique combination of dark atmosphere and luminous accents is perfect for conveying innovation, urban dynamism, and a cutting-edge aesthetic that pulsates with energy.

Best used for

Sci-fi game environments and UI elements
Cyberpunk-themed event posters and promotions
Digital art and illustration with urban night scenes
Tech startup branding and digital campaigns
Motion graphics simulating street lights or data flow
Fashion lines with an edgy, futuristic, street-style vibe

Suggested color roles

primary

Use #00F0FF (Electric Cyan) for main interactive elements, key highlights, or branding that needs to convey precision and digital clarity.

secondary

Apply #CCFF00 (Neon Yellow-Green) for secondary calls-to-action, success indicators, or to add a vibrant, energetic pop.

accent

Reserve #722F9C (Blue-Violet) for subtle glows, background details, or to add depth to interactive states.

background

Utilize #1A1A1D (Near Black) as the foundational dark canvas, providing a stark contrast that makes the neon colors truly burst and glow.

text

Pair #00F0FF (Electric Cyan) or #CCFF00 (Neon Yellow-Green) for headings; use white for general body text on dark backgrounds.

Accessibility notes

Ensure high contrast for text; #00F0FF and #CCFF00 on #1A1A1D are generally good. Check #722F9C on #1A1A1D for smaller text.
Avoid using #722F9C and #4A4A4D in close proximity for critical information if color is the sole differentiator, due to their similar value.
Use #1A1A1D provides an excellent dark background for lighter, luminous text, ensuring good readability.
For critical information, always provide alternative visual cues (icons, underlines) in addition to color.

Recommended combinations

Street Glow

A dark background with electric cyan for main street lines and neon yellow-green for dynamic highlights or traffic flow.

#1A1A1D · #00F0FF · #CCFF00

Urban Pulse

Use for layered backgrounds, with charcoal as a base, blue-violet for subtle depth, and electric cyan for active elements.

#4A4A4D · #722F9C · #00F0FF

Tech Grid

Combine these vibrant hues for dynamic animations, loading indicators, or energetic transitions, representing network activity.

#722F9C · #00F0FF · #CCFF00

CSS variables

:root {
  --cybernetic-street-grid-1: #1A1A1D;
  --cybernetic-street-grid-2: #722F9C;
  --cybernetic-street-grid-3: #00F0FF;
  --cybernetic-street-grid-4: #CCFF00;
  --cybernetic-street-grid-5: #4A4A4D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cybernetic-street-grid": {
        1: "#1A1A1D",
        2: "#722F9C",
        3: "#00F0FF",
        4: "#CCFF00",
        5: "#4A4A4D",
      }
    }
  }
}

Hex values

Color 1#1A1A1D

Color 2#722F9C

Color 3#00F0FF

Color 4#CCFF00

Color 5#4A4A4D

Accessibility

Contrast checker

2.2:1Fail

12.3:1AAA

14.8:1AAA

2:1Fail

2.2:1Fail

5.7:1AA

6.9:1AA

1.1:1Fail

12.3:1AAA

5.7:1AA

1.2:1Fail

6.3:1AA

14.8:1AAA

6.9:1AA

1.2:1Fail

7.5:1AAA

2:1Fail

1.1:1Fail

6.3:1AA

7.5:1AAA

Similar palettes

More like Cybernetic Street Grid

View all vibrant

Neon Street Pulse

Cybernetic Glitch Flow

Cybernetic Pulse Beat

Cyberpunk Neon Blur

Cyberpunk Sunset

Future Metropolis Pulse