Palette

Neon Retro Gradient

A bold and futuristic palette echoing the electric glow of an 80s synthwave sunset.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Retro Gradient 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 Neon Retro Gradient.

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

Data visualization

#FF6347#FFD700#8A2BE2#00BFFF#FF1493

Palette guide

How to use Neon Retro Gradient

Overview

The Neon Retro Gradient palette electrifies designs with an 80s synthwave vibe, perfect for capturing energetic and futuristic moods. Featuring vibrant hues like the fiery orange of #FF6347, the bold electric purple of #8A2BE2, and the striking magenta of #FF1493, this collection is ideal for projects demanding high visual impact. Designers can leverage these colors for striking gradients, dynamic UI elements, or captivating digital art. The bright yellow of #FFD700 and the crisp blue of #00BFFF provide versatile points of contrast, allowing for a diverse range of applications from branding to motion graphics. This palette ensures your visuals pop with a nostalgic yet modern glow.

Best used for

Synthwave music album art
Retro arcade game interfaces
Event posters and flyers
Motion graphics and animations
Fashion and streetwear branding
Vibrant digital illustrations

Suggested color roles

primary

Use #FF6347 (Tomato) for primary calls-to-action or hero sections to convey energy and urgency.

secondary

Apply #8A2BE2 (Blue Violet) for secondary elements, navigation, or background gradients to add depth and a futuristic feel.

accent

Employ #FF1493 (Deep Pink) or #FFD700 (Gold) for small, impactful accents, highlights, or interactive states.

background

Dark, muted backgrounds (like a deep charcoal or black) work best to make these neons truly pop. Consider a subtle gradient with #8A2BE2 and #00BFFF.

text

For body text, use a crisp white or light gray for maximum readability against any of these vibrant colors, especially #111111 for dark backgrounds.

Accessibility notes

Ensure sufficient contrast when pairing any two vibrant colors, especially for text on backgrounds.
Use darker backgrounds (e.g., black or dark gray) to enhance readability of bright neon text.
Avoid using #FFD700 and #FF6347 for small text against similarly bright backgrounds due to potential low contrast.
Test color combinations with accessibility checkers to ensure compliance for color blindness.

Recommended combinations

Synthwave Glow

Ideal for dynamic gradients, hero banners, or futuristic UI backgrounds.

#FF6347 · #8A2BE2 · #00BFFF

Electric Pop

Effective for bright accents, interactive elements, or eye-catching illustrations on dark themes.

#FFD700 · #FF1493 · #8A2BE2

Gradient Blend

Create stunning visual transitions, loading screens, or abstract art backgrounds.

#00BFFF · #FF6347 · #FFD700

CSS variables

:root {
  --neon-retro-gradient-1: #FF6347;
  --neon-retro-gradient-2: #FFD700;
  --neon-retro-gradient-3: #8A2BE2;
  --neon-retro-gradient-4: #00BFFF;
  --neon-retro-gradient-5: #FF1493;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-retro-gradient": {
        1: "#FF6347",
        2: "#FFD700",
        3: "#8A2BE2",
        4: "#00BFFF",
        5: "#FF1493",
      }
    }
  }
}

Hex values

Color 1#FF6347

Color 2#FFD700

Color 3#8A2BE2

Color 4#00BFFF

Color 5#FF1493

Accessibility

Contrast checker

2.1:1Fail

2:1Fail

1.4:1Fail

1.2:1Fail

2.1:1Fail

4.2:1AA18

1.5:1Fail

2.6:1Fail

2:1Fail

4.2:1AA18

2.8:1Fail

1.6:1Fail

1.4:1Fail

1.5:1Fail

2.8:1Fail

1.7:1Fail

1.2:1Fail

2.6:1Fail

1.6:1Fail

1.7:1Fail

Similar palettes

More like Neon Retro Gradient

View all vibrant

Electric Neon Dream

Electric Sunset Vapor