Back to palettes

Palette

Electric Grid

Bold, neon hues designed for high-impact, futuristic aesthetics, perfect for digital interfaces.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#FFFF00#FF4500#1E90FF

Palette guide

How to use Electric Grid

Overview

The Electric Grid palette is a collection of bold, neon hues designed for high-impact, futuristic aesthetics, perfect for digital interfaces. It features the striking #FF00FF (Magenta), vibrant #00FFFF (Cyan), luminous #FFFF00 (Yellow), energetic #FF4500 (OrangeRed), and a solid #1E90FF (DodgerBlue). This palette is built on primary and secondary additive colors, creating an immediate sense of digital energy and clarity. Designers can leverage these colors for stark contrasts, glowing UI elements, or data visualization that demands attention. Developers will find this palette excellent for creating dynamic user experiences in applications, websites, or games that require a distinctly modern and tech-driven feel.

Best used for

  • Sci-fi game UI design
  • High-tech dashboard interfaces
  • Digital art and motion graphics
  • Energetic event branding
  • Cyberpunk themed web design
  • Data visualization with high contrast

Suggested color roles

primary

#FF00FF (Magenta) - A powerful, energetic hue ideal for primary calls-to-action, brand highlights, or dominant graphical elements.

secondary

#00FFFF (Cyan) - Provides a cool, electric balance, perfect for secondary interactive elements, subheadings, or background accents.

accent

#FFFF00 (Yellow) - A luminous, attention-grabbing accent for alerts, notifications, or critical information that needs immediate visibility.

background

#1E90FF (DodgerBlue) - Can serve as a dynamic, light background for digital interfaces, offering a vibrant base for other neon elements. For darker backgrounds, consider a charcoal like #1A1A1A.

text

#FF4500 (OrangeRed) - Effective for high-impact headlines or short, urgent messages. For body text, use black or dark gray on lighter backgrounds, or white on darker backgrounds like a deep blue or black.

Accessibility notes

  • Ensure sufficient contrast when pairing #FFFF00 with any light background; it's best on dark colors.
  • Avoid using #FF00FF, #00FFFF, #FFFF00, or #FF4500 for small body text due to their intensity.
  • When using #1E90FF as a background, ensure text colors (e.g., black or white) meet WCAG contrast ratios.
  • Prioritize dark text (e.g., #1A1A1A) on #FFFF00 for readability, and white text on #FF00FF or #00FFFF.

Recommended combinations

Digital Core

The classic CMY combination, perfect for creating dynamic digital effects, glowing UI elements, or vibrant abstract art.

#FF00FF · #00FFFF · #FFFF00

Tech Alert

Ideal for warnings, notifications, or interactive elements that need to stand out with a clear, energetic signal.

#1E90FF · #FF4500 · #FFFF00

Neon Circuit

A high-energy trio for gaming interfaces, event posters, or any design requiring a bold, electric, and modern feel.

#00FFFF · #FF00FF · #FF4500

CSS variables

:root {
  --electric-grid-1: #FF00FF;
  --electric-grid-2: #00FFFF;
  --electric-grid-3: #FFFF00;
  --electric-grid-4: #FF4500;
  --electric-grid-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-grid": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#FF4500",
        5: "#1E90FF",
      }
    }
  }
}

Related searches

futuristic UI colorsneon tech palettehigh contrast digital designvibrant web interfaceelectric game theme

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#FFFF00
·
Color 4#FF4500
·
Color 5#1E90FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.9:1Fail
1.1:1Fail
1:1Fail
2
2.5:1Fail
1.2:1Fail
2.7:1Fail
2.6:1Fail
3
2.9:1Fail
1.2:1Fail
3.2:1AA18
3:1AA18
4
1.1:1Fail
2.7:1Fail
3.2:1AA18
1.1:1Fail
5
1:1Fail
2.6:1Fail
3:1AA18
1.1:1Fail

Similar palettes

More like Electric Grid

View all vibrant
Electric Pulse Glow
Neo Pop Canvas
Carnival Kaleidoscope
Electric Circuit Surge
Meadow Bloom Burst
Pixel Game Neon