Palette

Retrowave Grid

Bold and futuristic hues channeling the distinct neon glow and energetic vibe of 80s synthwave.

VibrantRetro5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#4A148C#FF4081#00BCD4#F8E000

Palette guide

How to use Retrowave Grid

Overview

The Retrowave Grid palette is a bold and futuristic collection channeling the distinct neon glow and energetic vibe of 80s synthwave. It features a foundational black (#000000), a deep purple (#4A148C), a vibrant bright pink (#FF4081), a cool cyan (#00BCD4), and an electric yellow (#F8E000). This scheme is ideal for designers looking to create immersive digital experiences with high visual impact. The stark contrast between the dark base and the luminous accents makes it perfect for evoking a sense of cybernetic energy and retro-futuristic style.

Best used for

Dark mode UI/UX design for apps and websites
Synthwave album covers and music videos
Cyberpunk or retro-futuristic game aesthetics
Event flyers and posters for electronic music
Tech brand identity and digital advertising
Interactive installations and virtual reality environments

Suggested color roles

primary

Utilize #000000 (Black) as the dominant background color to make all other colors pop with a neon glow.

secondary

Apply #4A148C (Dark Purple) for secondary backgrounds, subtle gradients, or as a deeper base for other colors.

accent

Incorporate #FF4081 (Bright Pink), #00BCD4 (Cyan), or #F8E000 (Electric Yellow) for interactive elements, highlights, and key visual accents.

background

#000000 provides the ultimate canvas for this palette, creating depth and enhancing the luminosity of the neon hues.

text

White or a bright accent color like #F8E000 or #00BCD4 offers excellent readability for headings and important information against dark backgrounds.

Accessibility notes

The bright accent colors provide good contrast against #000000 and #4A148C; ensure text sizes are adequate.
Avoid using #4A148C for small text on #000000 as contrast might be insufficient for some users.
Use a contrast checker to verify all text and interactive element color combinations meet WCAG standards.
Ensure sufficient visual cues beyond color, especially when using multiple neon accents together.

Recommended combinations

Neon Grid

Perfect for creating striking visual effects, grid patterns, or UI highlights in dark mode.

#000000 · #FF4081 · #00BCD4

Electric Pulse

Ideal for energetic calls to action, loading animations, or dynamic data visualizations.

#4A148C · #F8E000 · #FF4081

Deep Synth

Excellent for backgrounds with subtle depth, navigation bars, or secondary informational panels.

#000000 · #4A148C · #00BCD4

CSS variables

:root {
  --retrowave-grid-1: #000000;
  --retrowave-grid-2: #4A148C;
  --retrowave-grid-3: #FF4081;
  --retrowave-grid-4: #00BCD4;
  --retrowave-grid-5: #F8E000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retrowave-grid": {
        1: "#000000",
        2: "#4A148C",
        3: "#FF4081",
        4: "#00BCD4",
        5: "#F8E000",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#4A148C

Color 3#FF4081

Color 4#00BCD4

Color 5#F8E000

Accessibility

Contrast checker

1.8:1Fail

6.3:1AA

9.1:1AAA

15.7:1AAA

1.8:1Fail

3.6:1AA18

5.2:1AA

8.8:1AAA

6.3:1AA

3.6:1AA18

1.5:1Fail

2.5:1Fail