Palette

Street Art Fusion

A high-energy burst of spray paint colors on a brick wall, capturing raw urban creativity.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF5733#33FFB5#FFBD33#336BFF#A533FF

Palette guide

How to use Street Art Fusion

Overview

The Street Art Fusion palette delivers a high-energy burst of spray paint colors, perfect for capturing raw urban creativity. With vivid hues like #FF5733 (Tomato Red), #33FFB5 (Mint Green), and #FFBD33 (Saffron Yellow), it evokes the dynamism of a city wall brought to life. The addition of #336BFF (Royal Blue) and #A533FF (Purple) provides striking contrasts, making this palette versatile for designers and developers aiming for a youthful, rebellious, and undeniably energetic aesthetic in their digital products or branding. It's designed to make an immediate, memorable impact.

Best used for

Youth-focused brand identities
Creative agency portfolios
Music festival promotions
Interactive mobile game UIs
Streetwear and urban fashion design
Eye-catching social media campaigns

Suggested color roles

primary

#FF5733 (Tomato Red): Ideal for strong calls to action, primary headlines, or dominant brand elements to convey excitement and passion.

secondary

#336BFF (Royal Blue): Use for robust supporting elements, navigation bars, or as a cool counterpoint to the warmer hues in the palette.

accent

#A533FF (Purple): Perfect for highlighting interactive states, unique iconography, or adding a touch of bold sophistication and creativity.

background

#33FFB5 (Mint Green): Creates a vibrant, fresh background for specific sections or graphic overlays. Ensure dark text for optimal readability.

text

#FFBD33 (Saffron Yellow): Best suited for vibrant headings, emphasized text, or graphic elements that need to pop. For body text, a dark charcoal or black is recommended for legibility.

Accessibility notes

Ensure sufficient contrast when pairing #FFBD33 with lighter backgrounds; it works best as an accent or on dark backgrounds.
Avoid using #FF5733 and #33FFB5 for text/background unless contrast ratios are carefully checked for WCAG compliance.
When using #33FFB5 as a background, ensure text color (e.g., black or #336BFF) meets minimum contrast requirements.
Test all color combinations for readability, especially for users with color vision deficiencies.

Recommended combinations

Dynamic Urban

A powerful and contrasting combination perfect for main branding, hero sections, or impactful digital art.

#FF5733 · #336BFF · #A533FF

Neon Burst

Creates an electric, glowing effect ideal for highlights, interactive elements, or energetic visual storytelling.

#33FFB5 · #FFBD33 · #FF5733

Graffiti Glow

A vibrant and playful mix, great for secondary graphics, sub-sections, or adding a creative pop to any design.

#A533FF · #33FFB5 · #336BFF

CSS variables

:root {
  --street-art-fusion-1: #FF5733;
  --street-art-fusion-2: #33FFB5;
  --street-art-fusion-3: #FFBD33;
  --street-art-fusion-4: #336BFF;
  --street-art-fusion-5: #A533FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "street-art-fusion": {
        1: "#FF5733",
        2: "#33FFB5",
        3: "#FFBD33",
        4: "#336BFF",
        5: "#A533FF",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#33FFB5

Color 3#FFBD33

Color 4#336BFF

Color 5#A533FF

Accessibility

Contrast checker

2.4:1Fail

1.9:1Fail

1.4:1Fail

1.5:1Fail

2.4:1Fail

1.3:1Fail

3.4:1AA18

3.6:1AA18

1.9:1Fail

1.3:1Fail

2.7:1Fail

2.8:1Fail

1.4:1Fail

3.4:1AA18

2.7:1Fail

1:1Fail

1.5:1Fail

3.6:1AA18

2.8:1Fail

1:1Fail

Similar palettes

More like Street Art Fusion