Palette

Urban Street Art

The raw, expressive energy of city street art, contrasting vivid colors against gritty urban backdrops.

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

#2F4F4F#FF4500#00BFFF#90EE90#FFFF00

Palette guide

How to use Urban Street Art

Overview

The Urban Street Art palette captures the raw, expressive energy of city street art, contrasting vivid colors against gritty urban backdrops. Featuring a deep #2F4F4F alongside the electrifying #FF4500, #00BFFF, #90EE90, and #FFFF00, this palette is designed for bold, dynamic projects. Designers and developers can leverage these intense hues to create impactful digital experiences, striking branding, and captivating print materials that resonate with a youthful, unconventional spirit, ensuring a truly unique and energetic visual presence.

Best used for

Indie game development and game UI
Music album art and concert promotions
Youth-oriented social media campaigns
Streetwear brand identity and apparel design
Event graphics, posters, and festival branding
Digital illustration and comic book art

Suggested color roles

primary

Use #2F4F4F as a deep, dark cyan-grey, providing a grounding, urban backdrop for other vibrant colors.

secondary

Employ #FF4500, a fiery orange, for strong emphasis, energetic elements, or critical calls-to-action.

accent

Reserve #00BFFF, a bright, clear blue, for highlights, interactive elements, or to introduce a cool, striking contrast.

background

#2F4F4F serves as a rich, dark base, allowing the vibrant accent colors to truly pop and command attention.

text

White (e.g., #FFFFFF) or a very light grey ensures high visibility and complements the bold, saturated nature of the palette.

Accessibility notes

Ensure #FFFF00 or #90EE90 text on #2F4F4F background meets WCAG AA contrast standards for digital readability.
Avoid using #90EE90 text on #FFFF00 backgrounds due to extremely low contrast and potential for visual discomfort.
Use white or very light grey for body text on dark backgrounds like #2F4F4F to maximize readability and impact.
Be mindful of colorblind users when combining multiple vibrant colors for informational elements; use iconography or patterns.

Recommended combinations

Gritty Pop

Perfect for creating high-impact visuals with a strong urban feel, contrasting dark with bright, energetic hues.

#2F4F4F · #FF4500 · #FFFF00

Cool & Bright

Ideal for modern interfaces, digital art, or illustrations needing a fresh, vibrant, yet grounded aesthetic.

#00BFFF · #90EE90 · #2F4F4F

Energetic Focus

Use these three bright colors to create dynamic focal points, calls-to-action, or expressive graphic elements.

#FF4500 · #00BFFF · #FFFF00

CSS variables

:root {
  --urban-street-art-3-1: #2F4F4F;
  --urban-street-art-3-2: #FF4500;
  --urban-street-art-3-3: #00BFFF;
  --urban-street-art-3-4: #90EE90;
  --urban-street-art-3-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-street-art-3": {
        1: "#2F4F4F",
        2: "#FF4500",
        3: "#00BFFF",
        4: "#90EE90",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#FF4500

Color 3#00BFFF

Color 4#90EE90

Color 5#FFFF00

Accessibility

Contrast checker

2.6:1Fail

4.2:1AA18

6.3:1AA

8.3:1AAA

2.6:1Fail

1.6:1Fail

2.4:1Fail

3.2:1AA18

4.2:1AA18

1.6:1Fail

1.5:1Fail

2:1Fail

6.3:1AA

2.4:1Fail

1.5:1Fail

1.3:1Fail

8.3:1AAA

3.2:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Urban Street Art

View all vibrant

Energetic City Mural

Urban Canvas Graffitti

Urban Canvas Mural

Urban Graffito Wall

Abstract Expression Burst

Alley Canvas Pulse