Palette

Electric Sunset Vapor

A futuristic take on a sunset, with intense, glowing synthetic colors for an edgy vibe.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Electric Sunset Vapor 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 Electric Sunset Vapor.

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

Data visualization

#FF00FF#FF8C00#FFFF00#00BFFF#8A2BE2

Palette guide

How to use Electric Sunset Vapor

Overview

The Electric Sunset Vapor palette offers a futuristic take on a sunset, with intense, glowing synthetic colors for an edgy vibe. It features the vibrant #FF00FF (Magenta), energetic #FF8C00 (Dark Orange), luminous #FFFF00 (Yellow), cool #00BFFF (Deep Sky Blue), and mysterious #8A2BE2 (Blue Violet). This collection is perfect for designs that evoke synthwave, cyberpunk, or retro-futuristic themes, demanding immediate visual impact. Designers can leverage these hues for stark contrasts, glowing UI elements, or dynamic typography. Developers will find it excellent for creating immersive user experiences in applications, websites, or games that require a distinctly modern, energetic, and visually compelling feel, especially for music apps or creative platforms.

Best used for

Synthwave music album art
Cyberpunk game interfaces
Retro-futuristic website design
Vaporwave aesthetic projects
Music event promotions
Digital art with electric glows

Suggested color roles

primary

#FF00FF (Magenta) - A powerful, energetic primary color, ideal for main branding elements, large graphic areas, or a dominant background color for high impact.

secondary

#FF8C00 (Dark Orange) - Offers a warm, vibrant counterpoint, suitable for subheadings, navigation elements, or secondary graphic accents, adding depth to the sunset tones.

accent

#FFFF00 (Yellow) - A luminous, attention-grabbing accent for alerts, notifications, or critical information that needs immediate visibility, mimicking the sun's glow.

background

#00BFFF (Deep Sky Blue) - A dynamic and cool background that can command attention, best used sparingly. For a more versatile dark background, consider black or a deep purple.

text

#8A2BE2 (Blue Violet) - Effective for striking headlines on lighter backgrounds. For body text, black or a very dark gray (e.g., #1A1A1A) will offer better readability on lighter backgrounds.

Accessibility notes

Ensure high contrast when pairing #FFFF00 or #00BFFF with light backgrounds; dark text is usually necessary.
Avoid using #FF00FF, #FF8C00, or #8A2BE2 for small body text due to their intensity.
When using #00BFFF as a background, ensure text colors (e.g., black or white) meet WCAG contrast ratios.
Prioritize dark text (e.g., black) on #FFFF00, and white text on #FF00FF or #FF8C00 for optimal readability.

Recommended combinations

Synth Sunset

Creates a classic synthwave sunset gradient, ideal for backgrounds, headers, or any design needing warm, intense energy with a digital feel.

#FF00FF · #FF8C00 · #FFFF00

Vapor Horizon

Perfect for vibrant highlights, interactive elements, or a fresh, modern feel in digital interfaces, mimicking a unique sky with vapor trails.

#00BFFF · #8A2BE2 · #FF8C00

Electric Glow

A bold and striking trio for expressive art, attention-grabbing calls-to-action, or lively interface elements with an energetic, futuristic twist.

#FFFF00 · #FF00FF · #00BFFF

CSS variables

:root {
  --electric-sunset-vapor-1: #FF00FF;
  --electric-sunset-vapor-2: #FF8C00;
  --electric-sunset-vapor-3: #FFFF00;
  --electric-sunset-vapor-4: #00BFFF;
  --electric-sunset-vapor-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-sunset-vapor": {
        1: "#FF00FF",
        2: "#FF8C00",
        3: "#FFFF00",
        4: "#00BFFF",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#FF8C00

Color 3#FFFF00

Color 4#00BFFF

Color 5#8A2BE2

Accessibility

Contrast checker

1.3:1Fail

2.9:1Fail

1.5:1Fail

1.9:1Fail

1.3:1Fail

2.2:1Fail

1.1:1Fail

2.6:1Fail

2.9:1Fail

2.2:1Fail

2:1Fail

5.5:1AA

1.5:1Fail

1.1:1Fail

2:1Fail

2.8:1Fail

1.9:1Fail

2.6:1Fail

5.5:1AA

2.8:1Fail

Similar palettes

More like Electric Sunset Vapor

View all vibrant

Cyberpunk Electric Surge

Digital Synthwave Horizon

Neon Retro Gradient

Synthwave Circuit City

City Lights Energy

Cyber Glow Graffiti