Back to palettes

Palette

Urban Charcoal

A sophisticated spectrum of grays and charcoal captures the stark, sleek architecture of an urban landscape.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#A9A9A9#C0C0C0#D3D3D3

Palette guide

How to use Urban Charcoal

Overview

The "Urban Charcoal" palette offers a sophisticated spectrum of grays and a deep teal, capturing the stark, sleek architecture of an urban landscape. Anchored by #2F4F4F (Dark Slate Gray/Teal), this palette transitions through classic grays like #696969 (Dim Gray), #A9A9A9 (Dark Gray), and #C0C0C0 (Silver), ending with the light #D3D3D3 (Light Gray). It's an exceptional choice for designers seeking to evoke a sense of modern professionalism, industrial elegance, and understated luxury. The subtle teal undertone in the darkest shade adds a unique depth, making this palette versatile for corporate, technology, or high-end lifestyle branding.

Best used for

  • Corporate and professional service websites
  • High-end technology product interfaces
  • Modern art and design portfolios
  • Luxury automotive branding
  • Architectural and interior design presentations
  • Minimalist e-commerce platforms

Suggested color roles

primary

#2F4F4F (Dark Slate Gray/Teal) - A strong, sophisticated base for main headers, footers, and prominent content blocks, conveying authority and depth.

secondary

#696969 (Dim Gray) - Excellent for subheadings, navigation, or larger content sections, providing a smooth transition and visual stability.

accent

#A9A9A9 (Dark Gray) - Use for interactive elements, borders, or subtle highlights that need to draw attention without overpowering the minimalist aesthetic.

background

#D3D3D3 (Light Gray) - A clean, bright background that ensures excellent readability for darker text and provides an open, modern feel.

text

#2F4F4F (Dark Slate Gray/Teal) for dark text on lighter backgrounds, or a crisp white like #FFFFFF for text on #2F4F4F or #696969.

Accessibility notes

  • Ensure sufficient contrast when using #A9A9A9 or #C0C0C0 for text on #D3D3D3.
  • Prioritize #2F4F4F or #696969 for all critical text against lighter palette colors for optimal readability.
  • Avoid using #D3D3D3 for small text on backgrounds like #C0C0C0 due to potential low contrast.
  • Verify contrast for interactive elements to ensure they are easily distinguishable.

Recommended combinations

Deep Urban Contrast

Creates a striking yet elegant pairing for primary content and backgrounds, with the mid-tone for secondary information.

#2F4F4F · #D3D3D3 · #696969

Sleek Gradient

Ideal for subtle background gradients or layered UI elements, building visual depth.

#696969 · #A9A9A9 · #C0C0C0

Charcoal Highlight

Use for call-to-action buttons or highlighted navigation items, providing clear visual cues.

#2F4F4F · #C0C0C0 · #A9A9A9

CSS variables

:root {
  --urban-charcoal-1: #2F4F4F;
  --urban-charcoal-2: #696969;
  --urban-charcoal-3: #A9A9A9;
  --urban-charcoal-4: #C0C0C0;
  --urban-charcoal-5: #D3D3D3;
}

Tailwind config

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

Related searches

charcoal grey color schemedark teal grey palettemodern industrial colorssleek urban designminimalist grey branding

Palette colors

Hex values

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

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.8:1AA18
4.9:1AA
6:1AA
2
1.6:1Fail
2.3:1Fail
3:1AA18
3.7:1AA18
3
3.8:1AA18
2.3:1Fail
1.3:1Fail
1.6:1Fail
4
4.9:1AA
3:1AA18
1.3:1Fail
1.2:1Fail
5
6:1AA
3.7:1AA18
1.6:1Fail
1.2:1Fail

Similar palettes

More like Urban Charcoal

View all neutral
Gritty Urban Canvas
Urban Alley Canvas
Urban Canvas Grey
Urban Concrete Jungle
Urban Grid Echo
Urban Stone