Palette

Retro Sunset Drive

Electric hues of orange, yellow, and fuchsia capture the vibrant, digital aesthetic of an 80s sunset drive.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Sunset Drive 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 Retro Sunset Drive.

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

Data visualization

#FF5733#FFC300#DAF7A6#C70039#900C3F

Palette guide

How to use Retro Sunset Drive

Overview

The Retro Sunset Drive palette captures the vibrant, digital aesthetic of an 80s sunset drive with electric hues of orange, yellow, and fuchsia, perfect for designers and developers creating bold, energetic experiences. Featuring a bright orange (#FF5733), a glowing yellow (#FFC300), a pale green-yellow (#DAF7A6), a deep red (#C70039), and a dark berry (#900C3F). This palette is ideal for projects needing a synthwave or neon retro vibe, from electrifying web interfaces to dynamic print materials. Utilize #FF5733 for high-energy focal points and #900C3F as a moody, grounding base.

Best used for

Synthwave music visuals and album art
80s-themed video game interfaces and graphics
Nightclub or event promotions and posters
Digital art and animation with a neon aesthetic
Retro sportswear branding and apparel
Movie posters for sci-fi or action thrillers

Suggested color roles

primary

Use #FF5733 as an electric, high-energy focal point for calls to action and prominent elements.

secondary

Employ #FFC300 as a radiant glow, adding vibrancy and warmth to supporting elements.

accent

Apply #DAF7A6 for a subtle, almost neon highlight, providing unexpected contrast.

background

Utilize #900C3F as a deep, moody base for electric colors to truly pop and create depth.

text

Consider #C70039 for bold headlines on light backgrounds, or white/near-white for dark backgrounds to ensure legibility.

Accessibility notes

Ensure sufficient contrast for text, especially with #DAF7A6 against other light colors.
Use #900C3F or #C70039 for text on #DAF7A6 or #FFC300 for enhanced readability.
Avoid small text in #FF5733 or #FFC300 on dark backgrounds without sufficient luminosity contrast.
Prioritize strong contrast for interactive elements to meet accessibility guidelines and improve usability.

Recommended combinations

Neon Glow

A bright, luminous trio for digital interfaces, light effects, or energetic gradients.

#FF5733 · #FFC300 · #DAF7A6

Synthwave Night

A dark, dramatic base with intense, electric highlights, perfect for a synthwave aesthetic.

#900C3F · #C70039 · #FF5733

Retro Pop

A lighter green-yellow with vibrant warm accents, suitable for playful graphics or subtle branding.

#DAF7A6 · #FFC300 · #C70039

CSS variables

:root {
  --retro-sunset-drive-1: #FF5733;
  --retro-sunset-drive-2: #FFC300;
  --retro-sunset-drive-3: #DAF7A6;
  --retro-sunset-drive-4: #C70039;
  --retro-sunset-drive-5: #900C3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-sunset-drive": {
        1: "#FF5733",
        2: "#FFC300",
        3: "#DAF7A6",
        4: "#C70039",
        5: "#900C3F",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#FFC300

Color 3#DAF7A6

Color 4#C70039

Color 5#900C3F

Accessibility

Contrast checker

2:1Fail

2.7:1Fail

1.9:1Fail

2.9:1Fail

2:1Fail

1.4:1Fail

3.7:1AA18

5.7:1AA

2.7:1Fail

1.4:1Fail

5.1:1AA

7.7:1AAA

1.9:1Fail

3.7:1AA18

5.1:1AA

1.5:1Fail

2.9:1Fail

5.7:1AA

7.7:1AAA

1.5:1Fail

Similar palettes

More like Retro Sunset Drive

View all vibrant

Retro Future Drive

Synthwave Midnight Drive