Palette

Cyberpunk Afterglow

Electric purples and blues glowing against a dark backdrop, inspired by futuristic cityscapes at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A1F#6A057F#D200FF#00CFFF#00FFBB

Palette guide

How to use Cyberpunk Afterglow

Overview

The Cyberpunk Afterglow palette is a captivating blend of electric purples and blues glowing against a dark backdrop, inspired by futuristic cityscapes at night. It features a profound dark indigo (#0A0A1F) and a rich, mysterious royal purple (#6A057F) as its base, dramatically contrasted by a brilliant electric purple (#D200FF), a vivid sky blue (#00CFFF), and a luminous aqua-green (#00FFBB). This palette is designed for designers and developers seeking to create immersive, high-tech environments and sophisticated interfaces that convey depth, digital luminosity, and a distinct cyberpunk aesthetic. It's both energetic and profoundly captivating.

Best used for

Cyberpunk game environments and cinematic sequences
Digital art and illustration with dark, glowing scenes
Virtual reality and augmented reality applications
Tech company branding for innovative products
Event promotions for immersive experiences or art installations
Motion graphics simulating holographic displays

Suggested color roles

primary

Use #D200FF (Electric Purple) for main interactive elements, key highlights, or branding that needs to convey energy and distinctiveness.

secondary

Apply #00CFFF (Vivid Sky Blue) for secondary calls-to-action, data visualizations, or to create a cool, digital contrast.

accent

Reserve #00FFBB (Luminous Aqua-Green) for subtle glows, background textures, or to add a refreshing, data-stream feel.

background

Utilize #0A0A1F (Dark Indigo) as the foundational dark canvas, providing a stark contrast that makes the neon colors truly burst and glow.

text

Pair #D200FF (Electric Purple) or #00CFFF (Vivid Sky Blue) for headings; use white for general body text on dark backgrounds.

Accessibility notes

Ensure high contrast for text. #D200FF and #00CFFF on #0A0A1F are generally good. Check #00FFBB on #0A0A1F for smaller text.
Avoid using #6A057F and #D200FF in close proximity for critical information if color is the sole differentiator, due to their similar hue family and potential for color blindness issues.
Use #0A0A1F provides an excellent dark background for lighter, luminous text, ensuring good readability.
For critical information, always provide alternative visual cues (icons, underlines) in addition to color.

Recommended combinations

Night Vista

A dark background with royal purple for atmospheric depth and electric purple for distant city glows or neon signs.

#0A0A1F · #6A057F · #D200FF

Holographic Interface

Use for UI elements, with dark indigo as the base, vivid sky blue for main data, and aqua-green for interactive overlays.

#0A0A1F · #00CFFF · #00FFBB

Afterglow Effect

Combine these vibrant hues for dynamic animations, loading indicators, or energetic transitions, representing digital energy.

#D200FF · #00CFFF · #00FFBB

CSS variables

:root {
  --cyberpunk-afterglow-1: #0A0A1F;
  --cyberpunk-afterglow-2: #6A057F;
  --cyberpunk-afterglow-3: #D200FF;
  --cyberpunk-afterglow-4: #00CFFF;
  --cyberpunk-afterglow-5: #00FFBB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-afterglow": {
        1: "#0A0A1F",
        2: "#6A057F",
        3: "#D200FF",
        4: "#00CFFF",
        5: "#00FFBB",
      }
    }
  }
}

Hex values

Color 1#0A0A1F

Color 2#6A057F

Color 3#D200FF

Color 4#00CFFF

Color 5#00FFBB

Accessibility

Contrast checker

1.8:1Fail

4.8:1AA

10.6:1AAA

14.9:1AAA

1.8:1Fail

2.7:1Fail

5.9:1AA

8.3:1AAA

4.8:1AA

2.7:1Fail

2.2:1Fail

3.1:1AA18

10.6:1AAA

5.9:1AA

2.2:1Fail

1.4:1Fail

14.9:1AAA

8.3:1AAA

3.1:1AA18

1.4:1Fail

Similar palettes

More like Cyberpunk Afterglow

View all vibrant

Cyber City Synth

Cybernetic Vista Glow

Cyberpunk Alley Neon

Cyberpunk Alley Night

Cyberpunk Neon Drive

Digital Glitch Pulse