Palette

Cyberpunk Circuitry

Bold and electric, combining stark black with vibrant cybernetic hues for a high-energy, digital aesthetic.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#00FFEE#FF00FF#FFC700#333333

Palette guide

How to use Cyberpunk Circuitry

Overview

The "Cyberpunk Circuitry" palette is bold and electric, combining stark #0A0A0A (near-black) with vibrant cybernetic hues for a high-energy, digital aesthetic. This collection features electrifying #00FFEE (electric cyan), #FF00FF (magenta), and #FFC700 (amber), grounded by a slightly softer #333333 (charcoal). It's an ideal choice for designers aiming to evoke a sense of advanced technology, digital interfaces, and a futuristic mood. Developers will find these colors highly effective for creating distinct UI elements, urgent notifications, and captivating visual effects in games or applications. The strong contrast ensures that key elements pop, making this palette perfect for interfaces that demand attention and a compelling, immersive user experience.

Best used for

Sci-fi game HUDs and UI elements
Futuristic web and app design
Digital art and graphic novels
Event branding for tech or gaming conventions
Motion graphics and visual effects
High-energy marketing campaigns

Suggested color roles

primary

Utilize #00FFEE (Electric Cyan) for main interactive elements, primary branding, or prominent headings.

secondary

Apply #FF00FF (Magenta) for secondary calls to action, important notifications, or vibrant accents that demand attention.

accent

Employ #FFC700 (Amber) for energetic highlights, warning indicators, or elements needing a sharp, warm pop.

background

Use #0A0A0A (Near-Black) as the dominant background, providing a deep, shadowy canvas for the neon lights.

text

For general legibility on dark backgrounds, use #333333 (Charcoal) for subtle text or white (#FFFFFF) for headings and key information.

Accessibility notes

Ensure very high contrast between neon colors and #0A0A0A background for all text and interactive elements.
Avoid using #FFC700 or #00FFEE directly for small body text; they are best reserved for larger headings or accents.
Test color combinations for color blindness, especially with #FFC700 (amber) and #00FFEE (electric cyan).
The dark background helps visual comfort, but strategic use of bright neons is key to prevent visual fatigue.

Recommended combinations

Digital Core

Excellent for creating high-contrast UI elements, glowing text, or dramatic background effects in a tech interface.

#00FFEE · #FF00FF · #0A0A0A

Amber Flux

Ideal for energetic data visualizations, progress bars, or highlighting key information in a tech interface.

#FFC700 · #00FFEE · #333333

Circuit Weave

Perfect for abstract backgrounds, dramatic lighting effects, or atmospheric elements in digital art.

#FF00FF · #FFC700 · #0A0A0A

CSS variables

:root {
  --cyberpunk-circuitry-1: #0A0A0A;
  --cyberpunk-circuitry-2: #00FFEE;
  --cyberpunk-circuitry-3: #FF00FF;
  --cyberpunk-circuitry-4: #FFC700;
  --cyberpunk-circuitry-5: #333333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-circuitry": {
        1: "#0A0A0A",
        2: "#00FFEE",
        3: "#FF00FF",
        4: "#FFC700",
        5: "#333333",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#00FFEE

Color 3#FF00FF

Color 4#FFC700

Color 5#333333

Accessibility

Contrast checker

15.6:1AAA

6.3:1AA

12.7:1AAA

1.6:1Fail

15.6:1AAA

2.5:1Fail

1.2:1Fail

10:1AAA

6.3:1AA

2.5:1Fail

2:1Fail

4:1AA18

12.7:1AAA

1.2:1Fail

2:1Fail

8.1:1AAA

1.6:1Fail

10:1AAA

4:1AA18

8.1:1AAA

Similar palettes

More like Cyberpunk Circuitry

Cyberpunk Alley Night

Digital Glitch Pulse

Electric Circuit Pop