Palette

Urban Graffiti Wall

A stark black canvas brought to life by electrifying bursts of neon blues, pinks, and yellows.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Graffiti Wall 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 Graffiti Wall.

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

Data visualization

#1A1A1A#5500FF#FF00FF#00FFFF#FFFF00

Palette guide

How to use Urban Graffiti Wall

Overview

The Urban Graffiti Wall palette transforms a stark `#1A1A1A` canvas with electrifying bursts of neon blues, pinks, and yellows. This palette is designed for projects that demand high energy, modern edginess, and a truly unforgettable visual impact. With vibrant hues like `#5500FF` (electric blue), `#FF00FF` (magenta), `#00FFFF` (cyan), and `#FFFF00` (yellow), designers can create dynamic visuals that pop. Developers will find its clear color separation excellent for building engaging, high-contrast user interfaces, ensuring that interactive elements and key information stand out dramatically against the deep, grounding background.

Best used for

Nightlife and entertainment branding
Gaming and tech interfaces
Edgy fashion and streetwear designs
Digital art installations
Event posters and flyers
Modern music video aesthetics

Suggested color roles

primary

Establish `#1A1A1A` as the dominant, dark background, providing a dramatic canvas for the neon accents.

secondary

Utilize `#5500FF` for strong supporting elements, subheadings, or to create a vibrant, cool contrast.

accent

Deploy `#FF00FF`, `#00FFFF`, or `#FFFF00` individually as high-impact accents for calls to action, alerts, or interactive states.

background

A deep `#1A1A1A` serves as the perfect dark background, allowing the neon colors to achieve maximum vibrancy and contrast.

text

For optimal readability on `#1A1A1A`, use white or a very light gray. For text on neon colors, black or a very dark charcoal is necessary.

Accessibility notes

The neon colors are highly saturated and have low contrast with each other; avoid using them for large blocks of text.
Ensure sufficient contrast when using white or light text on `#1A1A1A` backgrounds to meet WCAG AA standards.
Avoid placing neon text directly on other neon backgrounds as this will invariably fail accessibility guidelines.
For interactive elements, ensure clear visual distinction between states, using `#1A1A1A` for inactive and a neon for active.

Recommended combinations

Neon Electric

Creates a powerful, high-contrast look for dark mode interfaces, headers, or impactful graphic elements.

#1A1A1A · #5500FF · #FF00FF

Vibrant Splash

Ideal for dynamic sections, infographics, or UI elements that need clear, energetic differentiation against dark.

#00FFFF · #FFFF00 · #1A1A1A

Accent Focus

Use `#FFFF00` as a striking accent against the dark background, complemented by the cool electric blue.

#1A1A1A · #FFFF00 · #5500FF

CSS variables

:root {
  --urban-graffiti-wall-1: #1A1A1A;
  --urban-graffiti-wall-2: #5500FF;
  --urban-graffiti-wall-3: #FF00FF;
  --urban-graffiti-wall-4: #00FFFF;
  --urban-graffiti-wall-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graffiti-wall": {
        1: "#1A1A1A",
        2: "#5500FF",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#5500FF

Color 3#FF00FF

Color 4#00FFFF

Color 5#FFFF00

Accessibility

Contrast checker

2.3:1Fail

5.5:1AA

13.9:1AAA

16.2:1AAA

2.3:1Fail

2.4:1Fail

5.9:1AA

6.9:1AA

5.5:1AA

2.4:1Fail

2.5:1Fail

2.9:1Fail

13.9:1AAA

5.9:1AA

2.5:1Fail

1.2:1Fail

16.2:1AAA

6.9:1AA

2.9:1Fail

1.2:1Fail

Similar palettes

More like Urban Graffiti Wall

View all vibrant

Energetic City Mural

Street Art

Abstract Expression Burst

Alley Art Splatter

Alley Canvas Pulse

Downtown Neon Rhythm