Palette

Vibrant Mural Burst

A loud explosion of dynamic, saturated colors, directly inspired by expressive and bold urban street murals.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vibrant Mural 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 Vibrant Mural Burst.

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

Data visualization

#FF0077#FF9900#00CCFF#33FF33#6633CC

Palette guide

How to use Vibrant Mural Burst

Overview

The Vibrant Mural Burst palette is an electrifying collection of highly saturated hues, perfect for projects demanding immediate attention and a youthful, rebellious edge. Inspired by urban street art, colors like the bold pink #FF0077, energetic orange #FF9900, dynamic sky blue #00CCFF, and vibrant lime green #33FF33 create a powerful visual impact. This palette is ideal for designers and developers aiming to convey excitement, creativity, and a modern, expressive aesthetic. The deep purple #6633CC offers a grounding counterpoint to the brighter tones, ensuring versatility. Use this palette to inject raw energy and artistic flair into your digital and print designs, making a memorable statement.

Best used for

Streetwear brand identity and marketing
Event promotions (music festivals, art shows)
Youth-focused app interfaces and digital content
Bold website hero sections and landing pages
Digital art, illustrations, and motion graphics
Interactive displays and experiential design

Suggested color roles

primary

Use #FF0077 for impactful calls-to-action, key headlines, or brand elements that demand immediate attention.

secondary

Employ #FF9900 as a supporting accent for subheadings, secondary buttons, or to highlight important information.

accent

Integrate #00CCFF or #33FF33 for interactive states, small icons, or graphic details to add a pop of contrast.

background

Opt for a dark neutral like charcoal or a deep tone like #6633CC to make the other vibrant colors truly pop and stand out.

text

For optimal readability, use a strong contrast. White text works well on #FF0077, #FF9900, and #6633CC. For lighter backgrounds, a dark gray or black is recommended.

Accessibility notes

Ensure sufficient contrast when pairing vibrant colors, especially for text. Many direct pairings will fail WCAG AA.
Use #6633CC or a dark neutral background to provide visual relief and improve readability for text elements.
Avoid using #33FF33 and #FF9900 together for small text due to potential issues for colorblind users.
Prioritize white or black text on the most saturated colors like #FF0077 and #FF9900 for maximum legibility.

Recommended combinations

Dynamic Duo

Excellent for high-energy call-to-action buttons, vibrant headlines, and striking graphic elements.

#FF0077 · #FF9900 · #00CCFF

Urban Depth

Ideal for creating depth in backgrounds, section dividers, or as a base for overlaid lighter graphics.

#6633CC · #00CCFF · #33FF33

Energetic Pop

Perfect for interactive elements, icons, small highlights, or progress indicators that need to stand out.

#FF9900 · #FF0077 · #33FF33

CSS variables

:root {
  --vibrant-mural-burst-1: #FF0077;
  --vibrant-mural-burst-2: #FF9900;
  --vibrant-mural-burst-3: #00CCFF;
  --vibrant-mural-burst-4: #33FF33;
  --vibrant-mural-burst-5: #6633CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vibrant-mural-burst": {
        1: "#FF0077",
        2: "#FF9900",
        3: "#00CCFF",
        4: "#33FF33",
        5: "#6633CC",
      }
    }
  }
}

Hex values

Color 1#FF0077

Color 2#FF9900

Color 3#00CCFF

Color 4#33FF33

Color 5#6633CC

Accessibility

Contrast checker

1.8:1Fail

2:1Fail

2.8:1Fail

1.9:1Fail

1.8:1Fail

1.1:1Fail

1.6:1Fail

3.4:1AA18

2:1Fail

1.1:1Fail

1.4:1Fail

3.8:1AA18

2.8:1Fail

1.6:1Fail

1.4:1Fail

5.3:1AA

1.9:1Fail

3.4:1AA18

3.8:1AA18

5.3:1AA

Similar palettes

More like Vibrant Mural Burst