Back to palettes

Palette

Cyberpunk Sunset

An intense and artificial palette capturing the glowing, high-tech energy of a dystopian sunset.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF3366#FF9900#33CCFF#6633FF#00FF99

Palette guide

How to use Cyberpunk Sunset

Overview

The Cyberpunk Sunset palette conjures an artificial yet breathtaking view of a futuristic skyline at dusk, blending warm, electric hues with cool, digital tones. It features a vibrant hot pink (#FF3366), a fiery orange (#FF9900), a bright sky blue (#33CCFF), a rich electric purple (#6633FF), and a striking neon green (#00FF99). This palette is an energetic choice for designers and developers looking to create dynamic interfaces, captivating digital art, or bold branding that merges the organic beauty of a sunset with a high-tech, synthetic feel.

Best used for

  • Digital art and illustration
  • Event branding for tech-art festivals
  • Dynamic web backgrounds and headers
  • Fashion and lifestyle digital campaigns
  • Sci-fi themed UI/UX
  • Motion graphics and visual effects

Suggested color roles

primary

#FF3366 (Hot Pink) for strong calls to action or key brand elements, radiating warmth and energy.

secondary

#33CCFF (Sky Blue) can be used for secondary interactive elements or cool accents, providing contrast.

accent

#FF9900 (Fiery Orange) for alerts, highlights, or to add a burst of glowing warmth.

background

A dark neutral grey or deep indigo (e.g., #111122) would allow these colors to truly shine.

text

White (#FFFFFF) or a light, desaturated grey for body text to ensure optimal legibility against the vibrant background elements.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #FF9900 or #00FF99 on medium-dark backgrounds.
  • Avoid relying solely on color to convey information; use icons or text labels as supplementary indicators.
  • Test color combinations like #FF3366 and #6633FF for distinguishability by colorblind users.
  • Consider providing a high-contrast mode for users who may struggle with the vibrancy.

Recommended combinations

Dusk Glow

Ideal for sunset-themed gradients, headers, or atmospheric background elements.

#FF3366 · #FF9900 · #33CCFF

Electric Horizon

Perfect for accentuating futuristic elements, progress indicators, or interactive buttons.

#6633FF · #00FF99 · #FF3366

Synthwave Vibe

Use for layered graphics, data visualizations, or retro-futuristic illustrations.

#33CCFF · #FF9900 · #00FF99

CSS variables

:root {
  --cyberpunk-sunset-1: #FF3366;
  --cyberpunk-sunset-2: #FF9900;
  --cyberpunk-sunset-3: #33CCFF;
  --cyberpunk-sunset-4: #6633FF;
  --cyberpunk-sunset-5: #00FF99;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-sunset": {
        1: "#FF3366",
        2: "#FF9900",
        3: "#33CCFF",
        4: "#6633FF",
        5: "#00FF99",
      }
    }
  }
}

Related searches

cyberpunk neon sunsetvibrant gradient palettefuturistic city colorssynthwave aesthetic paletteelectric orange pink blue green

Palette colors

Hex values

Color 1#FF3366
·
Color 2#FF9900
·
Color 3#33CCFF
·
Color 4#6633FF
·
Color 5#00FF99
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.9:1Fail
1.7:1Fail
2.7:1Fail
2
1.7:1Fail
1.1:1Fail
2.8:1Fail
1.6:1Fail
3
1.9:1Fail
1.1:1Fail
3.2:1AA18
1.4:1Fail
4
1.7:1Fail
2.8:1Fail
3.2:1AA18
4.5:1AA
5
2.7:1Fail
1.6:1Fail
1.4:1Fail
4.5:1AA

Similar palettes

More like Cyberpunk Sunset

View all vibrant
Neo-Futuristic Pulse
Cyber City Haze
Cybernetic Glitch Flow
Cybernetic Glow Grid
Cybernetic Pulse Beat
Cybernetic Street Grid