Back to palettes

Palette

Vaporwave Ocean Drive

A synthwave inspired blend of electric purples and glowing teals, like a futuristic sunset over the ocean.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vaporwave Ocean Drive 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 Ocean Drive.

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

Data visualization

#2C0F4A#4F1D78#9D2AE8#60D6EE#ADF6FF

Palette guide

How to use Vaporwave Ocean Drive

Overview

The Vaporwave Ocean Drive palette masterfully blends electric purples and glowing teals, evoking a futuristic sunset over a digital ocean. Anchored by deep purples like #2C0F4A and #4F1D78, it introduces a vibrant energy with the striking #9D2AE8. The cool, refreshing teals #60D6EE and #ADF6FF complete the spectrum, offering a dynamic contrast that is both serene and electrifying. This collection is ideal for designers looking to infuse their projects with a sophisticated yet retro-futuristic vibe, perfect for digital interfaces, branding, or artistic compositions that require depth, glow, and a touch of synthwave elegance.

Best used for

  • Atmospheric website backgrounds
  • Vaporwave-inspired game environments
  • Brand identity for tech startups
  • Motion graphics and animated logos
  • Album art for chillwave or synth-pop
  • Digital illustrations with depth

Suggested color roles

primary

Designate #9D2AE8 as the primary color for prominent headings, key interactive elements, or focal points to capture attention.

secondary

Employ #60D6EE as a secondary color for supporting information, subheadings, or larger UI components, offering a cool contrast.

accent

Reserve #ADF6FF for subtle highlights, small icons, or text overlays on darker backgrounds, providing a soft, luminous glow.

background

Utilize #2C0F4A as the main background color to establish a deep, atmospheric foundation that allows brighter neons to shimmer.

text

For body text, use crisp white or a very light gray on dark backgrounds, or a dark charcoal on lighter teal elements like #60D6EE for readability.

Accessibility notes

  • Ensure sufficient contrast when placing #ADF6FF text on #60D6EE backgrounds; aim for at least WCAG AA level.
  • The deep #2C0F4A offers excellent contrast for white or light-colored text, promoting readability.
  • Avoid using #9D2AE8 for extensive body text on backgrounds of similar saturation to prevent visual strain.
  • When designing interactive elements with #9D2AE8, ensure its contrast with surrounding colors is clear for user focus.

Recommended combinations

Deep Horizon

Perfect for hero sections, using the deep purple as a base, the vibrant purple for titles, and the light teal for subtle details.

#2C0F4A · #9D2AE8 · #ADF6FF

Ocean Glow

Ideal for creating gradients or layered elements, transitioning from a medium purple to light teals for a luminous effect.

#4F1D78 · #60D6EE · #ADF6FF

Cyber Sunset

Combine these for striking visual contrasts in UI elements or graphic compositions, with the dark purple as an anchor.

#9D2AE8 · #60D6EE · #2C0F4A

CSS variables

:root {
  --vaporwave-ocean-drive-1: #2C0F4A;
  --vaporwave-ocean-drive-2: #4F1D78;
  --vaporwave-ocean-drive-3: #9D2AE8;
  --vaporwave-ocean-drive-4: #60D6EE;
  --vaporwave-ocean-drive-5: #ADF6FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vaporwave-ocean-drive": {
        1: "#2C0F4A",
        2: "#4F1D78",
        3: "#9D2AE8",
        4: "#60D6EE",
        5: "#ADF6FF",
      }
    }
  }
}

Related searches

vaporwave purple teal palettesynthwave ocean colorsretro futuristic bluesdeep neon aestheticcyberpunk sunset scheme

Palette colors

Hex values

Color 1#2C0F4A
·
Color 2#4F1D78
·
Color 3#9D2AE8
·
Color 4#60D6EE
·
Color 5#ADF6FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
3.1:1AA18
9.7:1AAA
13.7:1AAA
2
1.4:1Fail
2.2:1Fail
6.9:1AA
9.8:1AAA
3
3.1:1AA18
2.2:1Fail
3.1:1AA18
4.4:1AA18
4
9.7:1AAA
6.9:1AA
3.1:1AA18
1.4:1Fail
5
13.7:1AAA
9.8:1AAA
4.4:1AA18
1.4:1Fail

Similar palettes

More like Vaporwave Ocean Drive

View all vibrant
Atomic Age
Electric Grapevine
Neon Vaporwave Nights
Retro Arcade Sunset
Retro Synth Wave
Synthwave Midnight Drive