Palette

Vaporwave Synth Dreams

Bold, contrasting colors evoke the retro-futuristic aesthetic of 80s vaporwave and synth music dreams.

VibrantRetro5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vaporwave Synth Dreams 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 Vaporwave Synth Dreams.

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

Data visualization

#6A1B9A#D81B60#FBC02D#29B6F6#00BCD4

Palette guide

How to use Vaporwave Synth Dreams

Overview

The Vaporwave Synth Dreams palette evokes the bold, contrasting aesthetics of 80s vaporwave and synth music, perfect for retro-futuristic designs. With a grounding deep purple #6A1B9A, it explodes with the vibrant #D81B60 and a sunny #FBC02D. Cool blues #29B6F6 and #00BCD4 complete the collection, offering a dynamic interplay of warm and cool tones. This palette is ideal for designers looking to create engaging digital experiences, eye-catching branding, or nostalgic graphic art that combines the vibrancy of pop culture with the depth of a digital dreamscape, ensuring a distinctive and memorable visual impact.

Best used for

Retro-inspired video game interfaces
Synth-pop album cover designs
Dynamic web and app UI elements
Brand identity for creative industries
Motion graphics and animated sequences
Event posters for retro-themed parties

Suggested color roles

primary

Designate #D81B60 as the primary color for prominent calls-to-action, main headings, or focal points to command attention.

secondary

Utilize #29B6F6 for secondary information, subheadings, or larger UI components, offering a bright, contrasting cool tone.

accent

Reserve #FBC02D for high-impact accents, small icons, or highlights, providing a cheerful and energetic pop of yellow.

background

Employ #6A1B9A as the deep, atmospheric background color, allowing the brighter neons to truly stand out.

text

For body text, use white or a very light gray on the deep purple background, or a dark charcoal on lighter elements like #FBC02D or #29B6F6.

Accessibility notes

Ensure sufficient contrast between #FBC02D and lighter backgrounds; it works best as an accent on darker tones.
The deep #6A1B9A provides excellent contrast for white or light-colored text, enhancing readability.
Avoid using #D81B60 for extensive body text due to its high saturation, which can cause visual fatigue.
Test contrast for #29B6F6 when used for text on varied backgrounds to ensure WCAG AA compliance.

Recommended combinations

Dreamscape Base

Ideal for header sections, using the deep purple as a base, the pink for titles, and yellow for energetic accents.

#6A1B9A · #D81B60 · #FBC02D

Synth Wave

Excellent for gradients or layered shapes, blending the blues with the vibrant pink for a dynamic, flowing effect.

#29B6F6 · #00BCD4 · #D81B60

Pop Contrast

Combine these for striking visual contrasts in UI elements or graphic compositions, making the yellow and blue pop against purple.

#6A1B9A · #FBC02D · #29B6F6

CSS variables

:root {
  --vaporwave-synth-dreams-1: #6A1B9A;
  --vaporwave-synth-dreams-2: #D81B60;
  --vaporwave-synth-dreams-3: #FBC02D;
  --vaporwave-synth-dreams-4: #29B6F6;
  --vaporwave-synth-dreams-5: #00BCD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vaporwave-synth-dreams": {
        1: "#6A1B9A",
        2: "#D81B60",
        3: "#FBC02D",
        4: "#29B6F6",
        5: "#00BCD4",
      }
    }
  }
}

Hex values

Color 1#6A1B9A

Color 2#D81B60

Color 3#FBC02D

Color 4#29B6F6

Color 5#00BCD4

Accessibility

Contrast checker

1.9:1Fail

5.7:1AA

4.1:1AA18

1.9:1Fail

3:1Fail

2.1:1Fail

2.2:1Fail

5.7:1AA

3:1Fail

1.4:1Fail

4.1:1AA18

2.1:1Fail

1.4:1Fail

1:1Fail

4.1:1AA18

2.2:1Fail

1.4:1Fail

1:1Fail

Similar palettes

More like Vaporwave Synth Dreams

Vaporwave Synth Dreams

See it in context.

Ready when you are.

Built with Vaporwave Synth Dreams.

How to use Vaporwave Synth Dreams

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dreamscape Base

Synth Wave

Pop Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Vaporwave Synth Dreams