Back to palettes

Palette

Matrix Glitch Echo

Vibrant greens and purples create an aesthetic of digital distortion, reminiscent of a glitch in the matrix, raw and bold.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FF00#33CC33#669966#996699#CC33CC

Palette guide

How to use Matrix Glitch Echo

Overview

The "Matrix Glitch Echo" palette offers a dynamic, cyberpunk aesthetic, blending vibrant digital greens and purples. Featuring electric #00FF00 and #CC33CC alongside their more subdued counterparts like #33CC33, #669966, and #996699, this collection evokes a sense of digital distortion and high-tech energy. Designers can leverage this palette to create interfaces that feel cutting-edge and immersive, perfect for projects requiring a bold, unconventional visual identity. Developers will find these hues versatile for crafting distinct UI states, progress indicators, or immersive background elements, ensuring a consistent and impactful brand presence in digital realms.

Best used for

  • Cyberpunk game UI and character design
  • Digital art and motion graphics for tech events
  • Innovative tech startup branding and website design
  • Music album covers for electronic or synthwave genres
  • Futuristic product packaging and promotional materials
  • Stream overlays and content creation branding

Suggested color roles

primary

#00FF00 (Bright Green). Use this vibrant hue for primary calls-to-action, key interactive elements, or striking headlines to capture immediate attention and convey a sense of digital urgency.

secondary

#CC33CC (Medium Purple). Ideal for secondary buttons, navigation accents, or complementary data visualizations, providing a strong contrast to the primary green while maintaining the energetic, glitch aesthetic.

accent

#33CC33 (Medium Green). Employ this slightly softer green for hover states, progress bars, or subtle decorative elements, offering a visual break without losing the palette's core vibrancy.

background

#669966 (Muted Green). A darker, more subdued green suitable for main content areas or background panels, allowing brighter elements to pop while providing a stable, digital-themed foundation.

text

For dark backgrounds like #669966, use a light text color like pure white (#FFFFFF) or a very light gray. For lighter elements, a deep charcoal (#333333) or black (#000000) will ensure readability.

Accessibility notes

  • Ensure sufficient contrast between the bright #00FF00 or #CC33CC and any text placed upon them.
  • Avoid using #669966 and #996699 together for critical information, as their muted tones and similar lightness values can cause low contrast.
  • Test color combinations with color blindness simulators, especially for distinguishing between the greens and purples.
  • Pair the vibrant hues with a strong neutral (like black or white) for text to meet WCAG contrast guidelines effectively.

Recommended combinations

Digital Core

For main interfaces where high energy and distinct sections are needed, with #669966 providing a grounding background.

#00FF00 · #CC33CC · #669966

Glitch Highlight

Excellent for highlighting interactive elements or data points, using the muted purple as a supporting background or accent.

#CC33CC · #33CC33 · #996699

System Status

Effective for status indicators or feedback messages, where the bright green signifies success and the purples denote warnings or neutral states.

#00FF00 · #996699 · #669966

CSS variables

:root {
  --matrix-glitch-echo-1: #00FF00;
  --matrix-glitch-echo-2: #33CC33;
  --matrix-glitch-echo-3: #669966;
  --matrix-glitch-echo-4: #996699;
  --matrix-glitch-echo-5: #CC33CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "matrix-glitch-echo": {
        1: "#00FF00",
        2: "#33CC33",
        3: "#669966",
        4: "#996699",
        5: "#CC33CC",
      }
    }
  }
}

Related searches

cyberpunk color schemeglitch art palettedigital green purple colorsfuturistic ui design palettevibrant tech brand colors

Palette colors

Hex values

Color 1#00FF00
·
Color 2#33CC33
·
Color 3#669966
·
Color 4#996699
·
Color 5#CC33CC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.2:1AA18
3.1:1AA18
2
1.6:1Fail
1.6:1Fail
2.1:1Fail
2:1Fail
3
2.4:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
4
3.2:1AA18
2.1:1Fail
1.3:1Fail
1:1Fail
5
3.1:1AA18
2:1Fail
1.3:1Fail
1:1Fail

Similar palettes

More like Matrix Glitch Echo

View all vibrant
Cybernetic Glitch Stream
Cyberpunk Glitchscape
Digital Glitch Matrix
Neo Pixel Glitch
Abstract Pop Glitch
Aurora Borealis