Palette

Groovy Psychedelic Vibe

A funky explosion of bold, clashing colors straight out of a 70s psychedelic dream.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Groovy Psychedelic Vibe 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 Psychedelic Vibe.

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

Data visualization

#FFD700#ADFF2F#FF69B4#4B0082#008080

Palette guide

How to use Groovy Psychedelic Vibe

Overview

The Groovy Psychedelic Vibe palette is a vibrant explosion of clashing colors, perfect for channeling a 70s aesthetic. Featuring energetic hues like the golden yellow #FFD700, a lively green-yellow #ADFF2F, a bold hot pink #FF69B4, a deep indigo #4B0082, and a refreshing teal #008080, this palette is designed to stand out. It offers designers and developers a rich spectrum for creating visually arresting and fun digital or print experiences that demand attention and evoke a nostalgic, free-spirited mood.

Best used for

Event posters and flyers
Retro fashion branding
Music album covers
Digital art and illustrations
Party invitations and decor
Youth-oriented product packaging

Suggested color roles

primary

Use #FFD700 (Gold) as a dominant, energetic base for large elements or primary branding, radiating warmth and optimism.

secondary

Employ #ADFF2F (Green-Yellow) for lively sections, secondary calls-to-action, or graphic elements that need a fresh, vibrant complement.

accent

Apply #FF69B4 (Hot Pink) as a powerful, eye-catching accent for buttons, highlights, or small, impactful details to add a bold pop.

background

Utilize #4B0082 (Indigo) for a rich, deep background that allows the brighter colors to truly pop, enhancing the psychedelic feel.

text

For text, consider white or a very light grey on #4B0082 for maximum readability. #008080 (Teal) can work for headers or larger text on lighter backgrounds like #FFD700.

Accessibility notes

Ensure sufficient contrast when pairing #FFD700 or #ADFF2F with lighter backgrounds; they might require darker text.
The deep #4B0082 (Indigo) offers excellent contrast for light text, such as white or #FFD700, meeting accessibility standards.
Be cautious using #FF69B4 (Hot Pink) for small body text, as its vibrance can reduce readability on certain backgrounds.
Test color combinations, especially those involving #ADFF2F (Green-Yellow) and #008080 (Teal), to ensure legibility for users with color vision deficiencies.

Recommended combinations

Deep Psychedelia

Creates a high-contrast, electrifying effect, ideal for bold headlines or hero sections.

#4B0082 · #FFD700 · #ADFF2F

Vibrant Fusion

A playful and energetic combination, perfect for graphics, illustrations, or dynamic UI elements.

#FFD700 · #FF69B4 · #008080

Retro Clash

Emphasizes the clashing, funky vibe, great for artistic compositions or unexpected design twists.

#ADFF2F · #FF69B4 · #4B0082

CSS variables

:root {
  --groovy-psychedelic-vibe-1: #FFD700;
  --groovy-psychedelic-vibe-2: #ADFF2F;
  --groovy-psychedelic-vibe-3: #FF69B4;
  --groovy-psychedelic-vibe-4: #4B0082;
  --groovy-psychedelic-vibe-5: #008080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "groovy-psychedelic-vibe": {
        1: "#FFD700",
        2: "#ADFF2F",
        3: "#FF69B4",
        4: "#4B0082",
        5: "#008080",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#ADFF2F

Color 3#FF69B4

Color 4#4B0082

Color 5#008080

Accessibility

Contrast checker

1.1:1Fail

1.9:1Fail

9.2:1AAA

3.4:1AA18

1.1:1Fail

2.2:1Fail

10.6:1AAA

3.9:1AA18

1.9:1Fail

2.2:1Fail

4.9:1AA

1.8:1Fail

9.2:1AAA

10.6:1AAA

4.9:1AA

2.7:1Fail

3.4:1AA18

3.9:1AA18

1.8:1Fail

2.7:1Fail

Similar palettes

More like Groovy Psychedelic Vibe

Diner Booth Nostalgia

Fifties Diner Jive