Palette

Urban Alley Graffiti

Electric purples, vibrant blues, and shocking greens against a dark urban canvas, mirroring street art's edge.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2B2B#5C2B6A#9A4DAB#00BFB3#A5E81A

Palette guide

How to use Urban Alley Graffiti

Overview

The Urban Alley Graffiti palette captures the raw energy of street art, blending deep urban tones with electric, high-impact colors. Featuring a foundational dark grey (`#2B2B2B`), a rich deep purple (`#5C2B6A`), a brighter medium purple (`#9A4DAB`), a striking teal-cyan (`#00BFB3`), and an exhilarating lime green (`#A5E81A`), this collection is perfect for designers and developers aiming for a bold, modern aesthetic. It provides a versatile base for digital interfaces, branding, or artistic projects that demand attention and convey a sense of dynamic urban flair, moving beyond conventional color choices.

Best used for

Modern branding for tech startups or creative agencies
Dynamic website interfaces and mobile app themes
Event promotions for music festivals or street art exhibits
Video game UI and environmental design
Athletic wear or streetwear fashion branding
Digital art and illustration with an edgy, urban feel

Suggested color roles

primary

Use `#2B2B2B` as a dominant background or primary container color, providing a strong, dark canvas that allows the vibrant accents to truly pop.

secondary

Apply `#5C2B6A` for secondary sections, navigation elements, or as a rich background for content blocks, offering depth without overwhelming.

accent

Deploy `#00BFB3` or `#A5E81A` sparingly for calls-to-action, interactive elements, highlights, or key visual indicators to draw immediate attention.

background

The deep `#2B2B2B` serves as an excellent dark background, mimicking a nocturnal urban setting and enhancing the luminosity of brighter hues.

text

For body text, use white or a very light grey against `#2B2B2B` or `#5C2B6A`. For headlines or impact text on dark backgrounds, `#A5E81A` or `#00BFB3` can be highly effective.

Accessibility notes

Ensure high contrast for text: white or light grey on `#2B2B2B` and `#5C2B6A` is essential for readability.
Avoid using `#5C2B6A` or `#9A4DAB` as text colors directly on `#2B2B2B` without sufficient contrast checks.
Utilize `#00BFB3` and `#A5E81A` primarily for larger text, icons, or interactive elements to maintain legibility.
Test all color pairings with a contrast checker to meet WCAG AA or AAA standards, especially for interactive components.

Recommended combinations

Urban Canvas

Ideal for website hero sections or app dashboards, using the dark grey as base, deep purple for secondary elements, and lime green for key actions.

#2B2B2B · #5C2B6A · #A5E81A

Electric Pop

Excellent for vibrant infographics, data visualization, or interactive components where a gradient of purples meets a sharp teal accent.

#5C2B6A · #9A4DAB · #00BFB3

Street Light

Perfect for UI elements, button states, or loading indicators, employing the dark background with energetic teal and lime green for visual cues.

#2B2B2B · #00BFB3 · #A5E81A

CSS variables

:root {
  --urban-alley-graffiti-1: #2B2B2B;
  --urban-alley-graffiti-2: #5C2B6A;
  --urban-alley-graffiti-3: #9A4DAB;
  --urban-alley-graffiti-4: #00BFB3;
  --urban-alley-graffiti-5: #A5E81A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-graffiti": {
        1: "#2B2B2B",
        2: "#5C2B6A",
        3: "#9A4DAB",
        4: "#00BFB3",
        5: "#A5E81A",
      }
    }
  }
}

Hex values

Color 1#2B2B2B

Color 2#5C2B6A

Color 3#9A4DAB

Color 4#00BFB3

Color 5#A5E81A

Accessibility

Contrast checker

1.4:1Fail

2.7:1Fail

6.1:1AA

9.5:1AAA

1.4:1Fail

2:1Fail

4.5:1AA

7:1AAA

2.7:1Fail

2:1Fail

2.3:1Fail

3.5:1AA18

6.1:1AA

4.5:1AA

2.3:1Fail

1.6:1Fail

9.5:1AAA

7:1AAA

3.5:1AA18

1.6:1Fail

Similar palettes

More like Urban Alley Graffiti