Back to palettes

Palette

Urban Canvas Texture

Captures the gritty yet refined textures of cityscapes, from dark asphalt to weathered concrete.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4D4B4B#727070#969494#BBBBBB#DFDFDF

Palette guide

How to use Urban Canvas Texture

Overview

The Urban Canvas Texture palette captures the gritty yet refined textures of cityscapes, from dark asphalt to weathered concrete. This neutral grayscale collection, ranging from the deep #4D4B4B to the bright #DFDFDF, with versatile mid-tones like #727070 and #969494, is ideal for designers and developers seeking a robust and authentic urban aesthetic. It provides a strong foundation for minimalist designs, offering excellent contrast for typography and visual hierarchy. This palette is perfect for projects that aim to evoke the raw, structured beauty of modern urban environments, ensuring a sophisticated and timeless appeal.

Best used for

  • Branding for urban developers
  • Minimalist UI/UX design
  • Architectural renders and visualizations
  • Digital art and background textures
  • Photography backdrops and themes
  • Industrial-themed websites

Suggested color roles

primary

Utilize #4D4B4B as a dark, grounding gray for main elements, conveying strength and texture.

secondary

Apply #727070 for secondary content, borders, or subtle background variations to add depth.

accent

Incorporate #969494 for subtle highlights, interactive states, or to soften transitions between elements.

background

Employ #DFDFDF as a light, expansive background, providing a clean canvas that enhances content readability.

text

Set primary text in #4D4B4B for optimal readability against lighter backgrounds, or use a true black for starker contrast.

Accessibility notes

  • Ensure #4D4B4B text on #DFDFDF backgrounds meets WCAG AA contrast standards.
  • Avoid using #969494 or #BBBBBB for small text on very light backgrounds due to insufficient contrast.
  • For emphasis, use darker grays like #4D4B4B for headings and important information.
  • Test the palette with grayscale simulation to ensure visual hierarchy is maintained for all users.

Recommended combinations

Textured Depth

Creates a strong, layered foundation, perfect for dark themes, footers, or robust visual structures.

#4D4B4B · #727070 · #969494

Lightened Concrete

Ideal for main content areas, providing a light background with clear, contrasting elements and subtle texture.

#DFDFDF · #BBBBBB · #727070

Gritty Contrast

Use for balanced layouts, where dark text stands out on a light background, framed by a mid-tone.

#4D4B4B · #BBBBBB · #969494

CSS variables

:root {
  --urban-canvas-texture-1: #4D4B4B;
  --urban-canvas-texture-2: #727070;
  --urban-canvas-texture-3: #969494;
  --urban-canvas-texture-4: #BBBBBB;
  --urban-canvas-texture-5: #DFDFDF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas-texture": {
        1: "#4D4B4B",
        2: "#727070",
        3: "#969494",
        4: "#BBBBBB",
        5: "#DFDFDF",
      }
    }
  }
}

Related searches

urban texture paletteconcrete grey schemeraw city colorsminimalist industrialmodern asphalt tones

Palette colors

Hex values

Color 1#4D4B4B
·
Color 2#727070
·
Color 3#969494
·
Color 4#BBBBBB
·
Color 5#DFDFDF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.9:1Fail
4.5:1AA
6.5:1AA
2
1.8:1Fail
1.6:1Fail
2.6:1Fail
3.7:1AA18
3
2.9:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4.5:1AA
2.6:1Fail
1.6:1Fail
1.4:1Fail
5
6.5:1AA
3.7:1AA18
2.3:1Fail
1.4:1Fail

Similar palettes

More like Urban Canvas Texture

View all neutral
City Concrete Grind
Concrete Garden Grey
Graffiti Alley Hue
Graffiti Wall Grind
Industrial Urban Grit
Metro Grid Serene