Palette

Retro Pop Dream

A vibrant explosion of playful, clashing colors straight out of a retro dream.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6B8B#8A2BE2#FFD700#00CED1#9370DB

Palette guide

How to use Retro Pop Dream

Overview

The Retro Pop Dream palette is a vibrant explosion of playful, clashing colors straight out of an 80s dream. Featuring a lively Coral Pink (#FF6B8B), majestic Blue Violet (#8A2BE2), radiant Gold (#FFD700), cool Dark Cyan (#00CED1), and a soft Medium Purple (#9370DB), this palette is designed for designers and developers seeking to create unique, imaginative, and bold visuals. Its deliberate clash of warm and cool tones provides a dynamic aesthetic, ideal for projects that aim to be both nostalgic and avant-garde, capturing a whimsical, retro-futuristic mood.

Best used for

Creative branding for fashion or beauty products
Music album art and concert promotions
Digital collages and abstract art
Retro-themed event decor and party invitations
Social media branding for personal blogs and creative ventures
UI for creative apps or indie games

Suggested color roles

primary

Use #FF6B8B (Coral Pink) as a welcoming, main brand identity, or for elements with a soft, inviting energy.

secondary

Apply #8A2BE2 (Blue Violet) to provide deep contrast, for sophisticated secondary elements, or to add depth.

accent

Leverage #FFD700 (Gold) or #00CED1 (Dark Cyan) for vibrant highlights, interactive components, and dreamlike visual effects.

background

A soft, muted version of #9370DB or a light grey (not in palette) will allow the vibrant colors to stand out prominently.

text

Dark charcoal or a deep navy (not in palette) provides excellent readability. White text works well on #8A2BE2, #00CED1, and #9370DB.

Accessibility notes

Avoid using #FFD700 text on #FF6B8B or #9370DB for body text due to potential lack of contrast.
Ensure sufficient contrast for all text, especially when pairing #9370DB with #8A2BE2 or other similar value hues.
White text works well on darker colors like #8A2BE2, #00CED1, and #9370DB for headings and important information.
Always test color combinations for WCAG AA/AAA compliance, particularly for critical user interface elements and small text.

Recommended combinations

Dreamy Synth

For digital art, synthwave aesthetics, and striking headlines that evoke a futuristic dream.

#8A2BE2 · #FFD700 · #00CED1

Vaporwave Pop

Ideal for fashion editorials, social media graphics, and retro-futuristic themed designs.

#FF6B8B · #9370DB · #00CED1

Golden Glow

Perfect for event flyers, vibrant calls to action, and decorative elements with a warm, inviting feel.

#FFD700 · #8A2BE2 · #FF6B8B

CSS variables

:root {
  --retro-pop-dream-1: #FF6B8B;
  --retro-pop-dream-2: #8A2BE2;
  --retro-pop-dream-3: #FFD700;
  --retro-pop-dream-4: #00CED1;
  --retro-pop-dream-5: #9370DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-pop-dream": {
        1: "#FF6B8B",
        2: "#8A2BE2",
        3: "#FFD700",
        4: "#00CED1",
        5: "#9370DB",
      }
    }
  }
}

Hex values

Color 1#FF6B8B

Color 2#8A2BE2

Color 3#FFD700

Color 4#00CED1

Color 5#9370DB

Accessibility

Contrast checker

2.2:1Fail

1.9:1Fail

1.4:1Fail

2.2:1Fail

4.2:1AA18

3:1AA18

1.6:1Fail

1.9:1Fail

4.2:1AA18

1.4:1Fail

2.7:1Fail

1.4:1Fail

3:1AA18

1.4:1Fail

1.9:1Fail

1.4:1Fail

1.6:1Fail

2.7:1Fail

1.9:1Fail

Similar palettes

More like Retro Pop Dream

Retro Pop Dream

See it in context.

Ready when you are.

Built with Retro Pop Dream.

How to use Retro Pop Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dreamy Synth

Vaporwave Pop

Golden Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Pop Dream