Back to palettes

Palette

Urban Canvas Grey

Cool, muted tones inspired by cityscapes and modern architectural concrete, offering understated elegance.

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

#3E4A5C#5A6B7F#7C8CA1#A0B0C4#2B3645

Palette guide

How to use Urban Canvas Grey

Overview

The Urban Canvas Grey palette (ID: urban-canvas-grey-2) presents a sophisticated range of cool, muted grays inspired by modern cityscapes and architectural concrete. From the deep, grounding #2B3645 to the airy #A0B0C4, with balanced mid-tones like #3E4A5C and #7C8CA1, this palette offers designers and developers a foundation for understated elegance. It's ideal for creating clean, professional, and contemporary designs that exude a sense of calm and precision. The subtle blue undertones in these grays provide a refreshing alternative to warmer neutral palettes, ensuring a refined and timeless aesthetic suitable for various digital and print applications.

Best used for

  • Corporate website redesigns
  • Architectural firm branding
  • Tech startup UI/UX
  • Minimalist product packaging
  • Data visualization dashboards
  • High-end editorial layouts

Suggested color roles

primary

Apply #3E4A5C as a core color for main elements, offering a substantial yet subtle presence.

secondary

Use #5A6B7F for secondary content, borders, or subtle background variations to add depth.

accent

Incorporate #A0B0C4 as a light accent for hover states, selected items, or to brighten certain areas.

background

Utilize #A0B0C4 as a light, cool background for a clean, modern canvas, ensuring excellent readability.

text

Set primary text in #2B3645 for optimal contrast against lighter backgrounds and a cohesive, professional look.

Accessibility notes

  • Ensure #2B3645 text on #A0B0C4 backgrounds meets WCAG AA contrast standards for readability.
  • Avoid using #7C8CA1 or #A0B0C4 for small text on light backgrounds due to potential low contrast.
  • For emphasis, use #2B3645 or #3E4A5C for headings and important information.
  • Test color combinations with accessibility checkers to ensure all users can easily read content.

Recommended combinations

Cool Depth

Excellent for creating a strong visual hierarchy, moving from darkest for main elements to lighter for details.

#2B3645 · #3E4A5C · #7C8CA1

Modern Elevation

Ideal for backgrounds with subtle layering, offering an open feel with grounded accents.

#A0B0C4 · #5A6B7F · #3E4A5C

Subtle Transition

Use for soft gradients or layered UI elements to add sophistication without sharp contrasts.

#7C8CA1 · #5A6B7F · #A0B0C4

CSS variables

:root {
  --urban-canvas-grey-2-1: #3E4A5C;
  --urban-canvas-grey-2-2: #5A6B7F;
  --urban-canvas-grey-2-3: #7C8CA1;
  --urban-canvas-grey-2-4: #A0B0C4;
  --urban-canvas-grey-2-5: #2B3645;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas-grey-2": {
        1: "#3E4A5C",
        2: "#5A6B7F",
        3: "#7C8CA1",
        4: "#A0B0C4",
        5: "#2B3645",
      }
    }
  }
}

Related searches

cool grey palettemodern cityscape colorsminimalist blue-greyarchitectural color schememuted urban tones

Palette colors

Hex values

Color 1#3E4A5C
·
Color 2#5A6B7F
·
Color 3#7C8CA1
·
Color 4#A0B0C4
·
Color 5#2B3645
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.1:1AA18
1.4:1Fail
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
2.2:1Fail
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
3.6:1AA18
4
4.1:1AA18
2.5:1Fail
1.6:1Fail
5.5:1AA
5
1.4:1Fail
2.2:1Fail
3.6:1AA18
5.5:1AA

Similar palettes

More like Urban Canvas Grey

View all neutral
Urban Concrete Dusk
Concrete Garden Grey
Concrete Jungle Bloom
Gritty Urban Canvas
Metro Grid Hues
Metro Grid Serene