Palette

Electric Night Circuit

A bold and glowing palette reflecting the dynamic energy and stark contrasts of a cybernetic night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Electric Night Circuit 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 Electric Night Circuit.

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

Data visualization

#000000#4B0082#8A2BE2#FF00FF#00FFFF

Palette guide

How to use Electric Night Circuit

Overview

The Electric Night Circuit palette is a bold and glowing collection reflecting the dynamic energy and stark contrasts of a cybernetic night. Featuring pure #000000 (Black) as its foundation, it's electrified by the deep #4B0082 (Indigo), rich #8A2BE2 (Blue Violet), vibrant #FF00FF (Magenta), and luminous #00FFFF (Cyan). This palette is perfect for designs that evoke techno, synthwave, or futuristic themes, demanding immediate visual impact. Designers can leverage these hues for stark contrasts, glowing UI elements, or dynamic typography. Developers will find it excellent for creating immersive user experiences in applications, websites, or games that require a distinctly modern and energetic visual identity, especially for dark mode interfaces.

Best used for

Techno music event branding
Cyberpunk game interfaces
Sci-fi movie titles
Dark mode UI designs
Synthwave album art
Digital art with electric glow

Suggested color roles

primary

#000000 (Black) - Provides a strong, grounding background, allowing the vibrant neon colors to truly pop and command attention, mimicking a night circuit board.

secondary

#4B0082 (Indigo) - Offers a deep, sophisticated tone, suitable for secondary backgrounds, large UI sections, or subtle gradients, adding depth and mystery.

accent

#FF00FF (Magenta) - A powerful, energetic accent for calls-to-action, alerts, or details that demand immediate attention and a futuristic flair.

background

#000000 (Black) - The optimal choice for a dark, urban backdrop that makes the neon accents glow intensely, creating a cybernetic night scene.

text

#00FFFF (Cyan) - Effective for striking headlines or short bursts of information against dark backgrounds. For body text on #000000, white or a very light gray is recommended for readability.

Accessibility notes

Ensure high contrast when pairing #FF00FF or #00FFFF with #000000 or #4B0082 for text, checking WCAG guidelines.
Avoid using #8A2BE2 for small text on dark backgrounds without sufficient contrast testing.
The intense nature of #FF00FF and #00FFFF can cause eye strain; use sparingly for large blocks of text.
Prioritize white or very light text on #000000 or #4B0082 for optimal readability for body content.

Recommended combinations

Circuit Board

Creates a classic techno aesthetic, ideal for bold headlines, logos, or striking visual accents against a dark backdrop, mimicking digital circuits.

#000000 · #00FFFF · #FF00FF

Synth Glow

Perfect for vibrant UI elements or energetic graphics, offering a dynamic contrast that captures attention in a digital interface, evoking synthwave vibes.

#4B0082 · #8A2BE2 · #00FFFF

Night Pulse

A high-energy combination for artistic projects, event promotions, or digital art, delivering maximum visual impact and futuristic flair.

#FF00FF · #000000 · #8A2BE2

CSS variables

:root {
  --electric-night-circuit-1: #000000;
  --electric-night-circuit-2: #4B0082;
  --electric-night-circuit-3: #8A2BE2;
  --electric-night-circuit-4: #FF00FF;
  --electric-night-circuit-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-night-circuit": {
        1: "#000000",
        2: "#4B0082",
        3: "#8A2BE2",
        4: "#FF00FF",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#4B0082

Color 3#8A2BE2

Color 4#FF00FF

Color 5#00FFFF

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

6.7:1AA

16.7:1AAA

1.6:1Fail

2.2:1Fail

4.1:1AA18

10.3:1AAA

3.5:1AA18

2.2:1Fail

1.9:1Fail

4.8:1AA

6.7:1AA

4.1:1AA18

1.9:1Fail

2.5:1Fail

16.7:1AAA

10.3:1AAA

4.8:1AA

2.5:1Fail

Similar palettes

More like Electric Night Circuit

View all vibrant

AI Data Stream

Cyber Neon Glitch

Cybernetic Voltage Surge

Cyberpunk Pulse Wave

Neon Alley Surge

Neon Grid Overload