Palette

Urban Art Burst

An energetic palette capturing the raw creativity and bold colors of a city's vibrant street art.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Art 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 Urban Art Burst.

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

Data visualization

#FF00FF#00FFFF#39FF14#E200EE#00CFFF

Palette guide

How to use Urban Art Burst

Overview

The Urban Art Burst palette is a jolt of electric energy, perfect for designs demanding immediate attention. Featuring vibrant neons like the dazzling magenta #FF00FF, the electric cyan #00FFFF, and the shocking lime green #39FF14, this collection captures the raw, unapologetic spirit of street art. Designers can leverage the deep violet #E200EE and the bright sky blue #00CFFF to create dynamic contrasts and gradients. This palette is ideal for projects that aim to be bold, youthful, and cutting-edge, bringing an urban edge to digital and print media alike. Its high-contrast nature makes it versatile for energetic branding or interactive interfaces.

Best used for

youthful branding
event promotions
digital art installations
gaming interfaces
fashion editorials
music festival graphics

Suggested color roles

primary

Use #FF00FF as a dominant, attention-grabbing hue for key calls to action or brand statements.

secondary

Employ #00FFFF to provide a cool, vibrant contrast, perfect for subheadings or interactive elements.

accent

Leverage #39FF14 sparingly for highlights, icons, or to draw the eye to specific features with its intense glow.

background

A dark neutral background (e.g., charcoal #222222) would allow the vibrant colors to truly pop.

text

For maximum readability, use a crisp white or light gray against the darker background, or a deep black against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for text against vibrant backgrounds; white or black text will often be most legible.
Avoid pairing similar intensity neons for text and background without careful contrast checking.
Use distinct colors like #FF00FF and #00FFFF for interactive elements to aid colorblind users.
Provide alternative text descriptions for color-coded information to enhance inclusivity.

Recommended combinations

Neon Pop

For striking headlines or graphic elements demanding high energy and contrast.

#FF00FF · #00FFFF · #39FF14

Electric Gradient

Ideal for backgrounds, hero sections, or animated transitions to create depth.

#E200EE · #00CFFF · #00FFFF

Vibrant Contrast

Effective for call-to-action buttons or highlighted information against a dark neutral.

#FF00FF · #39FF14 · #00CFFF

CSS variables

:root {
  --urban-art-burst-1: #FF00FF;
  --urban-art-burst-2: #00FFFF;
  --urban-art-burst-3: #39FF14;
  --urban-art-burst-4: #E200EE;
  --urban-art-burst-5: #00CFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-art-burst": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#39FF14",
        4: "#E200EE",
        5: "#00CFFF",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#39FF14

Color 4#E200EE

Color 5#00CFFF

Accessibility

Contrast checker

2.5:1Fail

2.3:1Fail

1.2:1Fail

1.7:1Fail

2.5:1Fail

1.1:1Fail

3.1:1AA18

1.5:1Fail

2.3:1Fail

1.1:1Fail

2.8:1Fail

1.4:1Fail