Back to palettes

Palette

Retro Vibe

A bold and cheerful palette that brings to mind the energetic, funky styles of past decades.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F4D03F#F39C12#E74C3C#8E44AD#2ECC71

Palette guide

How to use Retro Vibe

Overview

The Retro Vibe palette is a bold and cheerful collection that instantly transports designs back to the energetic, funky styles of past decades. Featuring a bright yellow (#F4D03F), a vibrant orange (#F39C12), a striking red (#E74C3C), a deep purple (#8E44AD), and a lively green (#2ECC71), this scheme is perfect for projects that demand attention and a playful spirit. Designers can leverage these high-energy hues to create dynamic and memorable visual experiences. The contrast and saturation make it ideal for conveying enthusiasm and a touch of nostalgia.

Best used for

  • Playful branding and logos
  • 80s/90s themed event promotions
  • Children's product packaging
  • Vibrant web and app user interfaces
  • Creative marketing materials and posters
  • Fashion and textile designs with a vintage twist

Suggested color roles

primary

Use #E74C3C (Red) for call-to-action buttons or main headings to command attention.

secondary

Apply #F4D03F (Yellow) for supporting elements, banners, or section headers to add cheer.

accent

Incorporate #2ECC71 (Green) or #8E44AD (Purple) for small, impactful details or interactive states.

background

Consider a very light neutral background (e.g., near-white or light grey) to let these vibrant colors pop.

text

For optimal readability, use a dark charcoal or black text color against lighter palette elements, and white against the darker, more saturated hues like #8E44AD.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter colors like #F4D03F.
  • Avoid placing #F39C12 directly on #E74C3C for critical text due to potential low contrast for some users.
  • Use a contrast checker to validate all color pairings for WCAG AA or AAA compliance.
  • Provide clear focus indicators for interactive elements, utilizing a high-contrast palette color like #2ECC71.

Recommended combinations

Energetic Duo

Ideal for bold headlines or graphic elements needing high impact and visibility.

#E74C3C · #F4D03F · #2ECC71

Playful Pop

Excellent for whimsical illustrations, social media graphics, or playful UI components.

#F39C12 · #8E44AD · #F4D03F

Vibrant Contrast

Effective for creating strong visual separation in dashboards or multi-section layouts.

#8E44AD · #2ECC71 · #E74C3C

CSS variables

:root {
  --retro-vibe-1: #F4D03F;
  --retro-vibe-2: #F39C12;
  --retro-vibe-3: #E74C3C;
  --retro-vibe-4: #8E44AD;
  --retro-vibe-5: #2ECC71;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-vibe": {
        1: "#F4D03F",
        2: "#F39C12",
        3: "#E74C3C",
        4: "#8E44AD",
        5: "#2ECC71",
      }
    }
  }
}

Related searches

retro color schemes80s design palettevibrant fun colorsplayful web colorsbold brand colors

Palette colors

Hex values

Color 1#F4D03F
·
Color 2#F39C12
·
Color 3#E74C3C
·
Color 4#8E44AD
·
Color 5#2ECC71
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
3.9:1AA18
1.4:1Fail
2
1.5:1Fail
1.7:1Fail
2.7:1Fail
1:1Fail
3
2.5:1Fail
1.7:1Fail
1.5:1Fail
1.8:1Fail
4
3.9:1AA18
2.7:1Fail
1.5:1Fail
2.8:1Fail
5
1.4:1Fail
1:1Fail
1.8:1Fail
2.8:1Fail

Similar palettes

More like Retro Vibe

View all vibrant
Retro Futurism Funk
Jukebox Junction
Nostalgic Diner Glow
Nostalgic Soda Pop
Pixel Arcade Glow
Pop Art Canvas