Back to palettes

Palette

Street Art Chroma

Energetic and edgy, these colors reflect the dynamic and expressive world of street art murals.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF3399#33FFCC#FFCC00#6633FF#FF6600

Palette guide

How to use Street Art Chroma

Overview

The Street Art Chroma palette is an energetic and edgy collection that reflects the dynamic and expressive world of urban murals. It features bold, high-chroma colors like the striking #FF3399 (hot pink), the refreshing #33FFCC (mint green), and the luminous #FFCC00 (golden yellow). The deep #6633FF (violet) and fiery #FF6600 (orange) add further depth and vibrancy, ensuring a visually captivating experience. This palette is perfect for designs that aim to be modern, creative, and full of personality. Designers can leverage these intense shades to craft compelling branding, engaging digital interfaces, or marketing materials for youth culture, entertainment, or innovative tech brands, making a strong, memorable statement.

Best used for

  • Youth-focused brand identity
  • Creative portfolio websites
  • Gaming and esports UI/UX
  • Event and festival promotional materials
  • Fashion and streetwear marketing
  • Digital art and illustration

Suggested color roles

primary

Use #FF3399 for main calls-to-action, bold headlines, or key branding elements to grab immediate attention and convey excitement.

secondary

Apply #33FFCC or #FFCC00 for supporting visuals, secondary buttons, or energetic background accents, offering distinct visual interest.

accent

Utilize #6633FF or #FF6600 for interactive elements, hover states, or graphic details to introduce unexpected bursts of color and depth.

background

A neutral dark gray or black background is recommended to provide a strong canvas that allows the vibrant colors to truly pop.

text

On dark backgrounds, use #FFCC00, #33FFCC, or #FF3399 for impactful text. For lighter elements, black or charcoal provides good readability.

Accessibility notes

  • Ensure sufficient contrast when using any of the bright colors for text on a chosen background, especially for smaller fonts.
  • Avoid direct text-on-background pairings of highly saturated colors (e.g., #FF3399 on #33FFCC) due to potential readability issues.
  • Test for color blindness compatibility, as the intensity and hue shifts can be challenging for some users.
  • Provide clear visual cues beyond color for interactive elements, particularly when using vibrant combinations.

Recommended combinations

Vibrant Foundation

Excellent for creating high-impact graphics, bold headers, or a dark theme with striking color accents.

#FF3399 · #33FFCC · #FFCC00

Dynamic Pop

Ideal for energetic button states, infographics, or adding unexpected bursts of modern color to a design.

#6633FF · #FF6600 · #33FFCC

Street Contrast

Combine these three for a truly vibrant and playful look, great for illustrations, patterns, or bold branding.

#FF3399 · #FF6600 · #6633FF

CSS variables

:root {
  --street-art-chroma-2-1: #FF3399;
  --street-art-chroma-2-2: #33FFCC;
  --street-art-chroma-2-3: #FFCC00;
  --street-art-chroma-2-4: #6633FF;
  --street-art-chroma-2-5: #FF6600;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "street-art-chroma-2": {
        1: "#FF3399",
        2: "#33FFCC",
        3: "#FFCC00",
        4: "#6633FF",
        5: "#FF6600",
      }
    }
  }
}

Related searches

vibrant street art colorsenergetic urban palettebold modern designgraffiti inspired color schemecreative branding palette

Palette colors

Hex values

Color 1#FF3399
·
Color 2#33FFCC
·
Color 3#FFCC00
·
Color 4#6633FF
·
Color 5#FF6600
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.6:1Fail
2.2:1Fail
1.8:1Fail
1.2:1Fail
2
2.6:1Fail
1.2:1Fail
4.7:1AA
2.3:1Fail
3
2.2:1Fail
1.2:1Fail
4:1AA18
1.9:1Fail
4
1.8:1Fail
4.7:1AA
4:1AA18
2.1:1Fail
5
1.2:1Fail
2.3:1Fail
1.9:1Fail
2.1:1Fail

Similar palettes

More like Street Art Chroma

View all vibrant
Alley Canvas Pulse
Urban Street Art
Abstract Art Strokes
Abstract Block Play
Abstract Canvas Blend
Abstract Canvas Pop