Back to palettes

Palette

Urban Canyon Depth

Deep, cool grays reflecting the shadowed, architectural canyons of a modern city.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Canyon Depth 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 Canyon Depth.

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

Data visualization

#3D4A4D#566265#707B7D#8A9395#A3AEB0

Palette guide

How to use Urban Canyon Depth

Overview

The "Urban Canyon Depth" palette offers a sophisticated gradient of deep, cool grays, evoking the serene yet imposing shadows of a modern city's architectural canyons. Ranging from the profound #3D4A4D (Deep Teal Gray) to the lighter #A3AEB0 (Light Slate Blue), with intermediate shades like #566265 (Dark Slate Gray), #707B7D (Cadet Gray), and #8A9395 (Light Steel Gray), this palette is ideal for projects requiring a sense of stability, professionalism, and understated elegance. Its monochromatic nature provides a solid foundation for designs that prioritize clarity and a refined, industrial aesthetic, perfect for technology or corporate branding.

Best used for

  • Corporate and financial institution websites
  • High-tech product interfaces and dashboards
  • Architectural and interior design portfolios
  • Luxury brand packaging and digital presence
  • Environmental or sustainability reports
  • Data visualization and analytics platforms

Suggested color roles

primary

#3D4A4D (Deep Teal Gray) - Excellent for main structural elements, headers, and strong brand presence, conveying depth and seriousness.

secondary

#566265 (Dark Slate Gray) - Use for sub-sections, navigation, or background panels, providing a smooth, cohesive flow.

accent

#707B7D (Cadet Gray) - Suitable for interactive elements, borders, or subtle indicators, offering gentle contrast.

background

#A3AEB0 (Light Slate Blue) - A soft, cool background that ensures readability and provides a clean, open feel for content.

text

#3D4A4D (Deep Teal Gray) for dark text on light backgrounds, or a crisp white like #FFFFFF for light text on #3D4A4D.

Accessibility notes

  • Ensure sufficient contrast when using #707B7D or #8A9395 for text on #A3AEB0.
  • Prioritize #3D4A4D or #566265 for all critical text against lighter palette colors.
  • Use a high-contrast pairing like #3D4A4D text on #A3AEB0 background for optimal readability.
  • Avoid using lighter shades for small text elements, especially on similar light backgrounds.

Recommended combinations

Shadowed Depth

Create multi-layered UI elements or subtle background patterns, mimicking architectural shadows.

#3D4A4D · #566265 · #707B7D

Clean Read

Ideal for text and background pairings, with the mid-tone for secondary information or borders.

#3D4A4D · #A3AEB0 · #8A9395

Subtle Highlight

Use for hover states, active selections, or progress bars, offering a gentle visual cue.

#566265 · #8A9395 · #A3AEB0

CSS variables

:root {
  --urban-canyon-depth-1: #3D4A4D;
  --urban-canyon-depth-2: #566265;
  --urban-canyon-depth-3: #707B7D;
  --urban-canyon-depth-4: #8A9395;
  --urban-canyon-depth-5: #A3AEB0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canyon-depth": {
        1: "#3D4A4D",
        2: "#566265",
        3: "#707B7D",
        4: "#8A9395",
        5: "#A3AEB0",
      }
    }
  }
}

Related searches

cool gray color schememonochromatic grey paletteindustrial design colorsdeep slate gray brandingurban architectural palette

Palette colors

Hex values

Color 1#3D4A4D
·
Color 2#566265
·
Color 3#707B7D
·
Color 4#8A9395
·
Color 5#A3AEB0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.1:1Fail
2.9:1Fail
4:1AA18
2
1.5:1Fail
1.4:1Fail
2:1Fail
2.8:1Fail
3
2.1:1Fail
1.4:1Fail
1.4:1Fail
1.9:1Fail
4
2.9:1Fail
2:1Fail
1.4:1Fail
1.4:1Fail
5
4:1AA18
2.8:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Urban Canyon Depth

View all neutral
Gritty Urban Canvas
Urban Alley Canvas
Urban Concrete Jungle
Urban Concrete Jungle
Urban Stone
Bare Concrete Stillness