Palette

Synthwave Dusk

Pulsating neons and vibrant hues inspired by the electric glow of an 80s synthwave sunset.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#8A2BE2#4169E1#00FFFF#FF4500

Palette guide

How to use Synthwave Dusk

Overview

The Synthwave Dusk palette features pulsating neons and vibrant hues, inspired by the electric glow of an 80s synthwave sunset. It combines the intense #FF00FF magenta with a deep #8A2BE2 purple and a cool #4169E1 royal blue. Bright accents come from the electric #00FFFF cyan and a fiery #FF4500 orange, creating a dynamic and energetic visual experience. This palette is an excellent choice for designers and developers aiming to capture the dramatic transition of day to night in a retro-futuristic setting. It offers a bold and memorable aesthetic, perfect for projects that demand a strong visual impact and nostalgic appeal.

Best used for

Event promotion and digital advertising
Digital art and illustration with a neon theme
Retro gaming interfaces and character design
Music album covers and promotional materials
Animated sequences and motion graphics
Fashion branding and accessories

Suggested color roles

primary

Utilize #8A2BE2 as a deep purple, providing an atmospheric and stable base for backgrounds or foundational elements.

secondary

Employ #4169E1 as a royal blue, offering a cool contrast and adding depth to the overall composition.

accent

Leverage #FF4500 for energetic orange pops, representing a sunset glow or key interactive elements that need to stand out.

background

Apply #8A2BE2 as the primary background, creating a dominant, immersive canvas that enhances the vibrancy of other colors.

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 #FF4500 have sufficient contrast against #8A2BE2 and #4169E1 for all text and UI elements (WCAG AA).
Avoid placing #FF00FF directly on #00FFFF for small text, as the low color difference can hinder readability.
For critical information, consider larger font sizes or bolder weights when using neon colors on darker backgrounds.
Always verify color contrast ratios with a WCAG compliance checker to meet accessibility standards.

Recommended combinations

Dusk Glow

A deep purple and royal blue base with a vibrant magenta pop, ideal for atmospheric backgrounds and key elements.

#8A2BE2 · #4169E1 · #FF00FF

Sunset Burst

Energetic orange and electric cyan accents on a deep purple canvas, perfect for highlighting or creating a digital glow.

#FF4500 · #00FFFF · #8A2BE2

Electric Horizon

Layered neon effect, combining magenta, cyan, and royal blue for dynamic graphic overlays and artistic compositions.

#FF00FF · #00FFFF · #4169E1

CSS variables

:root {
  --synthwave-dusk-1: #FF00FF;
  --synthwave-dusk-2: #8A2BE2;
  --synthwave-dusk-3: #4169E1;
  --synthwave-dusk-4: #00FFFF;
  --synthwave-dusk-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "synthwave-dusk": {
        1: "#FF00FF",
        2: "#8A2BE2",
        3: "#4169E1",
        4: "#00FFFF",
        5: "#FF4500",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#8A2BE2

Color 3#4169E1

Color 4#00FFFF

Color 5#FF4500

Accessibility

Contrast checker

1.9:1Fail

1.5:1Fail

2.5:1Fail

1.1:1Fail

1.9:1Fail

1.2:1Fail

4.8:1AA

1.7:1Fail

1.5:1Fail

1.2:1Fail

3.9:1AA18

1.4:1Fail

2.5:1Fail

4.8:1AA

3.9:1AA18

2.7:1Fail

1.1:1Fail

1.7:1Fail

1.4:1Fail

2.7:1Fail

Similar palettes

More like Synthwave Dusk

View all vibrant

Retro Synthwave Pulse