Palette

Groovy Disco Night

A psychedelic blast of color, echoing the exhilarating lights and funky beats of a 1970s disco night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Groovy Disco Night 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 Groovy Disco Night.

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

Data visualization

#FF00A2#FF6B00#FFDA00#1C1C1C#5C2B4E

Palette guide

How to use Groovy Disco Night

Overview

The Groovy Disco Night palette is a psychedelic blast of color, echoing the exhilarating lights and funky beats of a 1970s disco night. It features an electrifying hot pink #FF00A2, a fiery orange #FF6B00, a brilliant yellow #FFDA00, contrasted with a deep, mysterious #1C1C1C, and a rich plum #5C2B4E. This collection is perfect for designers and developers looking to inject high energy, retro charm, and bold vibrancy into their projects. The dark tones provide a crucial grounding, allowing the luminous brights to truly pop, creating an energetic and memorable visual experience.

Best used for

Retro music and entertainment websites
Event promotions and club flyers
Youth-oriented branding and marketing
Creative and artistic digital designs
Gaming UI that needs a vibrant edge
Fun and energetic social media campaigns

Suggested color roles

primary

Use #FF00A2 as a high-impact primary for calls-to-action or key visual elements, grabbing immediate attention.

secondary

Employ #FF6B00 for secondary buttons, highlights, or graphic accents, providing warmth and energy.

accent

The bright #FFDA00 is perfect for vibrant accents, glow effects, or to draw focus to important information.

background

The deep #1C1C1C provides an excellent, dramatic background that makes the vibrant colors truly shine.

text

For dark backgrounds like #1C1C1C, white or #FFDA00 offers good readability. For bright backgrounds, use black or #1C1C1C.

Accessibility notes

Ensure sufficient contrast when using #FFDA00 text on #FF6B00 or #FF00A2 backgrounds, as it may be low.
The dark #1C1C1C offers excellent contrast for light text, making it a reliable choice for primary text on dark themes.
Avoid pairing bright colors like #FF00A2 and #FFDA00 for text and background without careful contrast checking.
Test all interactive elements to ensure clear distinction for users, especially those with color vision deficiencies.

Recommended combinations

Neon Glow

Ideal for creating a striking dark mode interface, with #FF00A2 for buttons and #FFDA00 for highlights.

#1C1C1C · #FF00A2 · #FFDA00

Sunset Disco

Excellent for vibrant headers or hero sections, with #5C2B4E grounding the energetic warm tones.

#FF6B00 · #FFDA00 · #5C2B4E

Funky Blend

Great for abstract patterns or backgrounds, offering a rich, deep combination with a pop of bright pink.

#FF00A2 · #5C2B4E · #1C1C1C

CSS variables

:root {
  --groovy-disco-night-1: #FF00A2;
  --groovy-disco-night-2: #FF6B00;
  --groovy-disco-night-3: #FFDA00;
  --groovy-disco-night-4: #1C1C1C;
  --groovy-disco-night-5: #5C2B4E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "groovy-disco-night": {
        1: "#FF00A2",
        2: "#FF6B00",
        3: "#FFDA00",
        4: "#1C1C1C",
        5: "#5C2B4E",
      }
    }
  }
}

Hex values

Color 1#FF00A2

Color 2#FF6B00

Color 3#FFDA00

Color 4#1C1C1C

Color 5#5C2B4E

Accessibility

Contrast checker

1.3:1Fail

2.6:1Fail

4.7:1AA

3:1AA18

1.3:1Fail

2.1:1Fail

6:1AA

3.8:1AA18

2.6:1Fail

2.1:1Fail

12.4:1AAA

8:1AAA

4.7:1AA

6:1AA

12.4:1AAA

1.6:1Fail

3:1AA18

3.8:1AA18

8:1AAA

1.6:1Fail

Similar palettes

More like Groovy Disco Night

View all vibrant

California Dream Wave

Chrome Jukebox Beat

Cyberpunk Electric Surge

Digital Echo Pulse

Digital Synth Grid

Disco Ball Sparkle