Palette

Pixelated Dream

Bold, bright primary and secondary colors spark a nostalgic feeling of classic 8-bit games and digital artistry.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#00BFFF#8A2BE2#FF00FF#FFFF00

Palette guide

How to use Pixelated Dream

Overview

The Pixelated Dream palette features bold, bright primary and secondary colors that instantly spark a nostalgic feeling of classic 8-bit games and digital artistry. Dominated by electric cyan (#00FFFF), a softer sky blue (#00BFFF), and a deep violet (#8A2BE2), it creates a dreamy, tech-inspired base. Vibrant magenta (#FF00FF) and brilliant yellow (#FFFF00) add energetic pops, making this palette versatile for designers and developers looking to craft visually striking and memorable digital experiences. It's perfect for projects that aim for a retro-futuristic or synthwave aesthetic.

Best used for

Digital art and illustration
Synthwave and vaporwave aesthetics
Retro gaming interfaces and assets
Creative coding projects and generative art
Vibrant app design and branding
Streaming channel branding and overlays

Suggested color roles

primary

#00FFFF serves as an energetic and inviting primary, ideal for main calls to action, prominent headlines, or key graphical elements.

secondary

#FF00FF provides a bold, engaging contrast, perfect for secondary actions, active states, or distinguishing sections.

accent

#FFFF00 is a brilliant accent, excellent for highlights, warnings, or small interactive details that demand attention.

background

A deep, dreamy base like #8A2BE2 or a very dark blue provides an immersive backdrop, allowing the brighter colors to glow.

text

For optimal readability, use #FFFF00 or #00FFFF for text on dark backgrounds. For lighter backgrounds, a dark charcoal or black is recommended.

Accessibility notes

Ensure sufficient contrast for text, especially for #FFFF00 on darker backgrounds like #8A2BE2.
Avoid using #00BFFF on #00FFFF for small text, as the similarity in hue can make it hard to read.
Consider using larger font sizes or bolding for critical information when employing these vibrant colors.
Always verify color combinations meet WCAG contrast guidelines for interactive elements and essential content.

Recommended combinations

Dreamy Synth

Creates a cool, ethereal retro vibe, suitable for immersive backgrounds, transition screens, or stylized branding.

#00BFFF · #8A2BE2 · #FF00FF

Neon Burst

A high-impact, energetic combination, perfect for immediate attention-grabbing elements or dynamic calls to action.

#FF00FF · #FFFF00 · #00FFFF

8-bit Pop

A classic, vibrant pairing that evokes immediate retro gaming nostalgia, great for UI elements and bold graphics.

#00FFFF · #FFFF00 · #8A2BE2

CSS variables

:root {
  --pixelated-dream-1: #00FFFF;
  --pixelated-dream-2: #00BFFF;
  --pixelated-dream-3: #8A2BE2;
  --pixelated-dream-4: #FF00FF;
  --pixelated-dream-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pixelated-dream": {
        1: "#00FFFF",
        2: "#00BFFF",
        3: "#8A2BE2",
        4: "#FF00FF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#00BFFF

Color 3#8A2BE2

Color 4#FF00FF

Color 5#FFFF00

Accessibility

Contrast checker

1.7:1Fail

4.8:1AA

2.5:1Fail

1.2:1Fail

1.7:1Fail

2.8:1Fail

1.5:1Fail

2:1Fail

4.8:1AA

2.8:1Fail

1.9:1Fail

5.5:1AA

2.5:1Fail

1.5:1Fail

1.9:1Fail

2.9:1Fail

1.2:1Fail

2:1Fail

5.5:1AA

2.9:1Fail

Similar palettes

More like Pixelated Dream

View all vibrant

Pixelated Arcade Glitch