Palette

Urban Graffiti Wall

A bold and energetic mix of electric hues that capture the spontaneous artistry and vibrant spirit of city street graffiti.

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

#6A0DAD#FF7F00#7CFC00#00CED1#A52A2A

Palette guide

How to use Urban Graffiti Wall

Overview

The Urban Graffiti Wall palette is a bold and energetic mix of electric hues that capture the spontaneous artistry and vibrant spirit of city street graffiti. Featuring a striking purple `#6A0DAD`, dynamic orange `#FF7F00`, and vivid green `#7CFC00`, this palette is designed for projects that demand attention and a rebellious flair. Designers can leverage its high-impact color combinations for creating truly memorable visuals, while developers will appreciate the distinct separation of colors for building engaging and interactive interfaces. The inclusion of refreshing `#00CED1` and earthy `#A52A2A` ensures a versatile spectrum for expressive design.

Best used for

Youth-oriented fashion marketing
Creative art and design portfolios
Event and concert promotions
Gaming and digital media platforms
Streetwear brand identity
Abstract digital art

Suggested color roles

primary

Utilize `#6A0DAD` as a deep, captivating primary color for main headings and brand identity elements.

secondary

Apply `#FF7F00` for supporting graphics, subheadings, or to add warmth and energy to sections.

accent

Inject a vibrant pop with `#7CFC00` for calls to action, highlights, or interactive components that need to stand out.

background

A neutral dark gray or black is recommended as a background to let these electric colors truly shine and provide contrast.

text

For text on dark backgrounds, white or a very light gray is recommended. For text on lighter vibrant colors, black or a dark charcoal is ideal.

Accessibility notes

The highly saturated colors like `#FF7F00` and `#7CFC00` have low contrast with each other; avoid using them together for text.
Ensure sufficient contrast when placing any of these vibrant colors as text on a background, often requiring white or black text.
Avoid using `#A52A2A` as a background for light text without careful contrast checking due to its mid-tone value.
For interactive elements, ensure clear visual feedback through sufficient contrast for active and inactive states.

Recommended combinations

Electric Pop

Creates a high-energy, vibrant combination perfect for calls to action, banners, or dynamic graphic elements.

#6A0DAD · #FF7F00 · #7CFC00

Urban Contrast

Ideal for layered backgrounds or UI elements, offering a sophisticated yet edgy interplay of cool and warm tones.

#6A0DAD · #00CED1 · #A52A2A

Vivid Accents

Use these three for distinct, vibrant accents against a neutral backdrop, drawing attention to key features.

#FF7F00 · #7CFC00 · #00CED1

CSS variables

:root {
  --urban-graffiti-wall-5-1: #6A0DAD;
  --urban-graffiti-wall-5-2: #FF7F00;
  --urban-graffiti-wall-5-3: #7CFC00;
  --urban-graffiti-wall-5-4: #00CED1;
  --urban-graffiti-wall-5-5: #A52A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graffiti-wall-5": {
        1: "#6A0DAD",
        2: "#FF7F00",
        3: "#7CFC00",
        4: "#00CED1",
        5: "#A52A2A",
      }
    }
  }
}

Hex values

Color 1#6A0DAD

Color 2#FF7F00

Color 3#7CFC00

Color 4#00CED1

Color 5#A52A2A

Accessibility

Contrast checker

3.6:1AA18

6.9:1AA

4.7:1AA

1.3:1Fail

3.6:1AA18

1.9:1Fail

1.3:1Fail

2.8:1Fail

6.9:1AA

1.9:1Fail

1.5:1Fail

5.3:1AA

4.7:1AA

1.3:1Fail

1.5:1Fail

3.6:1AA18

1.3:1Fail

2.8:1Fail

5.3:1AA

3.6:1AA18

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

Electric Pop

Urban Contrast

Vivid Accents

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Graffiti Wall