Palette

Vibrant Alley Mural

Bold, saturated colors exploding with the raw, energetic spirit of street art.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

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

Palette guide

How to use Vibrant Alley Mural

Overview

The Vibrant Alley Mural palette explodes with the raw, energetic spirit of street art, featuring a collection of bold, saturated primary and secondary colors. With #FF00FF (magenta), #00FF00 (lime green), #FFFF00 (yellow), #0000FF (blue), and #FF0000 (red), this palette is designed for maximum impact and vivacity. It’s perfect for designers aiming to create dynamic, youthful, and attention-grabbing visuals that convey excitement and urban creativity. This high-energy spectrum demands confident application to truly shine. Developers can leverage these intense hues to build user interfaces that are lively, engaging, and unforgettable, ideal for modern and expressive digital experiences.

Best used for

Streetwear brand marketing
Youth-focused digital campaigns
Event promotion (music festivals, art shows)
Graffiti or urban art portfolios
Creative agency branding
Children's entertainment platforms

Suggested color roles

primary

Use #FF0000 as a bold primary for main calls-to-action, headers, or energetic brand elements, demanding immediate attention.

secondary

Apply #0000FF for supporting sections, navigation, or strong graphical accents, providing a deep, vibrant contrast.

accent

Highlight key information or interactive elements with #FFFF00 or #00FF00, their luminosity ensuring high visibility and excitement.

background

For backgrounds, use a neutral dark gray or black to make the vibrant colors pop. Alternatively, #0000FF or #FF0000 can be used with white text for a bold statement.

text

For text, white or a very light gray is essential against these saturated colors. Black can be used sparingly on #FFFF00 for large headings only.

Accessibility notes

Due to extreme saturation, contrast is critical. Always use white or black text on these colors and check WCAG AA/AAA compliance.
Avoid using any of these colors as text on another vibrant color without very careful contrast checking (e.g., #FF00FF text on #00FF00 background).
Be mindful of color-blind users; rely on more than just color difference for conveying information, especially with red/green combinations.
Ensure interactive elements have clear hover/focus states that are not solely color-dependent, due to the high vibrancy.

Recommended combinations

Urban Pop

Creates a classic, high-energy primary color scheme, perfect for bold statements and dynamic interfaces.

#FF0000 · #0000FF · #FFFF00

Neon Alley

Ideal for a vibrant, electrifying aesthetic, suitable for modern graphics, animations, or youthful branding.

#FF00FF · #00FF00 · #FFFF00

Graffiti Clash

Offers a strong, contrasting impact for edgy designs, call-out boxes, or attention-grabbing promotional materials.

#0000FF · #FF00FF · #FF0000

CSS variables

:root {
  --vibrant-alley-mural-1: #FF00FF;
  --vibrant-alley-mural-2: #00FF00;
  --vibrant-alley-mural-3: #FFFF00;
  --vibrant-alley-mural-4: #0000FF;
  --vibrant-alley-mural-5: #FF0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vibrant-alley-mural": {
        1: "#FF00FF",
        2: "#00FF00",
        3: "#FFFF00",
        4: "#0000FF",
        5: "#FF0000",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FF00

Color 3#FFFF00

Color 4#0000FF

Color 5#FF0000

Accessibility

Contrast checker

2.3:1Fail

2.9:1Fail

2.7:1Fail

1.3:1Fail

2.3:1Fail

1.3:1Fail

6.3:1AA

2.9:1Fail

1.3:1Fail

8:1AAA

3.7:1AA18

2.7:1Fail

6.3:1AA

8:1AAA

2.1:1Fail

1.3:1Fail

2.9:1Fail

3.7:1AA18

2.1:1Fail

Similar palettes

More like Vibrant Alley Mural

Vibrant Alley Mural

See it in context.

Ready when you are.

Built with Vibrant Alley Mural.

How to use Vibrant Alley Mural

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Urban Pop

Neon Alley

Graffiti Clash

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Vibrant Alley Mural