Palette

Urban Canvas Graffito

Bold, contrasting colors inspired by vibrant street art against a gritty city backdrop.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#E74C3C#F1C40F#2ECC71#BDC3C7

Palette guide

How to use Urban Canvas Graffito

Overview

The Urban Canvas Graffito palette is a dynamic and bold collection inspired by vibrant street art. Featuring a deep, grounding #2C3E50 (dark slate) contrasted with energetic splashes of #E74C3C (bright red), #F1C40F (vibrant yellow), and #2ECC71 (emerald green), it's balanced by the neutral #BDC3C7 (light concrete). This palette offers designers and developers a powerful tool for creating impactful, modern, and youthful designs. It's perfect for projects that demand attention and convey a sense of urban creativity and playful energy, ensuring a striking visual presence with clear contrast.

Best used for

Youth-oriented brand identities
Event posters and promotional materials
Gaming UI and character design
Creative portfolio websites
Streetwear fashion branding
Digital marketing campaigns

Suggested color roles

primary

Use #2C3E50 as a strong, dark backdrop for urban appeal, providing a solid base for vibrant accents.

secondary

Employ #BDC3C7 as a clean, light neutral for backgrounds or supporting elements, mimicking concrete walls.

accent

Deploy #E74C3C, #F1C40F, and #2ECC71 strategically for high-impact call-to-actions, illustrations, or key information.

background

Utilize #BDC3C7 for light, expansive areas, allowing the bold accents to truly pop.

text

Set primary text in #2C3E50 on light backgrounds for excellent readability, or use white text on darker elements.

Accessibility notes

Ensure sufficient contrast when using #E74C3C, #F1C40F, or #2ECC71 for text, especially on light backgrounds.
Pair #2C3E50 text with #BDC3C7 backgrounds for optimal readability (WCAG AA/AAA).
Avoid placing vibrant colors directly next to each other in large blocks without a neutral separator to prevent visual vibration.
Verify all text and background color combinations meet contrast requirements for accessibility.

Recommended combinations

Street Pop

Ideal for bold headers, graphic elements, or calls to action that demand immediate attention.

#2C3E50 · #E74C3C · #F1C40F

Urban Fresh

Great for clean layouts, using the light gray as a canvas, green for freshness, and dark for text/accents.

#BDC3C7 · #2ECC71 · #2C3E50

Bold Contrast

Use for dynamic illustrations, infographics, or sections needing high energy and visual impact.

#F1C40F · #2C3E50 · #E74C3C

CSS variables

:root {
  --urban-canvas-graffito-1: #2C3E50;
  --urban-canvas-graffito-2: #E74C3C;
  --urban-canvas-graffito-3: #F1C40F;
  --urban-canvas-graffito-4: #2ECC71;
  --urban-canvas-graffito-5: #BDC3C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas-graffito": {
        1: "#2C3E50",
        2: "#E74C3C",
        3: "#F1C40F",
        4: "#2ECC71",
        5: "#BDC3C7",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#E74C3C

Color 3#F1C40F

Color 4#2ECC71

Color 5#BDC3C7

Accessibility

Contrast checker

2.9:1Fail

6.6:1AA

5.2:1AA

6.2:1AA

2.9:1Fail

2.3:1Fail

1.8:1Fail

2.1:1Fail

6.6:1AA

2.3:1Fail

1.3:1Fail

1.1:1Fail

5.2:1AA

1.8:1Fail

1.3:1Fail

1.2:1Fail

6.2:1AA

2.1:1Fail

1.1:1Fail

1.2:1Fail

Similar palettes

More like Urban Canvas Graffito

View all vibrant

Abstract Art Canvas

Abstract Canvas Drip

Abstract Geometric Hue

Geometric Pop Blast

Pop Art Grid Blast

Urban Alley Canvas