Palette

Urban Street Art

Bold and gritty, inspired by dynamic murals and expressive artwork found in city alleys.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#333333#FF3366#33CCFF#FFCC00#9900CC

Palette guide

How to use Urban Street Art

Overview

The Urban Street Art palette is bold and gritty, inspired by dynamic murals and expressive artwork found in city alleys. Featuring a deep #333333 as its anchor, and complemented by the electrifying #FF3366, #33CCFF, #FFCC00, and #9900CC, this palette is designed for high-impact visual communication. Designers and developers can leverage these intense, contrasting colors to create energetic digital experiences, striking branding, and captivating print materials that resonate with a modern, urban edge, ensuring a memorable and vibrant aesthetic.

Best used for

Music and entertainment branding and websites
Youth fashion and apparel marketing
Digital marketing campaigns and advertisements
Event and festival promotion materials
Modern app interfaces and interactive design
Creative portfolio websites and art showcases

Suggested color roles

primary

Use #333333 as a deep, dark charcoal, providing a strong, grounding base for vibrant elements to truly pop.

secondary

Employ #33CCFF, a bright, energetic blue, for secondary features, navigation, or cool, modern accents.

accent

Reserve #FF3366, a bold pink-red, for high-impact calls-to-action, expressive details, or focal points.

background

#333333 serves as a versatile dark background that makes the vibrant colors truly stand out and command attention.

text

White (e.g., #FFFFFF) or a very light grey ensures excellent readability against the dark background and vibrant accents.

Accessibility notes

Ensure #FFCC00 or #33CCFF text on #333333 background meets WCAG AA contrast standards for digital readability.
Avoid placing #FF3366 text on #9900CC backgrounds due to potential color clash and insufficient contrast.
Use white or a very light grey for body text on #333333 to maximize readability and visual impact.
Provide sufficient contrast for interactive elements, especially when using brighter colors like #FFCC00 for their default states.

Recommended combinations

Dark & Vibrant

Creates a strong, modern aesthetic, ideal for headlines, bold graphics, or interactive elements that pop against a dark base.

#333333 · #FF3366 · #33CCFF

Energetic Trio

Combine these three for dynamic illustrations, call-to-action areas, or artistic features that demand attention.

#FFCC00 · #9900CC · #FF3366

Cool & Gritty

Suitable for tech-inspired designs or urban interfaces, balancing a cool blue with a dark base and a bright accent.

#33CCFF · #333333 · #FFCC00

CSS variables

:root {
  --urban-street-art-4-1: #333333;
  --urban-street-art-4-2: #FF3366;
  --urban-street-art-4-3: #33CCFF;
  --urban-street-art-4-4: #FFCC00;
  --urban-street-art-4-5: #9900CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-street-art-4": {
        1: "#333333",
        2: "#FF3366",
        3: "#33CCFF",
        4: "#FFCC00",
        5: "#9900CC",
      }
    }
  }
}

Hex values

Color 1#333333

Color 2#FF3366

Color 3#33CCFF

Color 4#FFCC00

Color 5#9900CC

Accessibility

Contrast checker

3.6:1AA18

6.8:1AA

8.4:1AAA

1.9:1Fail

3.6:1AA18

1.9:1Fail

2.3:1Fail

1.8:1Fail

6.8:1AA

1.9:1Fail

1.2:1Fail

3.5:1AA18

8.4:1AAA

2.3:1Fail

1.2:1Fail

4.3:1AA18

1.9:1Fail

1.8:1Fail

3.5:1AA18

4.3:1AA18

Similar palettes

More like Urban Street Art

Urban Street Art

See it in context.

Ready when you are.

Built with Urban Street Art.

How to use Urban Street Art

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dark & Vibrant

Energetic Trio

Cool & Gritty

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Street Art