Palette

Bubblegum Glitch

A whimsical yet edgy mix of bright pinks, purples, and cyans, reminiscent of digital mishaps with a sweet twist.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bubblegum Glitch 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 Bubblegum Glitch.

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

Data visualization

#FF00FF#00FFFF#FF1493#DA70D6#9932CC

Palette guide

How to use Bubblegum Glitch

Overview

The Bubblegum Glitch palette is a whimsical yet edgy mix of bright pinks, purples, and cyans, reminiscent of digital mishaps with a sweet twist. It features #FF00FF (pure magenta), #00FFFF (pure cyan), #FF1493 (hot pink), #DA70D6 (orchid purple), and #9932CC (dark orchid). This vibrant and energetic collection is perfect for designers and developers aiming to create bold, modern, and playful experiences. It captures a unique blend of digital aesthetic with a fun, candy-colored sensibility, ideal for projects seeking to stand out.

Best used for

Cyberpunk aesthetics and futuristic designs
Modern gaming interfaces and streaming overlays
Edgy fashion and youth culture branding
Tech-inspired art and digital media campaigns
Vibrant music event promotions and posters
Social media graphics with a bold impact

Suggested color roles

primary

Use #FF00FF or #00FFFF for high-impact calls to action or prominent graphic elements, creating an electric focal point.

secondary

Employ #FF1493 and #DA70D6 for supporting content, subheadings, or to introduce dynamic, playful contrast.

accent

Apply #9932CC for a deep, rich contrast, adding sophistication and grounding the brighter neon tones.

background

A very dark grey or black background will make these neon colors truly pop and glow, enhancing the 'glitch' effect.

text

White or a very light grey (#F0F0F0) is essential for text on these vibrant and dark colors to ensure maximum readability.

Accessibility notes

Extremely bright colors like #FF00FF and #00FFFF will require dark text if used as backgrounds; white text works well on dark backgrounds.
Ensure #FF1493, #DA70D6, and #9932CC have adequate contrast with white text, especially for smaller font sizes.
Avoid using similar bright colors for text and background, as they can cause eye strain and poor legibility.
Always verify color contrast for all text and interactive elements to meet accessibility standards.

Recommended combinations

Cyber Pop

An electric, high-energy, and vibrant combination, perfect for bold headlines or digital interfaces.

#FF00FF · #00FFFF · #FF1493

Digital Dream

Offers a deep, mysterious feel with bright accents, suitable for backgrounds or dramatic visuals.

#9932CC · #DA70D6 · #FF00FF

Glitch Effect

A dynamic, edgy, and modern combination, ideal for interactive elements or striking graphics.

#00FFFF · #FF1493 · #9932CC

CSS variables

:root {
  --bubblegum-glitch-1: #FF00FF;
  --bubblegum-glitch-2: #00FFFF;
  --bubblegum-glitch-3: #FF1493;
  --bubblegum-glitch-4: #DA70D6;
  --bubblegum-glitch-5: #9932CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bubblegum-glitch": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FF1493",
        4: "#DA70D6",
        5: "#9932CC",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FF1493

Color 4#DA70D6

Color 5#9932CC

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.1:1Fail

1.8:1Fail

2.5:1Fail

2.9:1Fail

2.3:1Fail

4.5:1AA

1.2:1Fail

2.9:1Fail

1.3:1Fail

1.6:1Fail

1.1:1Fail

2.3:1Fail

1.3:1Fail

2:1Fail

1.8:1Fail

4.5:1AA

1.6:1Fail

2:1Fail

Similar palettes

More like Bubblegum Glitch

View all vibrant

Carnival Lights Dream

Amusement Pier Neon

Bauhaus Geometry Play

Berry Patch Bliss

Building Blocks Bright

Carnival Carousel Ride