Back to palettes

Palette

Urban Art Splash

A rebellious burst of primary colors, mimicking the energetic and unapologetic spirit of street art.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Art Splash 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 Art Splash.

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

Data visualization

#FF0000#00FF00#0000FF#FFFF00#FF00FF

Palette guide

How to use Urban Art Splash

Overview

The Urban Art Splash palette is a raw, unapologetic explosion of primary and secondary colors, echoing the bold and direct nature of classic street art. Featuring intense red #FF0000, vivid green #00FF00, striking blue #0000FF, bright yellow #FFFF00, and vibrant magenta #FF00FF, this collection is designed for maximum visual impact. Developers and designers can harness these fundamental hues to create highly energetic, playful, and instantly recognizable designs. It’s perfect for projects that demand a straightforward, high-energy aesthetic, ensuring that every element stands out with undeniable presence and a touch of rebellious charm.

Best used for

  • children's branding
  • event signage
  • digital advertisements
  • toy packaging
  • gaming interfaces
  • bold infographic design

Suggested color roles

primary

#FF0000 is an excellent choice for a dominant, attention-grabbing primary color, signaling urgency or importance.

secondary

#0000FF provides a strong, stable counterpoint, perfect for navigation or key information areas.

accent

#FFFF00 or #00FF00 can be used for highlights, warnings, or playful graphical elements to add zest.

background

A neutral black, white, or very dark grey background will allow these pure colors to pop dramatically.

text

Black or white text is essential for legibility, depending on the background color. Black on #FFFF00, white on #FF0000.

Accessibility notes

  • High contrast is crucial; avoid placing pure red #FF0000 on pure green #00FF00 for text due to potential colorblindness issues.
  • Ensure text on #FFFF00 is dark (e.g., black) for readability.
  • Use white text on #FF0000, #0000FF, and #FF00FF for optimal contrast.
  • Test all color combinations rigorously for WCAG compliance, especially for critical information.

Recommended combinations

Primary Power

For bold, impactful headlines, logos, or hero sections with a strong, fundamental feel.

#FF0000 · #0000FF · #FFFF00

Vibrant Contrast

Ideal for creating dynamic visual separations or highlighting contrasting elements.

#FF00FF · #00FF00 · #0000FF

Full Spectrum

Use for playful gradients, infographics, or sections requiring high visual energy and distinct separation.

#0000FF · #FFFF00 · #FF0000

CSS variables

:root {
  --urban-art-splash-1: #FF0000;
  --urban-art-splash-2: #00FF00;
  --urban-art-splash-3: #0000FF;
  --urban-art-splash-4: #FFFF00;
  --urban-art-splash-5: #FF00FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-art-splash": {
        1: "#FF0000",
        2: "#00FF00",
        3: "#0000FF",
        4: "#FFFF00",
        5: "#FF00FF",
      }
    }
  }
}

Related searches

primary colors palettebold graffiti colorsvibrant pop art schemeenergetic design colorsstreet art primary hues

Palette colors

Hex values

Color 1#FF0000
·
Color 2#00FF00
·
Color 3#0000FF
·
Color 4#FFFF00
·
Color 5#FF00FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.9:1Fail
2.1:1Fail
3.7:1AA18
1.3:1Fail
2
2.9:1Fail
6.3:1AA
1.3:1Fail
2.3:1Fail
3
2.1:1Fail
6.3:1AA
8:1AAA
2.7:1Fail
4
3.7:1AA18
1.3:1Fail
8:1AAA
2.9:1Fail
5
1.3:1Fail
2.3:1Fail
2.7:1Fail
2.9:1Fail

Similar palettes

More like Urban Art Splash

View all vibrant