Palette

Urban Street Art

A raw urban backdrop punctuated by vibrant, expressive splashes of graffiti 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 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

#808080#FF4500#FFD700#00FF7F#4169E1

Palette guide

How to use Urban Street Art

Overview

The Urban Street Art palette captures a raw urban backdrop punctuated by vibrant, expressive splashes of graffiti art on a city wall. Featuring a balanced #808080 as its foundation, complemented by the intense #FF4500, #FFD700, #00FF7F, and #4169E1, this palette is perfect for dynamic and creative projects. Designers and developers can leverage these contrasting hues to create impactful digital media, engaging branding, and captivating print materials that convey energy, creativity, and a distinct urban flair, ensuring a memorable visual experience.

Best used for

Creative branding and advertising campaigns
Digital media and content creation for social platforms
Event marketing and posters for cultural events
Youth-oriented fashion websites and lookbooks
Art and design portfolios and showcases
Dynamic mobile app interfaces and gaming visuals

Suggested color roles

primary

Use #808080 as a versatile mid-grey, serving as a neutral, urban backdrop that grounds the vibrant accent colors.

secondary

Employ #FF4500, a bright, energetic orange, for strong calls-to-action, focal points, or impactful headlines.

accent

Reserve #00FF7F, a vivid spring green, for fresh highlights, interactive elements, or a playful, modern touch.

background

#808080 provides a balanced, neutral base that allows the vibrant accent colors to truly shine and command attention.

text

A dark charcoal or near-black (e.g., #2F2F2F) for body text ensures excellent readability against the mid-grey background.

Accessibility notes

Ensure a dark charcoal (e.g., #2F2F2F) text on #808080 background has sufficient contrast; verify WCAG AA compliance.
Use white text for #FF4500, #FFD700, #00FF7F, and #4169E1 if they are used as buttons or backgrounds for text.
Avoid using #FFD700 or #00FF7F for small body text on #808080 due to potential low contrast and readability issues.
Be mindful of color contrast for users with color vision deficiencies, especially when combining multiple vibrant hues for informational elements.

Recommended combinations

Urban Pop

Creates a striking contrast, ideal for highlighting key information, call-to-action buttons, or energetic graphic elements.

#808080 · #FF4500 · #00FF7F

Bright & Bold

Combine these three for dynamic illustrations, engaging infographics, or a playful, modern brand identity.

#FFD700 · #4169E1 · #FF4500

Grounded Energy

Use the grey as a base to anchor the vibrant blue and yellow, creating a balanced yet energetic visual appeal for UI elements.

#808080 · #4169E1 · #FFD700

CSS variables

:root {
  --urban-street-art-1: #808080;
  --urban-street-art-2: #FF4500;
  --urban-street-art-3: #FFD700;
  --urban-street-art-4: #00FF7F;
  --urban-street-art-5: #4169E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-street-art": {
        1: "#808080",
        2: "#FF4500",
        3: "#FFD700",
        4: "#00FF7F",
        5: "#4169E1",
      }
    }
  }
}

Hex values

Color 1#808080

Color 2#FF4500

Color 3#FFD700

Color 4#00FF7F

Color 5#4169E1

Accessibility

Contrast checker

1.1:1Fail

2.8:1Fail

2.9:1Fail

1.2:1Fail

1.1:1Fail

2.5:1Fail

2.6:1Fail

1.4:1Fail

2.8:1Fail

2.5:1Fail

1:1Fail

3.5:1AA18

2.9:1Fail

2.6:1Fail

1:1Fail

3.6:1AA18

1.2:1Fail

1.4:1Fail

3.5:1AA18

3.6:1AA18

Similar palettes

More like Urban Street Art