Palette

Cyberpunk Street Haze

Electric purples and blues cut through a dark urban backdrop, evoking a futuristic cityscape.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0D0C1D#2C1F50#6A0DAD#FF0099#00FFFF

Palette guide

How to use Cyberpunk Street Haze

Overview

The Cyberpunk Street Haze palette delves into the atmospheric depths of a futuristic city night, blending dark, mysterious tones with piercing neon accents. Starting with a deep, almost black blue (#0D0C1D) and a rich dark purple (#2C1F50), it introduces a vibrant electric purple (#6A0DAD), a striking hot pink (#FF0099), and a brilliant cyan (#00FFFF). This palette is perfect for designers and developers aiming to create moody yet electrifying interfaces, immersive game worlds, or evocative branding that captures a sophisticated, high-tech, and slightly gritty urban aesthetic.

Best used for

Atmospheric dark mode applications
Sci-fi gaming environments
Mystery or thriller genre media
Futuristic fashion editorials
Interactive art installations
Digital product branding with an edge

Suggested color roles

primary

#FF0099 (Hot Pink) for key calls to action or focal points, providing a stark, energetic contrast.

secondary

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

accent

#6A0DAD (Electric Purple) for subtle glowing effects, dividers, or accentuating specific features.

background

#0D0C1D (Deep Blue-Black) serves as the primary dark backdrop, enhancing the neon's intensity.

text

White (#FFFFFF) or a very light grey is recommended for body text to ensure readability against dark backgrounds.

Accessibility notes

Ensure sufficient contrast for text, especially when using #FF0099 or #00FFFF on dark backgrounds like #0D0C1D.
Avoid using color alone to convey crucial information; pair with icons or patterns.
Be mindful of potential color perception issues for colorblind users, particularly with the purples and pink.
Test readability of text against gradient backgrounds if applied, ensuring consistent contrast.

Recommended combinations

Night Shift

Ideal for dark-themed interfaces, creating a moody yet vibrant atmosphere.

#0D0C1D · #FF0099 · #00FFFF

Tech Haze

Excellent for background elements, data visualizations, or subtle glowing UI components.

#2C1F50 · #6A0DAD · #FF0099

Digital Glow

Perfect for interactive elements, hover states, or animated effects that need to pop.

#00FFFF · #6A0DAD · #FF0099

CSS variables

:root {
  --cyberpunk-street-haze-1: #0D0C1D;
  --cyberpunk-street-haze-2: #2C1F50;
  --cyberpunk-street-haze-3: #6A0DAD;
  --cyberpunk-street-haze-4: #FF0099;
  --cyberpunk-street-haze-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-street-haze": {
        1: "#0D0C1D",
        2: "#2C1F50",
        3: "#6A0DAD",
        4: "#FF0099",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#0D0C1D

Color 2#2C1F50

Color 3#6A0DAD

Color 4#FF0099

Color 5#00FFFF

Accessibility

Contrast checker

1.3:1Fail

2.1:1Fail

5.3:1AA

15.4:1AAA

1.3:1Fail

1.6:1Fail

4:1AA18

11.8:1AAA

2.1:1Fail

1.6:1Fail

2.5:1Fail

7.4:1AAA

5.3:1AA

4:1AA18

2.5:1Fail

2.9:1Fail

15.4:1AAA

11.8:1AAA

7.4:1AAA

2.9:1Fail

Similar palettes

More like Cyberpunk Street Haze

View all vibrant

Cyberpunk City Glow

Cybernetic Urban Glow

Cyberpunk City Lights

Neon Alley Pulse

Neon Alley Thrill

Neon Skyline