Palette

Digital Rift Neon

Blinding, synthetic colors pulsating with the erratic energy of a digital rift in a cyber landscape.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Digital Rift Neon 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 Digital Rift Neon.

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

Data visualization

#00FF00#FF00FF#00FFFF#FF0000#0000FF

Palette guide

How to use Digital Rift Neon

Overview

The Digital Rift Neon palette features blinding, synthetic colors pulsating with the erratic energy of a digital rift in a cyber landscape. With vivid green (#00FF00), electric magenta (#FF00FF), brilliant cyan (#00FFFF), intense red (#FF0000), and vibrant blue (#0000FF), this palette is perfect for designers and developers creating projects with a tech-heavy, digital, or electric aesthetic. Its extreme saturation and primary-like color scheme make it ideal for striking user interfaces, engaging game environments, or bold branding that demands immediate attention. This collection embodies pure digital energy and disruption, offering a versatile range of hues for impactful visual communication.

Best used for

Cyberpunk game interfaces
Electronic music visuals
Tech startup branding
Abstract digital art
Motion graphics and VFX
High-energy event promotions

Suggested color roles

primary

Use #00FF00 or #FF00FF for dominant interactive elements, calls-to-action, or main graphical areas.

secondary

Employ #00FFFF or #FF0000 for secondary information, highlights, or to add a burst of energetic contrast.

accent

Apply #0000FF for subtle depth, background elements, or to provide a sophisticated counterpoint to the neons.

background

A deep black or dark charcoal (not included in palette) is recommended to maximize the luminosity and contrast of these neon colors.

text

For text against dark backgrounds, #00FF00, #00FFFF, or #FF00FF offer excellent readability and a distinct digital feel.

Accessibility notes

Ensure sufficient contrast for all text, especially when using neon colors on other bright colors or against mid-tones.
Avoid using #FF0000 on #00FF00 or similar bright pairings for small text due to potential readability issues.
The intensity of these colors can cause visual fatigue; use them strategically and in moderation for key elements.
Test color combinations for readability, particularly for users with color vision deficiencies, as some pairings might be difficult.

Recommended combinations

Rift Core

Ideal for vibrant headers, graphical overlays, or elements needing a high-energy, digital glow.

#00FF00 · #FF00FF · #00FFFF

Electric Burst

Excellent for warnings, status indicators, or to highlight critical information with strong impact.

#FF0000 · #0000FF · #00FF00

Cyber Pulse

Suitable for dynamic backgrounds, progress bars, or any element requiring a progressive, energetic color shift.

#00FFFF · #FF00FF · #0000FF

CSS variables

:root {
  --digital-rift-neon-1: #00FF00;
  --digital-rift-neon-2: #FF00FF;
  --digital-rift-neon-3: #00FFFF;
  --digital-rift-neon-4: #FF0000;
  --digital-rift-neon-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-rift-neon": {
        1: "#00FF00",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#FF0000",
        5: "#0000FF",
      }
    }
  }
}

Hex values

Color 1#00FF00

Color 2#FF00FF

Color 3#00FFFF

Color 4#FF0000

Color 5#0000FF

Accessibility

Contrast checker

2.3:1Fail

1.1:1Fail

2.9:1Fail

6.3:1AA

2.3:1Fail

2.5:1Fail

1.3:1Fail

2.7:1Fail

1.1:1Fail

2.5:1Fail

3.2:1AA18

6.9:1AA

2.9:1Fail

1.3:1Fail

3.2:1AA18

2.1:1Fail

6.3:1AA

2.7:1Fail

6.9:1AA

2.1:1Fail

Similar palettes

More like Digital Rift Neon