Palette

City Street Art

A lively explosion of bold and dynamic colors, inspired by vibrant urban street art and murals.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F0F#FF0000#00FF00#0000FF#FFFF00

Palette guide

How to use City Street Art

Overview

The "City Street Art" palette is a vibrant explosion of primary and near-primary colors against a deep, dark backdrop, capturing the raw energy and visual impact of urban murals. With a solid black #0F0F0F as its base, this palette erupts with intense red #FF0000, vivid green #00FF00, electric blue #0000FF, and brilliant yellow #FFFF00. This combination offers designers and developers a powerful toolkit for creating high-impact, dynamic interfaces, expressive branding, or captivating digital art that demands attention. It's perfect for projects aiming for a distinctive, energetic, and contemporary aesthetic inspired by street culture.

Best used for

Youth brand marketing
Gaming UI and graphics
Event posters and flyers
Streetwear e-commerce sites
Digital art and illustrations
Music festival branding

Suggested color roles

primary

#0F0F0F - The foundational deep black, providing a strong, immersive base for vibrant elements.

secondary

#FF0000 - A bold, energetic red, perfect for calls-to-action, warnings, or prominent branding.

accent

#00FF00 - A vivid green, offering a striking counterpoint and ideal for interactive states or graphic elements.

background

#0F0F0F - Ideal for dark mode interfaces, setting a dramatic and sophisticated stage for the bright accents.

text

#FFFF00 - For headlines and important information on dark backgrounds, or a crisp white for body text.

Accessibility notes

Ensure sufficient contrast when using bright colors like #FFFF00 or #00FF00 for text on #0F0F0F backgrounds; larger font sizes might be needed.
Avoid using multiple primary colors for large blocks of text to prevent visual fatigue and ensure readability.
Pair high-contrast primary accents with readable neutrals (e.g., light grey or white) for body text on dark backgrounds.
Test color combinations with accessibility checkers, especially for users with color vision deficiencies, as strong primary colors can be challenging.

Recommended combinations

Primary Pop

A classic, high-contrast combination for bold headlines, interactive elements, or graphic overlays.

#0F0F0F · #FF0000 · #0000FF

Urban Glow

Use for dynamic dashboards, subtle background textures with bright indicators, or modern branding.

#0F0F0F · #00FF00 · #FFFF00

Street Dynamic

Effective for graphic elements, illustrations, or vibrant call-outs on a neutral (or dark) background.

#FF0000 · #00FF00 · #FFFF00

CSS variables

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

Tailwind config

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

Hex values

Color 1#0F0F0F

Color 2#FF0000

Color 3#00FF00

Color 4#0000FF

Color 5#FFFF00

Accessibility

Contrast checker

4.8:1AA

14:1AAA

2.2:1Fail

17.9:1AAA

4.8:1AA

2.9:1Fail

2.1:1Fail

3.7:1AA18

14:1AAA

2.9:1Fail

6.3:1AA

1.3:1Fail