Palette

Digital Synth Grid

Pulsating with electric energy, this palette embodies the glowing grid of a synthwave future, boldly vibrant.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#FF00FF#00FFFF#FFD700#0080FF

Palette guide

How to use Digital Synth Grid

Overview

The Digital Synth Grid palette pulsates with electric energy, embodying the glowing grid of a synthwave future, boldly vibrant. Featuring stark black (#000000), electric magenta (#FF00FF), brilliant cyan (#00FFFF), rich gold (#FFD700), and vibrant blue (#0080FF), this palette is perfect for designers and developers creating projects with a digital, futuristic, or retro-synthwave aesthetic. Its high contrast and glowing neons against a deep black make it ideal for dynamic user interfaces, engaging game environments, or bold branding that stands out. The combination of cool and warm neons captures the iconic spirit of synthwave while maintaining a contemporary edge.

Best used for

Synthwave music album covers
Retro-futuristic game UI
80s inspired event branding
Cyberpunk digital art
Motion graphics with neon effects
Vibrant website headers

Suggested color roles

primary

Use #000000 as the dominant background or base, providing depth and allowing other colors to truly pop.

secondary

Employ #FF00FF or #00FFFF for primary interactive elements, calls-to-action, or key data points.

accent

Apply #FFD700 or #0080FF for dynamic accents, hover states, or to introduce a vibrant contrast.

background

A deep #000000 background is crucial to enhance the neon glow, creating a classic synthwave atmosphere.

text

For general text, a bright white or light grey (not in palette) provides excellent readability against dark backgrounds. Use neons for headlines.

Accessibility notes

Ensure sufficient contrast for all text, especially when using neon colors on #000000 backgrounds (WCAG AA usually met).
Avoid using #FFD700 on #0080FF or similar bright pairings for small text due to potential readability issues.
The intensity of neon colors can be overwhelming; use them strategically for emphasis, not for large blocks of text.
Test color combinations for readability, particularly for users with color vision deficiencies, as some pairings might be difficult.

Recommended combinations

Synth Grid

Ideal for UI elements, outlines, or to simulate glowing grids in a dark, futuristic interface.

#000000 · #FF00FF · #00FFFF

Neon Horizon

Excellent for atmospheric backgrounds, gradients, or main graphical elements that evoke a synthwave aesthetic.

#000000 · #FFD700 · #0080FF

Digital Pulse

Suitable for vibrant graphic overlays, data visualizations, or elements needing maximum digital energy.

#FF00FF · #00FFFF · #FFD700

CSS variables

:root {
  --digital-synth-grid-1: #000000;
  --digital-synth-grid-2: #FF00FF;
  --digital-synth-grid-3: #00FFFF;
  --digital-synth-grid-4: #FFD700;
  --digital-synth-grid-5: #0080FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-synth-grid": {
        1: "#000000",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#FFD700",
        5: "#0080FF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#FF00FF

Color 3#00FFFF

Color 4#FFD700

Color 5#0080FF

Accessibility

Contrast checker

6.7:1AA

16.7:1AAA

15:1AAA

5.5:1AA

6.7:1AA

2.5:1Fail

2.2:1Fail

1.2:1Fail

16.7:1AAA

2.5:1Fail

1.1:1Fail

3:1AA18

15:1AAA

2.2:1Fail

1.1:1Fail

2.7:1Fail

5.5:1AA

1.2:1Fail

3:1AA18

2.7:1Fail

Similar palettes

More like Digital Synth Grid

View all vibrant

Digital Echo Pulse

Digital Synthwave Horizon

Electric Future Pulse

Electric Sunset Vapor

Fluorescent Arcade Glow

Neo Synth Grid