Back to palettes

Palette

Urban Grunge Canvas

A raw and modern palette reflecting the gritty, weathered textures and concrete tones of an urban landscape.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2C2D#4E5257#7B8085#AAB0B5#D4D8DC

Palette guide

How to use Urban Grunge Canvas

Overview

The Urban Grunge Canvas palette offers a sophisticated, raw aesthetic inspired by urban landscapes and industrial textures. Comprising five versatile greys—#2B2C2D, #4E5257, #7B8085, #AAB0B5, and #D4D8DC—this collection is perfect for projects demanding a minimalist yet strong visual identity. Designers will find these tones excellent for conveying professionalism, stability, and an understated modernity. Developers can implement these hex codes to create sleek UI designs, robust branding, or atmospheric digital environments. Each shade provides depth and contrast, allowing for dynamic layering without losing the cohesive, gritty feel. This palette excels in creating a foundational, modern look with a subtle edge.

Best used for

  • Industrial design portfolios
  • Modern web interfaces and applications
  • Architectural firm branding
  • Streetwear fashion e-commerce
  • Photography and art gallery websites
  • Automotive brand identity

Suggested color roles

primary

Use #2B2C2D as a deep, anchoring color for main structural elements, bold statements, or primary text.

secondary

Employ #4E5257 to provide rich depth, ideal for panels, secondary navigation, or large content blocks.

accent

Apply #AAB0B5 as a lighter, contrasting grey for interactive elements, subtle highlights, or calls to action.

background

Utilize #D4D8DC as a clean, almost off-white background that allows darker elements to stand out without being stark.

text

Choose #2B2C2D for body text against lighter backgrounds like #D4D8DC, ensuring excellent readability and strong contrast.

Accessibility notes

  • Ensure #2B2C2D text on #D4D8DC meets WCAG AA contrast for body text and AAA for large text.
  • Avoid using #7B8085 as text on #AAB0B5 backgrounds due to insufficient contrast for readability.
  • For UI elements, use a strong contrast like #2B2C2D on #D4D8DC or #AAB0B5 for clear interactability.
  • Always test color combinations with accessibility tools, especially for smaller font sizes and interactive states.

Recommended combinations

High Contrast Modern

Excellent for crisp, readable interfaces; #2B2C2D for text, #D4D8DC for background, and #4E5257 for secondary elements.

#2B2C2D · #D4D8DC · #4E5257

Subtle Gradient

Ideal for creating smooth transitions, subtle depth in UI cards, or layered background effects without stark differences.

#4E5257 · #7B8085 · #AAB0B5

Gritty Foundation

Provides a strong, grounded feel; #2B2C2D for main sections, #7B8085 for content blocks, and #AAB0B5 for subtle accents.

#2B2C2D · #7B8085 · #AAB0B5

CSS variables

:root {
  --urban-grunge-canvas-1: #2B2C2D;
  --urban-grunge-canvas-2: #4E5257;
  --urban-grunge-canvas-3: #7B8085;
  --urban-grunge-canvas-4: #AAB0B5;
  --urban-grunge-canvas-5: #D4D8DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grunge-canvas": {
        1: "#2B2C2D",
        2: "#4E5257",
        3: "#7B8085",
        4: "#AAB0B5",
        5: "#D4D8DC",
      }
    }
  }
}

Related searches

urban grey color paletteindustrial design colorsmodern minimalist grey tonesgritty concrete color schemeneutral dark grey branding

Palette colors

Hex values

Color 1#2B2C2D
·
Color 2#4E5257
·
Color 3#7B8085
·
Color 4#AAB0B5
·
Color 5#D4D8DC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.5:1AA18
6.4:1AA
9.8:1AAA
2
1.8:1Fail
2:1Fail
3.6:1AA18
5.5:1AA
3
3.5:1AA18
2:1Fail
1.8:1Fail
2.8:1Fail
4
6.4:1AA
3.6:1AA18
1.8:1Fail
1.5:1Fail
5
9.8:1AAA
5.5:1AA
2.8:1Fail
1.5:1Fail

Similar palettes

More like Urban Grunge Canvas

View all neutral
City Concrete Grind
Concrete Grid Lines
Concrete Loft Living
Industrial Loft Concrete
Industrial Urban Grid
Industrial Urban Grit