Back to palettes

Palette

Urban Canvas Mural

A dynamic mix of bold, contrasting colors mirroring the expressive street art found on city walls.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#6B8E23#B0C4DE#DC143C#FFD700

Palette guide

How to use Urban Canvas Mural

Overview

The Urban Canvas Mural palette is a dynamic mix of bold, contrasting colors mirroring expressive street art on city walls. It combines the deep, serious #2F4F4F with vibrant splashes of #6B8E23 (olive green), #DC143C (crimson red), and #FFD700 (bright gold), all grounded by the light, cool #B0C4DE. This palette empowers designers and developers to create energetic, eye-catching designs that convey creativity and urban flair. It's ideal for projects needing a strong visual presence and a playful yet sophisticated mood, ensuring memorable and impactful user experiences across various media.

Best used for

  • Creative agency branding
  • Youth culture marketing
  • Event promotions and signage
  • Digital campaigns and social media graphics
  • Art installation conceptual design
  • Interactive web experiences

Suggested color roles

primary

Use #2F4F4F as a deep, anchoring color for large sections, providing a strong base for vibrant accents.

secondary

Apply #B0C4DE as a light, expansive background, reminiscent of a neutral canvas.

accent

Deploy #DC143C, #FFD700, and #6B8E23 for high-impact call-to-actions, illustrations, or key informational highlights.

background

Utilize #B0C4DE for main backgrounds, offering a clean, cool surface that allows the bold colors to truly pop.

text

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

Accessibility notes

  • Ensure sufficient contrast for text, especially when using vibrant colors like #FFD700 or #6B8E23 on light backgrounds.
  • Pair #2F4F4F text with #B0C4DE backgrounds for optimal readability (WCAG AA/AAA).
  • Avoid placing highly saturated colors directly adjacent in large blocks to prevent visual vibration.
  • Verify that interactive elements have clear contrast for different states (e.g., hover, active).

Recommended combinations

Bold Statement

Ideal for striking headers, call-to-action buttons, or elements requiring maximum visual impact.

#2F4F4F · #DC143C · #FFD700

Urban Nature

Great for designs that blend urban grit with organic elements, using green as a refreshing accent.

#2F4F4F · #6B8E23 · #B0C4DE

Energetic Pop

Use for dynamic infographics, playful illustrations, or sections needing high energy and vibrancy.

#B0C4DE · #FFD700 · #DC143C

CSS variables

:root {
  --urban-canvas-mural-1: #2F4F4F;
  --urban-canvas-mural-2: #6B8E23;
  --urban-canvas-mural-3: #B0C4DE;
  --urban-canvas-mural-4: #DC143C;
  --urban-canvas-mural-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas-mural": {
        1: "#2F4F4F",
        2: "#6B8E23",
        3: "#B0C4DE",
        4: "#DC143C",
        5: "#FFD700",
      }
    }
  }
}

Related searches

urban mural color palettevibrant street artbold city colorsexpressive design schemeenergetic urban palette

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#6B8E23
·
Color 3#B0C4DE
·
Color 4#DC143C
·
Color 5#FFD700
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
5:1AA
1.8:1Fail
6.4:1AA
2
2.3:1Fail
2.1:1Fail
1.3:1Fail
2.7:1Fail
3
5:1AA
2.1:1Fail
2.8:1Fail
1.3:1Fail
4
1.8:1Fail
1.3:1Fail
2.8:1Fail
3.6:1AA18
5
6.4:1AA
2.7:1Fail
1.3:1Fail
3.6:1AA18

Similar palettes

More like Urban Canvas Mural

View all vibrant
Energetic City Mural
Street Art Fusion
Urban Art Mural
Urban Canvas Graffitti
Urban Graffito Wall
Urban Street Art