Palette

Neon Flux Horizon

A dazzling array of electric hues capturing the pulsating energy of a futuristic city's neon-lit streets.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Flux Horizon 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 Neon Flux Horizon.

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

Data visualization

#00FFC0#8000FF#FF00FF#FF0080#00C0FF

Palette guide

How to use Neon Flux Horizon

Overview

The Neon Flux Horizon palette presents a dazzling array of electric hues that capture the pulsating energy of a futuristic city's neon-lit streets. Featuring #00FFC0 (aqua), #8000FF (vibrant purple), #FF00FF (magenta), #FF0080 (rose pink), and #00C0FF (bright blue), this palette is designed for fluidity and dynamic transitions. It's perfect for creating stunning digital gradients, motion design, and futuristic UI elements that evoke an immersive, high-tech experience. Designers can leverage these vibrant, interconnected colors to build energetic branding and captivating visual narratives that feel truly alive.

Best used for

Digital gradients and animated backgrounds
Motion design and visual effects for futuristic content
Cyberpunk UI elements and interactive dashboards
Tech company branding with a dynamic, modern edge
Abstract digital art and immersive experiences
Music visuals for electronic and synthwave genres

Suggested color roles

primary

These colors are all vibrant accents; a pure black or very deep charcoal (e.g., #111111) is essential as a primary background.

secondary

All colors function as primary accents, often used in combinations for gradients and energetic contrasts.

accent

Utilize #00FFC0, #8000FF, #FF00FF, #FF0080, and #00C0FF for all interactive elements, glowing effects, and dynamic visual flourishes.

background

An extremely dark background, such as #111111 or pure black, is critical to enhance the luminosity and contrast of these neon hues.

text

For general text, use bright white or a very light gray. Reserve neon colors like #00FFC0 or #00C0FF for prominent headlines, calls to action, or key data points.

Accessibility notes

Ensure all neon colors have strong contrast against very dark backgrounds to meet WCAG AA standards.
When creating gradients, ensure any text overlaid maintains sufficient contrast across the color transition.
Be mindful of color blindness when using similar hues like #FF00FF and #FF0080 if they convey distinct information.
Use these vibrant colors to denote interactive elements, ensuring they are clearly distinguishable.

Recommended combinations

Flux Gradient

Dynamic backgrounds: #111111 base, with #00FFC0 transitioning into #8000FF for a vibrant gradient.

#00FFC0 · #8000FF · #FF00FF

Cyber Glow

UI highlights: #111111 for panels, #FF00FF for active tabs, #FF0080 for hover states.

#FF00FF · #FF0080 · #8000FF

Horizon Blend

Interactive elements: #111111 for buttons, with #00C0FF and #00FFC0 creating a captivating dual-tone effect.

#00C0FF · #00FFC0 · #FF00FF

CSS variables

:root {
  --neon-flux-horizon-1: #00FFC0;
  --neon-flux-horizon-2: #8000FF;
  --neon-flux-horizon-3: #FF00FF;
  --neon-flux-horizon-4: #FF0080;
  --neon-flux-horizon-5: #00C0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-flux-horizon": {
        1: "#00FFC0",
        2: "#8000FF",
        3: "#FF00FF",
        4: "#FF0080",
        5: "#00C0FF",
      }
    }
  }
}

Hex values

Color 1#00FFC0

Color 2#8000FF

Color 3#FF00FF

Color 4#FF0080

Color 5#00C0FF

Accessibility

Contrast checker

4.8:1AA

2.4:1Fail

2.9:1Fail

1.6:1Fail

4.8:1AA

2:1Fail

1.7:1Fail

3:1Fail

2.4:1Fail

2:1Fail

1.2:1Fail

1.5:1Fail