Palette

Neon Disco Groove

Electrifying and bold, this palette channels the pulsating energy of a retro disco dance floor.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Disco Groove 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 Disco Groove.

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

Data visualization

#FF00FF#00FFFF#FFFF00#FF4500#4B0082

Palette guide

How to use Neon Disco Groove

Overview

The Neon Disco Groove palette is an electrifying and bold collection that perfectly channels the pulsating energy of a retro disco dance floor. With vibrant hues like #FF00FF (magenta), #00FFFF (cyan), #FFFF00 (yellow), and #FF4500 (orange-red), grounded by a deep #4B0082 (indigo), it offers a fantastic blend of high-energy accents and a sophisticated dark base. This palette is ideal for designers looking to infuse projects with a nostalgic yet dynamic vibe, perfect for event promotions, retro-themed branding, or any visual content that aims to be vibrant, playful, and unforgettable.

Best used for

Retro 80s and 90s themed event posters and branding
Music video aesthetics and album covers
Party invitations and club promotions
Vibrant digital art and graphic design
Fashion and streetwear accents for a bold look
Interactive experiences with a playful, energetic feel

Suggested color roles

primary

Utilize #4B0082 as the primary dark background, providing a rich, deep base that makes the neon accents pop.

secondary

No explicit secondary tone; rely on the vibrant accents for contrast and visual interest.

accent

Deploy #FF00FF, #00FFFF, #FFFF00, and #FF4500 for all highlights, interactive elements, and dynamic visual flair.

background

The deep #4B0082 (indigo) is excellent as a primary background, setting a moody yet energetic stage for the neon lights.

text

For primary text on #4B0082, use #FFFF00 or #00FFFF for headlines, and a bright white or light gray for body copy to ensure readability.

Accessibility notes

Ensure #FFFF00 and #00FFFF text on #4B0082 backgrounds meets WCAG AA contrast ratios.
Be cautious with #FF4500 on #4B0082 for small text; larger sizes or bolder weights may be needed.
Avoid placing highly saturated neons directly adjacent to each other for essential information to prevent visual vibration.
Provide clear visual cues beyond color alone for interactive elements, especially with vibrant hues.

Recommended combinations

Disco Floor

Event branding: #4B0082 as background, #FF00FF for main title, #00FFFF for event details.

#4B0082 · #FF00FF · #00FFFF

Groovy Pop

Accent elements: #4B0082 for base, #FFFF00 for icons, #FF4500 for call-to-action buttons.

#4B0082 · #FFFF00 · #FF4500

Retro Energy

Gradient effects: #4B0082 as base, with #FF00FF and #FFFF00 creating a vibrant gradient for headlines.

#FF00FF · #FFFF00 · #4B0082

CSS variables

:root {
  --neon-disco-groove-1: #FF00FF;
  --neon-disco-groove-2: #00FFFF;
  --neon-disco-groove-3: #FFFF00;
  --neon-disco-groove-4: #FF4500;
  --neon-disco-groove-5: #4B0082;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-disco-groove": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#FF4500",
        5: "#4B0082",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFFF00

Color 4#FF4500

Color 5#4B0082

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

1.1:1Fail

4.1:1AA18

2.5:1Fail

1.2:1Fail

2.7:1Fail

10.3:1AAA

2.9:1Fail

1.2:1Fail

3.2:1AA18

12.1:1AAA

1.1:1Fail

2.7:1Fail

3.2:1AA18

3.8:1AA18

4.1:1AA18

10.3:1AAA

12.1:1AAA

3.8:1AA18

Similar palettes

More like Neon Disco Groove