Palette

Street Art

A dynamic burst of primary colors, capturing the raw energy and vibrant expression 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 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 Street Art.

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

Data visualization

#FF0000#FFFF00#00FF00#0000FF#800080

Palette guide

How to use Street Art

Overview

The Street Art palette embodies raw energy and vibrant expression through its use of fundamental primary and secondary colors. Featuring #FF0000 (Red), #FFFF00 (Yellow), #00FF00 (Green), #0000FF (Blue), and #800080 (Purple), this collection is a dynamic burst of hues. It’s perfect for designers and developers looking to create high-impact, bold, and playful designs that capture immediate attention. The palette's directness allows for clear visual hierarchy and a strong sense of purpose, ideal for projects aiming for a youthful or artistic appeal.

Best used for

Children's educational apps and websites
High-impact advertising campaigns
Artistic portfolios and creative projects
Event promotions and signage
Youth-oriented product branding
Playful user interface designs

Suggested color roles

primary

#FF0000 (Red): Use for dominant calls to action, critical alerts, or as a strong brand identifier to command immediate attention.

secondary

#0000FF (Blue): Ideal for foundational UI elements, robust navigation, or as a stable counterpoint to the more energetic warm tones.

accent

#800080 (Purple): Perfect for unique highlights, interactive elements, or adding a touch of artistic flair and individuality.

background

#FFFF00 (Yellow): Can be used for energetic background sections, banners, or to highlight important information. Ensure dark, high-contrast text for readability.

text

#00FF00 (Green): Best suited for vibrant headings, emphasized text, or graphic elements. For body text, a neutral black or very dark grey is highly recommended for legibility.

Accessibility notes

Exercise caution when pairing #FF0000 and #00FF00 for text/background due to potential red-green color blindness issues.
Ensure high contrast when using #FFFF00 as a background; black or a very dark blue text is usually required.
Avoid using #00FF00 for large blocks of body text due to its high luminance and potential for eye strain.
Always check contrast ratios for all text and interactive elements to meet WCAG guidelines, especially for primary colors.

Recommended combinations

Primary Impact

A classic, high-energy combination for bold statements, primary calls to action, or children's branding.

#FF0000 · #0000FF · #FFFF00

Urban Contrast

Offers a vibrant and slightly unexpected contrast, suitable for creative layouts or highlighting unique content.

#800080 · #00FF00 · #FF0000

Vivid Expression

Creates a bright, dynamic, and playful feel, great for interactive elements, playful graphics, or energetic backgrounds.

#FFFF00 · #0000FF · #00FF00

CSS variables

:root {
  --street-art-1: #FF0000;
  --street-art-2: #FFFF00;
  --street-art-3: #00FF00;
  --street-art-4: #0000FF;
  --street-art-5: #800080;
}

Tailwind config

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

Hex values

Color 1#FF0000

Color 2#FFFF00

Color 3#00FF00

Color 4#0000FF

Color 5#800080

Accessibility

Contrast checker

3.7:1AA18

2.9:1Fail

2.1:1Fail

2.4:1Fail

3.7:1AA18

1.3:1Fail

8:1AAA

8.8:1AAA

2.9:1Fail

1.3:1Fail

6.3:1AA

6.9:1AA