Palette

Urban Graffito Wall

Bold and clashing colors evoke the dynamic and rebellious spirit of street art on a city wall.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Graffito Wall 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 Graffito Wall.

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

Data visualization

#4169E1#FF00FF#00CED1#A9A9A9#2F4F4F

Palette guide

How to use Urban Graffito Wall

Overview

The Urban Graffito Wall palette evokes the dynamic and rebellious spirit of street art on a city wall with its bold and clashing colors. Combining the strong presence of `#4169E1` (royal blue) and `#A9A9A9` (dark gray) with electrifying hues like `#FF00FF` (magenta) and `#00CED1` (dark turquoise), this palette is designed for impactful expression. Designers can leverage its stark contrasts and vibrant accents for projects that require a modern, edgy, and artistic feel. Developers will find the distinct color identities useful for creating clear visual hierarchies and engaging interactive elements across various digital platforms, ensuring a memorable user experience.

Best used for

Creative agency websites and branding
Youth-focused media platforms
Streetwear fashion e-commerce
Digital music promotion
Modern art exhibition materials
Interactive event applications

Suggested color roles

primary

Utilize `#4169E1` as a strong, reliable primary color for main headings, navigation, and key brand elements.

secondary

Apply `#A9A9A9` for supporting backgrounds, subheadings, or as a neutral base to ground vibrant accents.

accent

Inject vibrant energy with `#FF00FF` or `#00CED1` for calls to action, highlights, or interactive components.

background

A deep `#2F4F4F` (dark slate gray) or `#A9A9A9` can serve as a sophisticated background, allowing bright colors to pop.

text

For text on darker colors like `#2F4F4F`, use white or a very light gray. On lighter backgrounds like `#A9A9A9`, use black or `#2F4F4F`.

Accessibility notes

Ensure `#A9A9A9` provides sufficient contrast when used as a background for lighter text or for text on dark backgrounds.
The vibrant colors (`#FF00FF`, `#00CED1`) have low contrast with each other; avoid using them for large blocks of text.
Always verify contrast ratios when using `#4169E1` for text on backgrounds like `#A9A9A9` or `#2F4F4F`.
For interactive elements, ensure clear visual feedback by contrasting active states (e.g., `#FF00FF`) against inactive states.

Recommended combinations

Urban Edge

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

#2F4F4F · #FF00FF · #4169E1

Vibrant Cool

Ideal for clean sections, infographics, or UI elements that need clear, cool differentiation against a neutral base.

#A9A9A9 · #00CED1 · #4169E1

Accent Pop

Use `#FF00FF` and `#00CED1` as dynamic accents against the dark background for buttons, icons, or highlights.

#2F4F4F · #FF00FF · #00CED1

CSS variables

:root {
  --urban-graffito-wall-1: #4169E1;
  --urban-graffito-wall-2: #FF00FF;
  --urban-graffito-wall-3: #00CED1;
  --urban-graffito-wall-4: #A9A9A9;
  --urban-graffito-wall-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graffito-wall": {
        1: "#4169E1",
        2: "#FF00FF",
        3: "#00CED1",
        4: "#A9A9A9",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#4169E1

Color 2#FF00FF

Color 3#00CED1

Color 4#A9A9A9

Color 5#2F4F4F

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

2.1:1Fail

1.8:1Fail

1.5:1Fail

1.6:1Fail

1.3:1Fail

2.8:1Fail

2.5:1Fail

1.6:1Fail

1.2:1Fail

4.6:1AA

2.1:1Fail

1.3:1Fail

1.2:1Fail

3.8:1AA18

1.8:1Fail

2.8:1Fail

4.6:1AA

3.8:1AA18

Similar palettes

More like Urban Graffito Wall

View all vibrant

Energetic City Mural

Urban Canvas Graffitti