Palette

Electric Circuit Board

The glowing, intricate pathways of modern technology, full of electric energy and sharp contrasts.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#00FF00#0000FF#FF8C00#FFFFFF

Palette guide

How to use Electric Circuit Board

Overview

The "Electric Circuit Board" palette captures the glowing, intricate pathways of modern technology, full of electric energy and sharp contrasts. It features a stark Black (#000000) and pure White (#FFFFFF), providing ultimate contrast. The vibrant core includes a bright Green (#00FF00), a strong Blue (#0000FF), and a bold Dark Orange (#FF8C00), mimicking illuminated circuit traces. This palette is perfect for designers creating tech-focused, cyber, or energetic digital experiences. Developers will find these colors excellent for crafting clean, high-contrast UIs that convey precision, innovation, and a dynamic, cutting-edge aesthetic.

Best used for

Tech company branding or websites
Software UI/UX design, especially for dashboards
Gaming hardware or e-sports platforms
Cybersecurity firm identity
Digital art or generative design
Science and technology educational content

Suggested color roles

primary

#000000 (Black) - The dominant background color, providing a sleek, modern canvas for the vibrant circuit elements.

secondary

#FFFFFF (White) - Ideal for main body text, clean backgrounds, or to provide strong visual breaks.

accent

#FF8C00 (Dark Orange) - Perfect for urgent alerts, interactive states, or small icons that require high visibility and a warm glow.

background

#000000 (Black) - Creates a dramatic, dark environment, making the glowing greens, blues, and orange elements pop intensely.

text

#FFFFFF (White) - Offers optimal readability on the black background. For lighter backgrounds, #000000 or a very dark gray is recommended.

Accessibility notes

Ensure #FFFFFF text on #000000 background meets WCAG AAA contrast standards.
Avoid using highly saturated colors like #00FF00 or #0000FF for large blocks of body text to prevent eye strain.
Use #00FF00 or #0000FF for interactive elements, ensuring clear focus indicators.
When using colored text on black, ensure the font weight is sufficient for readability.

Recommended combinations

Digital Core

Black background with white text and green highlights, perfect for tech interfaces.

#000000 · #FFFFFF · #00FF00

Circuit Trace

Blue and orange elements against black, ideal for data points or status indicators.

#0000FF · #FF8C00 · #000000

System Alert

White background with blue text and an orange alert, suitable for clean interfaces with warnings.

#FFFFFF · #0000FF · #FF8C00

CSS variables

:root {
  --electric-circuit-board-1: #000000;
  --electric-circuit-board-2: #00FF00;
  --electric-circuit-board-3: #0000FF;
  --electric-circuit-board-4: #FF8C00;
  --electric-circuit-board-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-circuit-board": {
        1: "#000000",
        2: "#00FF00",
        3: "#0000FF",
        4: "#FF8C00",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#00FF00

Color 3#0000FF

Color 4#FF8C00

Color 5#FFFFFF

Accessibility

Contrast checker

15.3:1AAA

2.4:1Fail

9:1AAA

21:1AAA

15.3:1AAA

6.3:1AA

1.7:1Fail

1.4:1Fail

2.4:1Fail

6.3:1AA

3.7:1AA18

8.6:1AAA

9:1AAA

1.7:1Fail

3.7:1AA18

2.3:1Fail

21:1AAA

1.4:1Fail

8.6:1AAA

2.3:1Fail

Similar palettes

More like Electric Circuit Board

View all vibrant

Neon Anomaly

Cyber Grid Flash

Cybernetic Circuit Glow

Neon Circuit Glitch

Neon Cyber Drive

Sci-Fi Hologram