Back to palettes

Palette

Urban Canvas Grey

A refined grayscale selection reflecting concrete structures and steel beams of a contemporary city.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C0C0C0#9A9A9A#747474#4E4E4E#282828

Palette guide

How to use Urban Canvas Grey

Overview

The Urban Canvas Grey palette (ID: urban-canvas-grey) offers a refined grayscale selection, reflecting the concrete structures and steel beams of a contemporary city. Ranging from the deep, grounding #282828 to the bright #C0C0C0, with balanced mid-tones like #747474 and #9A9A9A, this palette is a classic choice for designers and developers. It's perfect for creating minimalist, elegant, and timeless designs that prioritize clarity and sophistication. This grayscale spectrum provides excellent contrast for typography and visual hierarchy, ensuring a professional and modern aesthetic across various digital and print applications.

Best used for

  • High-end corporate branding
  • Minimalist website design
  • Photography portfolio layouts
  • Architectural visualization
  • Tech product interfaces
  • Print design for luxury goods

Suggested color roles

primary

Designate #4E4E4E as a primary mid-dark gray for main elements, offering a strong yet flexible base.

secondary

Utilize #747474 for secondary content, borders, or subtle background variations to add depth.

accent

Apply #9A9A9A for subtle highlights, interactive states, or to create a sense of refinement.

background

Employ #C0C0C0 as a clean, light background, providing an expansive canvas that emphasizes content.

text

Set primary text in #282828 for maximum readability against lighter backgrounds, ensuring clear communication.

Accessibility notes

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

Recommended combinations

Deep Grayscale

Creates a strong, grounded visual structure, perfect for dark themes, footers, or navigation.

#282828 · #4E4E4E · #747474

Light & Shadow

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

#C0C0C0 · #9A9A9A · #4E4E4E

Classic Contrast

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

#747474 · #282828 · #C0C0C0

CSS variables

:root {
  --urban-canvas-grey-1: #C0C0C0;
  --urban-canvas-grey-2: #9A9A9A;
  --urban-canvas-grey-3: #747474;
  --urban-canvas-grey-4: #4E4E4E;
  --urban-canvas-grey-5: #282828;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas-grey": {
        1: "#C0C0C0",
        2: "#9A9A9A",
        3: "#747474",
        4: "#4E4E4E",
        5: "#282828",
      }
    }
  }
}

Related searches

classic grayscale palettemodern concrete colorsdark grey schememinimalist architecture paletterefined urban grey

Palette colors

Hex values

Color 1#C0C0C0
·
Color 2#9A9A9A
·
Color 3#747474
·
Color 4#4E4E4E
·
Color 5#282828
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.6:1Fail
4.6:1AA
8.1:1AAA
2
1.5:1Fail
1.7:1Fail
3:1Fail
5.2:1AA
3
2.6:1Fail
1.7:1Fail
1.8:1Fail
3.2:1AA18
4
4.6:1AA
3:1Fail
1.8:1Fail
1.8:1Fail
5
8.1:1AAA
5.2:1AA
3.2:1AA18
1.8:1Fail

Similar palettes

More like Urban Canvas Grey

View all neutral
Gritty Urban Canvas
Urban Alley Canvas
Urban Charcoal
Urban Concrete Jungle
Urban Concrete Oasis
Urban Grid Echo