Palette

Synthwave Digital Dream

An electrifying palette blending 80s aesthetics with futuristic visions, pulsating with neon energy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Synthwave Digital Dream 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 Digital Dream.

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

Data visualization

#FF0099#00FFFF#FFD700#4B0082#001F3F

Palette guide

How to use Synthwave Digital Dream

Overview

The Synthwave Digital Dream palette is an electrifying blend of 80s aesthetics and futuristic visions, pulsating with neon energy. It features a striking #FF0099 hot pink, an electric #00FFFF cyan, and a radiant #FFD700 gold, all set against a deep, contrasting base of #4B0082 indigo and #001F3F dark navy. This palette is designed for designers and developers who want to create a sense of digital wonder, retro nostalgia, and energetic modernity. It's a compelling choice for projects that aim to be visually impactful, memorable, and brimming with a vibrant, otherworldly glow.

Best used for

Digital product interfaces and user experiences
Event promotions and concert visuals
Music video graphics and motion design
Modern art installations and digital displays
Gaming themes and character design
Tech branding and marketing materials

Suggested color roles

primary

Utilize #001F3F as a deep navy, providing a stable, sophisticated base for backgrounds and foundational elements.

secondary

Employ #4B0082 as a dark purple, adding atmospheric depth and a subtle transition to the brighter neons.

accent

Leverage #FF0099 for vibrant, energetic pops, calls to action, or prominent graphic elements that demand immediate attention.

background

Apply #001F3F as the primary background, offering a dark, rich canvas that makes the bright neons truly stand out.

text

Use #00FFFF for electric blue text on dark backgrounds, or a crisp white or light gray for general body copy to ensure optimal readability.

Accessibility notes

Ensure #00FFFF and #FFD700 have strong contrast against #001F3F for all text and interactive elements (WCAG AA).
Avoid placing #FF0099 directly on #4B0082 for small text, as the contrast may be insufficient.
For critical information, consider larger font sizes or bolder weights when using neon colors.
Always verify color contrast ratios with a WCAG compliance checker to meet accessibility standards.

Recommended combinations

Dream Horizon

A deep, gradient base transitioning to a vibrant pink highlight, perfect for backgrounds and key elements.

#001F3F · #4B0082 · #FF0099

Digital Pulse

Bright, energetic cyan and gold accents on a dark navy canvas, ideal for interactive elements or data visualization.

#00FFFF · #FFD700 · #001F3F

Retro Future

Layered neon effect combining pink, cyan, and indigo for dynamic graphic overlays and artistic compositions.

#FF0099 · #00FFFF · #4B0082

CSS variables

:root {
  --synthwave-digital-dream-1: #FF0099;
  --synthwave-digital-dream-2: #00FFFF;
  --synthwave-digital-dream-3: #FFD700;
  --synthwave-digital-dream-4: #4B0082;
  --synthwave-digital-dream-5: #001F3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "synthwave-digital-dream": {
        1: "#FF0099",
        2: "#00FFFF",
        3: "#FFD700",
        4: "#4B0082",
        5: "#001F3F",
      }
    }
  }
}

Hex values

Color 1#FF0099

Color 2#00FFFF

Color 3#FFD700

Color 4#4B0082

Color 5#001F3F

Accessibility

Contrast checker

2.9:1Fail

2.6:1Fail

3.5:1AA18

4.5:1AA

2.9:1Fail

1.1:1Fail

10.3:1AAA

13.2:1AAA

2.6:1Fail

1.1:1Fail

9.2:1AAA

11.8:1AAA

3.5:1AA18

10.3:1AAA

9.2:1AAA

1.3:1Fail

4.5:1AA

13.2:1AAA

11.8:1AAA

1.3:1Fail

Similar palettes

More like Synthwave Digital Dream

View all vibrant

Synthwave Circuit City

Digital Synthwave Horizon