Palette

Cyberpunk Neon Drive

Electrifying purples, cyans, and magentas against a dark canvas evoke 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 Neon Drive 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 Neon Drive.

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

Data visualization

#1A1A2E#4B0082#FF00FF#00FFFF#FFD700

Palette guide

How to use Cyberpunk Neon Drive

Overview

The Cyberpunk Neon Drive palette masterfully combines deep, atmospheric darks with electrifying neons, perfect for evoking a futuristic urban landscape. Its foundation includes a rich dark blue-purple (#1A1A2E) and a deep indigo (#4B0082), providing a stark canvas for vivid magenta (#FF00FF), brilliant cyan (#00FFFF), and glowing gold (#FFD700). This palette is excellent for designers and developers aiming to create high-impact visuals for gaming, digital interfaces, or compelling brand identities that exude a high-tech, energetic, and slightly dystopian vibe.

Best used for

Dark-themed websites and applications
Video game environments and character design
Sci-fi movie posters and promotional materials
Nightlife and entertainment branding
Interactive digital experiences
Dynamic data dashboards

Suggested color roles

primary

Use #FF00FF (Magenta) for primary calls to action or key interactive elements to stand out against darks.

secondary

#00FFFF (Cyan) can highlight secondary information or active states, offering cool luminescence.

accent

#FFD700 (Gold) is perfect for alerts, important notifications, or subtle glowing details.

background

#1A1A2E (Dark Blue-Purple) provides a deep, immersive background, setting a moody tone.

text

White or a very light grey (e.g., #EEEEEE) is crucial for body text readability against the dark backgrounds.

Accessibility notes

Ensure neon text colors like #FF00FF and #00FFFF have sufficient contrast against #1A1A2E or #4B0082.
Avoid using the vibrant colors for small text or critical information without adequate contrast.
Provide alternative text descriptions for color-coded information for visually impaired users.
Test color combinations for readability under varying lighting conditions.

Recommended combinations

Urban Night

Great for dark mode interfaces, setting a dramatic and vibrant scene.

#1A1A2E · #FF00FF · #00FFFF

Tech Pulse

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

#4B0082 · #FFD700 · #FF00FF

Data Stream

Effective for displaying data, charts, or graphical elements with a techy feel.

#1A1A2E · #00FFFF · #FFD700

CSS variables

:root {
  --cyberpunk-neon-drive-1: #1A1A2E;
  --cyberpunk-neon-drive-2: #4B0082;
  --cyberpunk-neon-drive-3: #FF00FF;
  --cyberpunk-neon-drive-4: #00FFFF;
  --cyberpunk-neon-drive-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-neon-drive": {
        1: "#1A1A2E",
        2: "#4B0082",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#4B0082

Color 3#FF00FF

Color 4#00FFFF

Color 5#FFD700

Accessibility

Contrast checker

1.3:1Fail

5.4:1AA

13.6:1AAA

12.2:1AAA

1.3:1Fail

4.1:1AA18

10.3:1AAA

9.2:1AAA

5.4:1AA

4.1:1AA18

2.5:1Fail

2.2:1Fail