Palette

Urban Street Art

A riot of electric colors, reflecting the dynamic and expressive energy of urban street art.

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

#FF3366#33FFCC#FFCC00#3366FF#CC33FF

Palette guide

How to use Urban Street Art

Overview

The Urban Street Art palette is a riot of electric colors, reflecting the dynamic and expressive energy of urban street art. Featuring bold hues like #FF3366, #33FFCC, #FFCC00, #3366FF, and #CC33FF, this palette is designed to make a vibrant statement. Designers and developers can leverage these high-energy tones to create impactful, modern, and playful visuals. It's ideal for projects aiming for a youthful, edgy, and unforgettable aesthetic across digital platforms, print campaigns, and branding initiatives, ensuring maximum visual pop.

Best used for

Youth-focused branding and social media campaigns
Event promotions, posters, and festival branding
Digital art, illustration, and motion graphics
Creative agency websites and portfolios
Streetwear fashion lines and e-commerce
Music festival branding and merchandise

Suggested color roles

primary

Use #3366FF as a vibrant, stable blue to anchor the energetic palette, suitable for main interactive elements.

secondary

Employ #FF3366, a bold pink-red, for secondary elements, creating dynamic contrast and visual interest.

accent

Reserve #FFCC00, a bright yellow, for highlights, calls-to-action, or playful details that demand attention.

background

A dark charcoal or near-black background (e.g., #222222) provides a strong, neutral stage for vibrant colors to truly pop.

text

Pure white (e.g., #FFFFFF) or a very light grey ensures maximum readability against dark backgrounds and complements the vivid colors.

Accessibility notes

Ensure sufficient contrast for text when using any of these vibrant colors on a background, especially if the background is also colorful.
Light text (like white) on a dark background (like charcoal) is highly recommended for body copy to maintain readability.
Avoid placing vibrant colors with similar luminosity adjacent to each other for text or small elements to prevent visual strain.
Always test color combinations for accessibility, particularly for users with color vision deficiencies, as vibrant hues can be tricky.

Recommended combinations

Electric Pop

Creates an immediate, high-energy impact, perfect for headlines, banners, or graphic elements that demand attention.

#FF3366 · #33FFCC · #FFCC00

Dynamic Contrast

Ideal for interactive elements, buttons, or illustrations where distinct, vibrant colors need to stand out against each other.

#3366FF · #CC33FF · #FFCC00

Urban Glow

Combine for a modern, futuristic feel, suitable for digital interfaces, motion graphics, or abstract art.

#33FFCC · #FF3366 · #3366FF

CSS variables

:root {
  --urban-street-art-2-1: #FF3366;
  --urban-street-art-2-2: #33FFCC;
  --urban-street-art-2-3: #FFCC00;
  --urban-street-art-2-4: #3366FF;
  --urban-street-art-2-5: #CC33FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-street-art-2": {
        1: "#FF3366",
        2: "#33FFCC",
        3: "#FFCC00",
        4: "#3366FF",
        5: "#CC33FF",
      }
    }
  }
}

Hex values

Color 1#FF3366

Color 2#33FFCC

Color 3#FFCC00

Color 4#3366FF

Color 5#CC33FF

Accessibility

Contrast checker

2.8:1Fail

2.3:1Fail

1.3:1Fail

1.1:1Fail

2.8:1Fail

1.2:1Fail

3.6:1AA18

3:1Fail

2.3:1Fail

1.2:1Fail

3.1:1AA18

2.5:1Fail

1.3:1Fail

3.6:1AA18

3.1:1AA18

1.2:1Fail

1.1:1Fail

3:1Fail

2.5:1Fail

1.2:1Fail

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

Electric Pop

Dynamic Contrast

Urban Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Street Art