Palette

Cosmic Glitch

A chaotic yet captivating blend of electric hues, like a vibrant signal breaking through digital static.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#FFFF00#FF0000#0000FF

Palette guide

How to use Cosmic Glitch

Overview

The Cosmic Glitch palette is a chaotic yet captivating blend of electric hues, like a vibrant signal breaking through digital static. Featuring #FF00FF, #00FFFF, #FFFF00, #FF0000, and #0000FF, this collection is perfect for designers creating energetic, playful, and futuristic digital experiences. It's particularly suitable for cyberpunk aesthetics, retro-themed interfaces, or branding that seeks to convey innovation and rebellion. Developers can integrate these striking hex codes to build visually compelling applications and websites, ensuring a consistent and electrifying user experience across various digital platforms, standing out with its bold, neon appeal.

Best used for

Cyberpunk game UI
Retro digital art
Neon club branding
Futuristic tech websites
Vibrant event promotions
Experimental graphic design

Suggested color roles

primary

#FF00FF - A strong, electric magenta that serves as an excellent base for high-energy sections or main content areas.

secondary

#00FFFF - A vibrant cyan, providing a striking contrast for supporting elements, secondary buttons, or dynamic data visualization.

accent

#FFFF00 - A powerful yellow, ideal for drawing attention to critical calls to action, urgent highlights, or interactive states.

background

Black or #000000 - Provides the ultimate contrast, allowing the vibrant neon colors to pop and create a true 'glitch' effect.

text

White or #FFFF00 - Ensures optimal readability, especially for headings and interactive elements against dark backgrounds.

Accessibility notes

High contrast is inherent, but ensure readability for color-blind users by not relying solely on color for information.
Pair #FFFF00 with black text for optimal readability, as yellow on other bright colors can be challenging.
Avoid using #FF00FF and #00FFFF directly adjacent for critical information due to potential chromatic aberration.
Test all color combinations, especially for text and interactive elements, to ensure they meet minimum WCAG AA standards.

Recommended combinations

Digital Static

Creates a vibrant, energetic background or overlay, ideal for digital glitch effects or futuristic interfaces.

#FF00FF · #00FFFF · #0000FF

Warning Signal

Perfect for drawing immediate attention to critical information, error messages, or interactive alerts.

#FF00FF · #FFFF00 · #FF0000

Neon Layers

Excellent for establishing clear visual hierarchy in complex UI, separating content blocks with bold, distinct colors.

#00FFFF · #FFFF00 · #0000FF

CSS variables

:root {
  --cosmic-glitch-1: #FF00FF;
  --cosmic-glitch-2: #00FFFF;
  --cosmic-glitch-3: #FFFF00;
  --cosmic-glitch-4: #FF0000;
  --cosmic-glitch-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-glitch": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#FF0000",
        5: "#0000FF",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFFF00

Color 4#FF0000

Color 5#0000FF

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

1.3:1Fail

2.7:1Fail

2.5:1Fail

1.2:1Fail

3.2:1AA18

6.9:1AA

2.9:1Fail

1.2:1Fail

3.7:1AA18

8:1AAA

1.3:1Fail

3.2:1AA18

3.7:1AA18

2.1:1Fail

2.7:1Fail

6.9:1AA

8:1AAA

2.1:1Fail

Similar palettes

More like Cosmic Glitch