Palette

Digital Retro Wave

A vibrant homage to 80s aesthetics with a modern, digital twist, bursting with energetic hues.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Digital Retro Wave 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 Retro Wave.

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

Data visualization

#00FFFF#FF1493#8A2BE2#00FF00#000000

Palette guide

How to use Digital Retro Wave

Overview

The Digital Retro Wave palette is a vibrant homage to 80s aesthetics with a modern, digital twist, bursting with energetic hues. Featuring brilliant cyan (#00FFFF), intense hot pink (#FF1493), royal violet (#8A2BE2), vivid green (#00FF00), and stark black (#000000), this palette is perfect for designers and developers creating projects with a synthwave, retro-futuristic, or energetic tech vibe. 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 the 80s while maintaining a contemporary edge.

Best used for

Synthwave music album covers
Retro arcade game UI
80s themed events and 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 #00FFFF or #FF1493 for primary interactive elements, calls-to-action, or key data points.

accent

Apply #8A2BE2 or #00FF00 for dynamic accents, hover states, or to introduce a sense of digital disruption.

background

A deep #000000 background is crucial to enhance the neon glow, creating a classic retro-wave 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 #00FFFF on #00FF00 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

Synthwave Sunset

Ideal for atmospheric backgrounds, gradients, or main graphical elements that evoke a retro horizon.

#000000 · #FF1493 · #8A2BE2

Neon Grid

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

#000000 · #00FFFF · #00FF00

Digital Pulse

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

#FF1493 · #00FFFF · #00FF00

CSS variables

:root {
  --digital-retro-wave-1: #00FFFF;
  --digital-retro-wave-2: #FF1493;
  --digital-retro-wave-3: #8A2BE2;
  --digital-retro-wave-4: #00FF00;
  --digital-retro-wave-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-retro-wave": {
        1: "#00FFFF",
        2: "#FF1493",
        3: "#8A2BE2",
        4: "#00FF00",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF1493

Color 3#8A2BE2

Color 4#00FF00

Color 5#000000

Accessibility

Contrast checker

2.9:1Fail

4.8:1AA

1.1:1Fail

16.7:1AAA

2.9:1Fail

1.6:1Fail

2.7:1Fail

5.8:1AA

4.8:1AA

1.6:1Fail

4.3:1AA18

3.5:1AA18

1.1:1Fail

2.7:1Fail

4.3:1AA18

15.3:1AAA

16.7:1AAA

5.8:1AA

3.5:1AA18

15.3:1AAA

Similar palettes

More like Digital Retro Wave