Palette

Pixel Bloom Burst

A pixelated explosion of primary and secondary colors, reminiscent of 8-bit game graphics.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pixel Bloom Burst 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 Pixel Bloom Burst.

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

Data visualization

#FF00FF#00FF00#FFFF00#FF0000#0000FF

Palette guide

How to use Pixel Bloom Burst

Overview

The "Pixel Bloom Burst" palette offers an electrifying, retro-inspired burst of primary and secondary colors, ideal for projects seeking a playful, energetic, and distinctly digital aesthetic. Featuring bold hues like #FF00FF (Magenta), #00FF00 (Lime Green), #FFFF00 (Bright Yellow), #FF0000 (Vivid Red), and #0000FF (Electric Blue), this scheme evokes the nostalgia of 8-bit gaming and early digital art. Designers and developers can leverage its high-saturation impact to create memorable interfaces, dynamic branding, and engaging interactive experiences. Its inherent vibrancy demands confident application to truly shine, making it perfect for designs that need to grab attention and convey a fun, modern-retro vibe.

Best used for

Retro video game UI and marketing
Children's educational content and apps
Festival and event branding
Digital art installations and animations
Youth-oriented product packaging
Interactive web and mobile application elements

Suggested color roles

primary

#FF0000 (Vivid Red) - Establishes a strong, attention-grabbing foundation, perfect for main calls-to-action or hero sections.

secondary

#0000FF (Electric Blue) - Provides a cool, stable counterpoint, excellent for navigation, active states, or supporting graphic elements.

accent

#FFFF00 (Bright Yellow) - Delivers high-impact highlights, ideal for notifications, warnings, or small, crucial interactive elements.

background

A deep charcoal or pure black is recommended to allow the vibrant palette colors to truly pop without competing.

text

For maximum readability, use pure white (#FFFFFF) on darker backgrounds or a very dark charcoal for text placed on lighter, less saturated areas if the palette allows for it.

Accessibility notes

Always test color contrast ratios, especially for text and interactive elements, as many combinations within this vibrant palette will fail WCAG standards.
Avoid using #FF0000 (Red) and #00FF00 (Green) together for conveying information, as this poses significant challenges for colorblind users.
Ensure critical information is not solely conveyed by color; utilize icons, text labels, or patterns as supplementary indicators.
Provide options for users to switch to a high-contrast mode or a more subdued palette if extensive text content is present.

Recommended combinations

Energetic Contrast

Ideal for bold headlines, primary calls-to-action, or dynamic data visualizations that need to stand out.

#FF0000 · #FFFF00 · #0000FF

Retro Pop

Creates a playful, almost neon effect suitable for pixel art graphics, playful icons, or vibrant background patterns.

#FF00FF · #00FF00 · #FFFF00

Primary Focus

A classic, strong combination for brand logos, UI elements needing clear distinction, or conveying an adventurous spirit.

#0000FF · #FF0000 · #00FF00

CSS variables

:root {
  --pixel-bloom-burst-1: #FF00FF;
  --pixel-bloom-burst-2: #00FF00;
  --pixel-bloom-burst-3: #FFFF00;
  --pixel-bloom-burst-4: #FF0000;
  --pixel-bloom-burst-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pixel-bloom-burst": {
        1: "#FF00FF",
        2: "#00FF00",
        3: "#FFFF00",
        4: "#FF0000",
        5: "#0000FF",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FF00

Color 3#FFFF00

Color 4#FF0000

Color 5#0000FF

Accessibility

Contrast checker

2.3:1Fail

2.9:1Fail

1.3:1Fail

2.7:1Fail

2.3:1Fail

1.3:1Fail

2.9:1Fail

6.3:1AA

2.9:1Fail

1.3:1Fail

3.7:1AA18

8:1AAA

1.3:1Fail

2.9:1Fail

3.7:1AA18

2.1:1Fail

2.7:1Fail

6.3:1AA

8:1AAA

2.1:1Fail

Similar palettes

More like Pixel Bloom Burst

Pixel Bloom Burst

See it in context.

Ready when you are.

Built with Pixel Bloom Burst.

How to use Pixel Bloom Burst

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Energetic Contrast

Retro Pop

Primary Focus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pixel Bloom Burst