Back to palettes

Palette

Groovy Disco Nights

A dynamic palette capturing the energetic and bold spirit of 1970s disco dance floors and vibrant fashion.

retroenergetic5 colors
More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E07D3E#F2BF42#7B9D6E#4B4B6F#D05E2E

Palette guide

How to use Groovy Disco Nights

Overview

The Groovy Disco Nights palette captures the energetic and bold spirit of 1970s disco dance floors and vibrant fashion. This dynamic collection features a warm terracotta #E07D3E, a cheerful golden yellow #F2BF42, a sophisticated sage green #7B9D6E, a deep plum-blue #4B4B6F, and a rich burnt orange #D05E2E. These harmonious yet distinct colors provide designers and developers with a versatile toolkit to create retro-inspired designs that feel both nostalgic and fresh. It's perfect for projects aiming for a playful, energetic, and uniquely vintage aesthetic, offering warmth and character.

Best used for

  • Retro fashion e-commerce sites
  • Vintage-themed event invitations
  • Creative branding for cafes or bars
  • Nostalgic illustration and graphic design
  • Music streaming platforms with a retro vibe
  • Playful app interfaces

Suggested color roles

primary

Use #E07D3E as a warm, inviting primary color for headlines or key graphic elements, offering a friendly feel.

secondary

Employ #F2BF42 for secondary accents, interactive elements, or to brighten a composition, adding cheerfulness.

accent

The deep #4B4B6F provides a sophisticated, cool accent, perfect for contrast or subtle background details.

background

A lighter tone like #F2BF42 can offer a cheerful background, or use #7B9D6E for a more subdued, natural feel.

text

For lighter backgrounds, #4B4B6F provides excellent readability. For darker backgrounds, white or #F2BF42 is ideal.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially for #F2BF42 on #E07D3E or #D05E2E.
  • The darker #4B4B6F offers good contrast for light text, making it suitable for primary text on light backgrounds.
  • Avoid using #7B9D6E for small text on #F2BF42 backgrounds without careful contrast checking.
  • Test all color pairings for interactive elements to ensure clear distinction for all users.

Recommended combinations

Warm Retro

Excellent for creating a cozy, inviting header or hero section with a strong vintage feel.

#E07D3E · #F2BF42 · #D05E2E

Cool Contrast

Ideal for a sophisticated color block or footer, with #F2BF42 providing a bright accent against deeper tones.

#4B4B6F · #7B9D6E · #F2BF42

Earthy Funk

Great for abstract patterns or background textures, combining warm and earthy tones for depth.

#D05E2E · #7B9D6E · #E07D3E

CSS variables

:root {
  --groovy-disco-nights-1: #E07D3E;
  --groovy-disco-nights-2: #F2BF42;
  --groovy-disco-nights-3: #7B9D6E;
  --groovy-disco-nights-4: #4B4B6F;
  --groovy-disco-nights-5: #D05E2E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "groovy-disco-nights": {
        1: "#E07D3E",
        2: "#F2BF42",
        3: "#7B9D6E",
        4: "#4B4B6F",
        5: "#D05E2E",
      }
    }
  }
}

Related searches

70s retro color palettegroovy vintage colorswarm disco design schemefunky earthy tonesenergetic retro UI

Palette colors

Hex values

Color 1#E07D3E
·
Color 2#F2BF42
·
Color 3#7B9D6E
·
Color 4#4B4B6F
·
Color 5#D05E2E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1:1Fail
2.8:1Fail
1.3:1Fail
2
1.7:1Fail
1.8:1Fail
4.9:1AA
2.3:1Fail
3
1:1Fail
1.8:1Fail
2.7:1Fail
1.3:1Fail
4
2.8:1Fail
4.9:1AA
2.7:1Fail
2.1:1Fail
5
1.3:1Fail
2.3:1Fail
1.3:1Fail
2.1:1Fail

Similar palettes

More like Groovy Disco Nights

View all retro