Palette

Urban Graffiti Wall

Bold, clashing colors spray-painted against cool concrete, capturing the raw energy of urban street art.

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

#DCDCDC#00FF00#FF00FF#FFA500#00BFFF

Palette guide

How to use Urban Graffiti Wall

Overview

The Urban Graffiti Wall palette captures the raw energy of street art with bold, clashing colors spray-painted against cool concrete. Featuring the bright neutrality of `#DCDCDC` contrasted with electrifying hues like `#00FF00` (lime green) and `#FF00FF` (magenta), this palette is inherently dynamic. Designers can harness this vibrant mix for projects that need to convey spontaneity and urban flair, while developers will appreciate the distinct color separation for creating engaging and high-impact user interfaces. The inclusion of `#FFA500` (orange) and `#00BFFF` (sky blue) ensures a rich, versatile spectrum for truly expressive designs.

Best used for

Youth-focused marketing campaigns
Creative event branding
Streetwear and urban fashion websites
Interactive digital art installations
Gaming and entertainment platforms
Dynamic social media graphics

Suggested color roles

primary

Utilize `#DCDCDC` as a neutral base for backgrounds and foundational elements, mimicking a concrete wall.

secondary

Apply `#00BFFF` for supporting graphical elements or interactive components that require a cool, clear presence.

accent

Unleash `#00FF00` or `#FF00FF` as vibrant accents for calls to action, highlights, or to add energetic pops of color.

background

A light `#DCDCDC` background provides a clean, neutral canvas that makes the vibrant graffiti colors truly stand out.

text

For text on `#DCDCDC`, use black or a dark charcoal. For text on the vibrant colors, white or a very light gray is recommended.

Accessibility notes

Exercise caution when using vibrant colors like `#00FF00` or `#FF00FF` for large blocks of text; prioritize readability with sufficient contrast.
Ensure `#DCDCDC` provides enough contrast when used as a background for any of the bright colors as text.
The combination of bright colors like `#FFA500` and `#00BFFF` as text on each other will likely fail accessibility standards.
For interactive elements, use a strong contrast ratio, e.g., `#00FF00` buttons on a `#DCDCDC` background, with clear text.

Recommended combinations

Graffiti Pop

Creates a bold, contrasting effect for headers, banners, or graphic elements against a neutral background.

#DCDCDC · #00FF00 · #FF00FF

Urban Energy

Ideal for dynamic sections, infographics, or interactive maps where different elements need to stand out.

#00BFFF · #FFA500 · #DCDCDC

Neon Flare

Use this trio for vibrant accents on a neutral canvas, drawing attention to key features or promotions.

#DCDCDC · #00FF00 · #FFA500

CSS variables

:root {
  --urban-graffiti-wall-2-1: #DCDCDC;
  --urban-graffiti-wall-2-2: #00FF00;
  --urban-graffiti-wall-2-3: #FF00FF;
  --urban-graffiti-wall-2-4: #FFA500;
  --urban-graffiti-wall-2-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graffiti-wall-2": {
        1: "#DCDCDC",
        2: "#00FF00",
        3: "#FF00FF",
        4: "#FFA500",
        5: "#00BFFF",
      }
    }
  }
}

Hex values

Color 1#DCDCDC

Color 2#00FF00

Color 3#FF00FF

Color 4#FFA500

Color 5#00BFFF

Accessibility

Contrast checker

1:1Fail

2.3:1Fail

1.4:1Fail

1.5:1Fail

1:1Fail

2.3:1Fail

1.4:1Fail

1.5:1Fail

2.3:1Fail

1.6:1Fail

1.5:1Fail

1.4:1Fail

1.6:1Fail

1.1:1Fail

1.5:1Fail

1.1:1Fail

Similar palettes

More like Urban Graffiti Wall

Urban Graffiti Wall

See it in context.

Ready when you are.

Built with Urban Graffiti Wall.

How to use Urban Graffiti Wall

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Graffiti Pop

Urban Energy

Neon Flare

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Graffiti Wall