Palette

Urban Graffiti Burst

An explosion of vibrant purples and deep indigos, echoing the bold and expressive art of urban graffiti.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F0E3D#3E206F#60379C#8F5AD4#BF7DF0

Palette guide

How to use Urban Graffiti Burst

Overview

The Urban Graffiti Burst palette explodes with vibrant purples and deep indigos, echoing the expressive and bold art of urban graffiti. Featuring the striking brightness of `#BF7DF0` against the profound depth of `#1F0E3D`, this palette is designed for projects that demand attention and a sense of energetic creativity. Designers can leverage its dramatic contrast and rich color transitions to craft engaging visuals, while developers will find the distinct shifts in luminosity useful for creating clear visual hierarchies and interactive elements. This palette is perfect for conveying a modern, edgy, and artistic mood across various applications.

Best used for

Creative digital portfolios
Fashion and beauty branding
Music event promotions
Gaming and esports interfaces
Abstract art and illustration
Dynamic website headers

Suggested color roles

primary

Utilize `#60379C` as a strong, central purple for main headings, navigation, and key brand elements.

secondary

Apply `#3E206F` for supporting sections, subheadings, or as a background for content blocks.

accent

Inject energy with `#BF7DF0` for calls to action, highlights, or interactive components that need to pop.

background

Choose `#1F0E3D` for a deep, dramatic background that provides a powerful canvas for the lighter purples to truly shine.

text

For optimal readability on dark backgrounds, use `#BF7DF0` or white. For text on lighter purples, a very dark gray or black is recommended.

Accessibility notes

Ensure high contrast when using `#BF7DF0` for text on darker purples like `#1F0E3D` to meet accessibility standards.
Avoid placing `#60379C` text on similar mid-tone backgrounds, as contrast may be insufficient for some users.
When designing interactive elements, check the contrast of `#8F5AD4` against its surrounding context.
For long-form content, prioritize light text (e.g., white) on `#1F0E3D` or very dark text on `#BF7DF0`.

Recommended combinations

Deep Night

Creates a dramatic, high-contrast look suitable for dark mode interfaces or impactful headers.

#1F0E3D · #BF7DF0 · #60379C

Vibrant Flow

Ideal for gradients, layered graphics, or sections requiring a smooth, energetic transition of light to dark purple.

#BF7DF0 · #8F5AD4 · #60379C

Accent Contrast

Use `#BF7DF0` as a vibrant accent against the deep purples for buttons, icons, or key information.

#3E206F · #BF7DF0 · #1F0E3D

CSS variables

:root {
  --urban-graffiti-burst-1: #1F0E3D;
  --urban-graffiti-burst-2: #3E206F;
  --urban-graffiti-burst-3: #60379C;
  --urban-graffiti-burst-4: #8F5AD4;
  --urban-graffiti-burst-5: #BF7DF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graffiti-burst": {
        1: "#1F0E3D",
        2: "#3E206F",
        3: "#60379C",
        4: "#8F5AD4",
        5: "#BF7DF0",
      }
    }
  }
}

Hex values

Color 1#1F0E3D

Color 2#3E206F

Color 3#60379C

Color 4#8F5AD4

Color 5#BF7DF0

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.9:1AA18

6.2:1AA

1.4:1Fail

1.5:1Fail

2.8:1Fail

4.5:1AA

2.1:1Fail

1.5:1Fail

1.8:1Fail

2.9:1Fail

3.9:1AA18

2.8:1Fail

1.8:1Fail

1.6:1Fail

6.2:1AA

4.5:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Urban Graffiti Burst

View all vibrant

Urban Alley Mural

Abstract City Lights

Abstract Expression Hues

Celestial Firestorm

City Canvas Pop

City Neon Pulse