Palette

Urban Canvas Grey

Reflecting the stark, structured beauty of cityscapes in various shades of concrete and steel.

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

#4F5C64#738A94#B8C1CA#2A363B#9DAAB5

Palette guide

How to use Urban Canvas Grey

Overview

The Urban Canvas Grey palette (ID: urban-canvas-grey-3) captures the stark, structured beauty of cityscapes, from concrete to steel. This cool, industrial collection features deep #2A363B, a strong foundation, alongside #4F5C64 and #738A94, offering versatile mid-tones. The lighter shades, #9DAAB5 and #B8C1CA, provide excellent options for backgrounds and subtle highlights. Designers and developers will find this palette perfect for creating modern, minimalist, and robust interfaces or branding. Its understated elegance and clear hierarchy ensure that designs appear professional and timeless, reflecting a strong, urban aesthetic with cool, composed sophistication.

Best used for

Industrial product design
Tech company branding
Luxury automotive websites
Professional services platforms
Architectural visualization tools
Urban planning interfaces

Suggested color roles

primary

Utilize #2A363B as the deepest, most grounding color for strong headings, footers, or primary navigation.

secondary

Apply #4F5C64 for secondary content, card backgrounds, or borders to maintain a solid, cohesive feel.

accent

Incorporate #9DAAB5 for subtle interactive elements, hover states, or to add a refined highlight.

background

Employ #B8C1CA as a crisp, light background, providing an expansive and clean canvas for content.

text

Set primary text in #2A363B for optimal contrast against lighter backgrounds like #B8C1CA, ensuring excellent readability.

Accessibility notes

Ensure #2A363B text on #B8C1CA backgrounds meets WCAG AA contrast standards.
Avoid using #9DAAB5 or #738A94 for small text on light backgrounds due to potential low contrast.
For interactive elements, ensure sufficient color contrast to indicate states (e.g., hover, active).
Test grayscale variations to ensure visual hierarchy is maintained for users with color vision deficiencies.

Recommended combinations

Industrial Base

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

#2A363B · #4F5C64 · #738A94

Concrete Contrast

Ideal for main content areas, with a light background, dark text, and subtle highlights.

#B8C1CA · #2A363B · #9DAAB5

Steel Harmony

Use for sections requiring a softer, more integrated look, showcasing harmonious cool grays.

#738A94 · #4F5C64 · #B8C1CA

CSS variables

:root {
  --urban-canvas-grey-3-1: #4F5C64;
  --urban-canvas-grey-3-2: #738A94;
  --urban-canvas-grey-3-3: #B8C1CA;
  --urban-canvas-grey-3-4: #2A363B;
  --urban-canvas-grey-3-5: #9DAAB5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas-grey-3": {
        1: "#4F5C64",
        2: "#738A94",
        3: "#B8C1CA",
        4: "#2A363B",
        5: "#9DAAB5",
      }
    }
  }
}

Hex values

Color 1#4F5C64

Color 2#738A94

Color 3#B8C1CA

Color 4#2A363B

Color 5#9DAAB5

Accessibility

Contrast checker

1.9:1Fail

3.8:1AA18

1.8:1Fail

2.9:1Fail

1.9:1Fail

2:1Fail

3.4:1AA18

1.5:1Fail

3.8:1AA18

2:1Fail

6.8:1AA

1.3:1Fail

1.8:1Fail

3.4:1AA18

6.8:1AA

5.2:1AA

2.9:1Fail

1.5:1Fail

1.3:1Fail

5.2:1AA

Similar palettes

More like Urban Canvas Grey

View all neutral

Urban Grunge Concrete

Industrial Loft Concrete