Back to palettes

Palette

Synthwave Neon Horizon

Pulsating, electric colors that evoke the iconic glow and driving beat of 1980s synthwave aesthetics.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Synthwave Neon Horizon 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 Synthwave Neon Horizon.

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

Data visualization

#000000#FF00FF#00FFFF#FF007F#FFFF00

Palette guide

How to use Synthwave Neon Horizon

Overview

The "Synthwave Neon Horizon" palette is a masterclass in retro-futuristic vibrancy, built around the stark contrast of pure black (#000000) and an array of searing neon hues. Featuring electric magenta (#FF00FF), brilliant cyan (#00FFFF), a bold hot pink (#FF007F), and a dazzling yellow (#FFFF00), this collection perfectly encapsulates the pulsating energy of 1980s synthwave aesthetics. It's an indispensable tool for designers and developers aiming to create high-impact, visually arresting projects. These hex codes are ideal for crafting UIs, branding, or digital art that demands attention and evokes a powerful sense of energetic nostalgia and digital glow.

Best used for

  • Retro-themed video games and arcade interfaces
  • High-contrast branding for music or entertainment
  • Dynamic website hero sections and landing pages
  • Animated logos and motion graphics with a neon effect
  • Digital art and illustrations inspired by 80s aesthetics
  • Event promotions for synthwave concerts or retro nights

Suggested color roles

primary

#000000 (pure black) serves as the foundational backdrop, providing the ultimate canvas for the neon colors to intensely glow.

secondary

#FF00FF (electric magenta) offers a dominant, vibrant presence for main elements, headers, or large graphical accents.

accent

#FFFF00 (dazzling yellow) delivers a sharp, energetic pop, perfect for interactive elements, warnings, or simulating bright light sources.

background

#000000 is the quintessential choice for a truly dark, immersive background, maximizing the visual impact and glow of all neon elements.

text

#00FFFF (brilliant cyan) provides excellent contrast and a futuristic feel for body text against #000000, while #FFFF00 is great for headings.

Accessibility notes

  • #00FFFF and #FFFF00 on #000000 offer excellent contrast, ensuring readability for a wide range of content.
  • Avoid using #FF00FF and #FF007F in close proximity for text or small elements, as their similar hues can make differentiation difficult.
  • The intensity of neon colors can be visually strenuous for some users; consider providing a less vibrant alternative or using them sparingly for critical information.
  • Ensure that interactive elements using these bright colors have clear focus indicators beyond just color change.

Recommended combinations

Horizon Glow

A classic synthwave combination for dark mode UIs, with #000000 as background, #FF00FF for primary accents, and #00FFFF for secondary text/details.

#000000 · #FF00FF · #00FFFF

Electric Sunset

Creates a striking, energetic visual for hero images or calls-to-action, blending hot pink and yellow against a deep black.

#FF007F · #FFFF00 · #000000

Cyber Grid

Ideal for digital displays, data visualizations, or abstract patterns, using the brightest neons for a high-tech, energetic feel.

#00FFFF · #FF00FF · #FFFF00

CSS variables

:root {
  --synthwave-neon-horizon-1: #000000;
  --synthwave-neon-horizon-2: #FF00FF;
  --synthwave-neon-horizon-3: #00FFFF;
  --synthwave-neon-horizon-4: #FF007F;
  --synthwave-neon-horizon-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "synthwave-neon-horizon": {
        1: "#000000",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#FF007F",
        5: "#FFFF00",
      }
    }
  }
}

Related searches

80s neon black palettesynthwave UI dark moderetro futuristic colorsvibrant black backgroundneon yellow magenta cyan

Palette colors

Hex values

Color 1#000000
·
Color 2#FF00FF
·
Color 3#00FFFF
·
Color 4#FF007F
·
Color 5#FFFF00
·

Accessibility

Contrast checker

1
2
3
4
5
1
6.7:1AA
16.7:1AAA
5.6:1AA
19.6:1AAA
2
6.7:1AA
2.5:1Fail
1.2:1Fail
2.9:1Fail
3
16.7:1AAA
2.5:1Fail
3:1AA18
1.2:1Fail
4
5.6:1AA
1.2:1Fail
3:1AA18
3.5:1AA18
5
19.6:1AAA
2.9:1Fail
1.2:1Fail
3.5:1AA18

Similar palettes

More like Synthwave Neon Horizon

View all vibrant
Electric Synthwave Drive
Neon Dream Sequence
Neon Synthwave Pulse
Retro Glow Grid
Retro Synth Wave
Synthwave Horizon Glitch