Palette

Urban Graffiti Splash

Bold, high-contrast colors mirroring the vivid and unpredictable splatters of urban graffiti art.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A2A2A#FF00FF#00FFFF#FFFF00#F0F0F0

Palette guide

How to use Urban Graffiti Splash

Overview

The Urban Graffiti Splash palette delivers a bold, high-contrast experience, mirroring the vivid and unpredictable splatters of street art. Featuring electrifying neons like `#FF00FF` (magenta) and `#00FFFF` (cyan) juxtaposed with the stark `#2A2A2A` and bright `#F0F0F0`, this palette is undeniably edgy. Designers can harness its raw energy for projects demanding a modern, rebellious feel, while developers will find the clear separation of colors excellent for creating dynamic and visually striking interfaces. The inclusion of `#FFFF00` adds another layer of vibrant emphasis, making this palette perfect for capturing attention and conveying a strong, contemporary message.

Best used for

Edgy fashion and streetwear brands
Nightlife and club promotions
Digital art installations
Gaming and tech interfaces
Event posters and flyers
Experimental web design

Suggested color roles

primary

Set `#2A2A2A` as the foundational dark color for backgrounds and strong textual elements, providing a stark canvas.

secondary

Use `#F0F0F0` for contrast, cleaner background areas, or as a light text color against darker elements.

accent

Deploy `#FF00FF` (magenta) or `#00FFFF` (cyan) as high-impact accents for calls to action, icons, or navigation states.

background

A deep `#2A2A2A` offers a dramatic background, allowing the neon colors to truly pop with intensity.

text

On `#2A2A2A` backgrounds, use `#F0F0F0` or white. For text on `#F0F0F0`, a sharp black or `#2A2A2A` is ideal.

Accessibility notes

The neon colors (`#FF00FF`, `#00FFFF`, `#FFFF00`) have inherently low contrast with each other and many backgrounds; use them sparingly for text.
Ensure `#F0F0F0` text on `#2A2A2A` backgrounds meets WCAG AA standards for readability.
Avoid using neon colors for large blocks of text; reserve them for accents, headlines, or interactive elements.
When combining neon colors, ensure visual hierarchy is clear, as their intensity can make differentiation difficult without careful placement.

Recommended combinations

Neon Burst

Creates a vibrant, energetic contrast for dark mode interfaces, headers, or graphical elements.

#2A2A2A · #FF00FF · #00FFFF

High Alert

Ideal for warnings, urgent notifications, or interactive elements that demand immediate user attention.

#F0F0F0 · #FFFF00 · #2A2A2A

Edgy Accent

Use `#FFFF00` and `#FF00FF` as powerful accents against a dark backdrop for icons, buttons, or highlights.

#2A2A2A · #FFFF00 · #FF00FF

CSS variables

:root {
  --urban-graffiti-splash-1: #2A2A2A;
  --urban-graffiti-splash-2: #FF00FF;
  --urban-graffiti-splash-3: #00FFFF;
  --urban-graffiti-splash-4: #FFFF00;
  --urban-graffiti-splash-5: #F0F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graffiti-splash": {
        1: "#2A2A2A",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#FFFF00",
        5: "#F0F0F0",
      }
    }
  }
}

Hex values

Color 1#2A2A2A

Color 2#FF00FF

Color 3#00FFFF

Color 4#FFFF00

Color 5#F0F0F0

Accessibility

Contrast checker

4.6:1AA

11.4:1AAA

13.4:1AAA

12.6:1AAA

4.6:1AA

2.5:1Fail

2.9:1Fail

2.8:1Fail

11.4:1AAA

2.5:1Fail

1.2:1Fail

1.1:1Fail

13.4:1AAA

2.9:1Fail

1.2:1Fail

1.1:1Fail

12.6:1AAA

2.8:1Fail

1.1:1Fail

Similar palettes

More like Urban Graffiti Splash

Urban Graffiti Splash

See it in context.

Ready when you are.

Built with Urban Graffiti Splash.

How to use Urban Graffiti Splash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Neon Burst

High Alert

Edgy Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Graffiti Splash