Back to palettes

Palette

Urban Slate Canvas

A sophisticated grayscale collection reflecting the raw yet refined beauty of concrete and urban architecture.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#A9A9A9#C0C0C0#DCDCDC

Palette guide

How to use Urban Slate Canvas

Overview

The Urban Slate Canvas palette is a sophisticated grayscale collection reflecting the raw yet refined beauty of concrete and urban architecture. With deep #2F4F4F as a strong anchor and lighter shades like #C0C0C0 and #DCDCDC providing airy contrast, this palette offers understated elegance. The mid-tones, including #696969 and #A9A9A9, ensure a smooth transition and versatility for various design elements. Ideal for designers and developers aiming for a minimalist, industrial, or modern aesthetic, this palette provides a cohesive and timeless foundation for interfaces, branding, and digital art that values structure, clarity, and a cool, contemporary feel.

Best used for

  • Industrial design websites
  • Minimalist portfolio sites
  • Modern interior design concepts
  • Tech product interfaces
  • Architectural firm branding
  • Urban photography showcases

Suggested color roles

primary

#2F4F4F - A deep, cool charcoal for main backgrounds, strong headers, or foundational UI elements, providing a sophisticated anchor.

secondary

#696969 - An excellent choice for secondary panels, prominent typography, or borders, offering subtle distinction and depth.

accent

#A9A9A9 - A versatile mid-grey for subtle highlights, interactive states, or decorative lines, adding a touch of refinement.

background

#DCDCDC - A very light, almost white, background for main content areas, providing a clean canvas for darker text and images.

text

#2F4F4F - Ideal for body text on light backgrounds like #DCDCDC. For dark backgrounds, use #DCDCDC or white for optimal readability.

Accessibility notes

  • Ensure #2F4F4F or #696969 text on #DCDCDC backgrounds meets WCAG AA contrast ratios.
  • Avoid using #A9A9A9 for small text on #C0C0C0 due to potentially low contrast.
  • The darkest and lightest colors provide optimal contrast for clear visual hierarchy.
  • Thoroughly test all text and interactive elements for readability across the palette.

Recommended combinations

Deep Slate

For robust dark themes, impactful headers, or as a sophisticated base for a modern, industrial interface.

#2F4F4F · #696969 · #A9A9A9

Concrete Light

Ideal for soft backgrounds, secondary content areas, or gradients that evoke light reflecting off concrete surfaces.

#696969 · #C0C0C0 · #DCDCDC

Sharp Edges

Use for crisp typography and interactive elements, ensuring excellent readability and a clean, high-contrast aesthetic.

#2F4F4F · #DCDCDC · #A9A9A9

CSS variables

:root {
  --urban-slate-canvas-1: #2F4F4F;
  --urban-slate-canvas-2: #696969;
  --urban-slate-canvas-3: #A9A9A9;
  --urban-slate-canvas-4: #C0C0C0;
  --urban-slate-canvas-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-slate-canvas": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#C0C0C0",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

monochrome industrial paletteconcrete grey colorsminimalist urban designmodern slate palettecool grey architecture

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#A9A9A9
·
Color 4#C0C0C0
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.8:1AA18
4.9:1AA
6.5:1AA
2
1.6:1Fail
2.3:1Fail
3:1AA18
4:1AA18
3
3.8:1AA18
2.3:1Fail
1.3:1Fail
1.7:1Fail
4
4.9:1AA
3:1AA18
1.3:1Fail
1.3:1Fail
5
6.5:1AA
4:1AA18
1.7:1Fail
1.3:1Fail

Similar palettes

More like Urban Slate Canvas

View all monochrome
City Steel Gleam
Industrial Chic Echo
Industrial Cityscape Grey
Modern Loft Concrete
City Grayscale View
City Loft Minimal