Palette

Urban Graffiti Wall

A dynamic burst of bright, contrasting colors against dark grays, mirroring the vivid energy of street art on a city wall.

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

#212121#FF5733#DAF7A6#3498DB#9B59B6

Palette guide

How to use Urban Graffiti Wall

Overview

The Urban Graffiti Wall palette presents a dynamic burst of bright, contrasting colors against a grounding `#212121` dark gray, mirroring the vivid energy of street art on a city wall. With striking hues like `#FF5733` (red-orange), `#DAF7A6` (light green), and `#3498DB` (blue), this palette is designed for bold expression. Designers will find it excellent for projects demanding an edgy, modern, and energetic aesthetic, while developers can leverage its clear color distinctions for creating high-impact user interfaces and visually compelling interactive elements. The inclusion of `#9B59B6` (purple) further enhances its versatility and artistic appeal.

Best used for

Streetwear and youth culture brands
Creative portfolio websites
Event and festival promotions
Gaming and esports branding
Dynamic digital advertising
Modern art exhibition materials

Suggested color roles

primary

Establish `#212121` as the dominant dark background, providing a strong, urban canvas.

secondary

Utilize `#3498DB` for supporting elements, subheadings, or as a cool accent against the darker base.

accent

Deploy `#FF5733` as a powerful accent for calls to action, highlights, or to infuse a sense of urgency and energy.

background

A deep `#212121` is ideal for backgrounds, making the vibrant colors pop dramatically and enhancing readability for light text.

text

For text on `#212121`, use white or `#DAF7A6`. For text on `#DAF7A6`, a dark charcoal or black is recommended.

Accessibility notes

Ensure `#DAF7A6` text on `#212121` backgrounds provides sufficient contrast for readability.
Avoid using `#FF5733` or `#9B59B6` for large blocks of text, as their saturation can impact legibility.
Check contrast ratios for interactive elements using colors like `#3498DB` against various backgrounds.
When placing text on `#DAF7A6`, use a dark contrasting color like `#212121` to ensure accessibility.

Recommended combinations

Urban Pop

Creates a vibrant, high-contrast look suitable for headers, calls to action, or graphic elements.

#212121 · #FF5733 · #DAF7A6

Cool Graffiti

Ideal for creating a sophisticated yet edgy feel in backgrounds or layered UI components.

#212121 · #3498DB · #9B59B6

Energetic Accent

Use `#FF5733` as a dynamic accent against the dark background, complemented by a cool blue.

#212121 · #FF5733 · #3498DB

CSS variables

:root {
  --urban-graffiti-wall-4-1: #212121;
  --urban-graffiti-wall-4-2: #FF5733;
  --urban-graffiti-wall-4-3: #DAF7A6;
  --urban-graffiti-wall-4-4: #3498DB;
  --urban-graffiti-wall-4-5: #9B59B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graffiti-wall-4": {
        1: "#212121",
        2: "#FF5733",
        3: "#DAF7A6",
        4: "#3498DB",
        5: "#9B59B6",
      }
    }
  }
}

Hex values

Color 1#212121

Color 2#FF5733

Color 3#DAF7A6

Color 4#3498DB

Color 5#9B59B6

Accessibility

Contrast checker

5.1:1AA

13.7:1AAA

5.1:1AA

3.4:1AA18

5.1:1AA

2.7:1Fail

1:1Fail

1.5:1Fail

13.7:1AAA

2.7:1Fail

4:1AA18

5.1:1AA

1:1Fail

2.7:1Fail

1.5:1Fail

3.4:1AA18

1.5:1Fail

4:1AA18

1.5: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

Urban Pop

Cool Graffiti

Energetic Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Graffiti Wall