Palette

Urban Graffiti Art

A fearless blend of vivid reds, oranges, and purples, mirroring the audacious spirit of urban graffiti.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF5733#FFC300#C70039#900C3F#581845

Palette guide

How to use Urban Graffiti Art

Overview

The Urban Graffiti Art palette is a fearless blend of vivid reds, oranges, and deep purples, capturing the raw, energetic spirit of street art. With striking hues like the bold `#FF5733` and the rich, mysterious `#581845`, this palette is designed to make a statement. It's an excellent choice for designers aiming to evoke excitement and creativity, while developers can leverage its high contrast to build dynamic interfaces that grab attention. The intense interplay between colors such as `#FFC300` and `#900C3F` ensures a memorable and impactful visual experience across various digital and print mediums.

Best used for

Youth-oriented fashion brands
Event and music festival promotions
Creative portfolio websites
Gaming interfaces and streaming overlays
Edgy editorial design
Art exhibition branding

Suggested color roles

primary

Lead with `#FF5733` for dominant elements like calls to action, main headlines, or impactful hero sections.

secondary

Employ `#C70039` for supporting visual hierarchy, subheadings, or background patterns that add depth.

accent

Use `#FFC300` as a vibrant pop for notifications, small icons, or to draw immediate attention to key features.

background

Establish a strong foundation with `#581845` for dark-themed interfaces, providing a rich, contrasting canvas.

text

Pair white or a very light gray with darker colors like `#581845`. For text on `#FFC300`, a dark charcoal or black is recommended.

Accessibility notes

Ensure sufficient contrast when placing `#FFC300` text on `#FF5733` or `#C70039` to maintain readability.
For interactive elements, always check the contrast ratio of `#FF5733` against background colors like `#581845`.
Avoid using `#FFC300` as a primary text color on light backgrounds due to potential readability issues for some users.
Consider using a dark background like `#581845` with light text (e.g., white) for maximum legibility and impact.

Recommended combinations

Energetic Pop

Ideal for dynamic calls to action or banners, leveraging the bright accent against a deep background.

#FF5733 · #FFC300 · #581845

Street Vibe

Creates an expressive, layered look suitable for artistic backgrounds or multi-level graphical elements.

#C70039 · #900C3F · #FFC300

Bold Contrast

Excellent for dark-themed interfaces where text and interactive elements need to stand out vividly.

#581845 · #FF5733 · #FFC300

CSS variables

:root {
  --urban-graffiti-art-1: #FF5733;
  --urban-graffiti-art-2: #FFC300;
  --urban-graffiti-art-3: #C70039;
  --urban-graffiti-art-4: #900C3F;
  --urban-graffiti-art-5: #581845;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graffiti-art": {
        1: "#FF5733",
        2: "#FFC300",
        3: "#C70039",
        4: "#900C3F",
        5: "#581845",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#FFC300

Color 3#C70039

Color 4#900C3F

Color 5#581845

Accessibility

Contrast checker

2:1Fail

1.9:1Fail

2.9:1Fail

4.1:1AA18

2:1Fail

3.7:1AA18

5.7:1AA

8:1AAA

1.9:1Fail

3.7:1AA18

1.5:1Fail

2.1:1Fail

2.9:1Fail

5.7:1AA

1.5:1Fail

1.4:1Fail

4.1:1AA18

8:1AAA

2.1:1Fail

1.4:1Fail

Similar palettes

More like Urban Graffiti Art

View all vibrant

Alley Art Splatter

Alleyway Mural Splash

City Street Art

Electric Graffiti Wall

Graffiti Alley Chroma

Graffiti Alley Pulse