Palette

Urban Graphite Canvas

A sophisticated grayscale gradient reflecting modern city architecture and industrial design.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#A9A9A9#F8F8F8#36454F

Palette guide

How to use Urban Graphite Canvas

Overview

The Urban Graphite Canvas palette offers a sophisticated grayscale gradient perfect for modern architectural and industrial design themes. Featuring deep tones like #2F4F4F and #36454F, balanced by mid-grays such as #696969 and #A9A9A9, and brightened by #F8F8F8, this collection provides versatility for sleek interfaces and elegant branding. Designers will appreciate its ability to convey professionalism and understated elegance. Developers can easily implement these hex codes to create clean, minimalist user experiences across various platforms, ensuring a cohesive and contemporary visual identity that reflects urban sophistication.

Best used for

Modern corporate websites
Architectural firm portfolios
Industrial product design interfaces
Minimalist mobile application themes
High-end fashion brand collateral
Sleek data visualization dashboards

Suggested color roles

primary

Use #2F4F4F (Dark Slate Gray) for dominant sections, headers, or primary branding elements to establish a strong, grounded foundation.

secondary

Apply #696969 (Dim Gray) for supporting elements, secondary panels, or large content blocks, offering a softer contrast to the primary.

accent

Utilize #A9A9A9 (Dark Gray) for subtle highlights, interactive elements, or icons that need to stand out gently without being overly bold.

background

Employ #F8F8F8 (White Smoke) as a clean, light background for main content areas, providing excellent readability and an airy feel.

text

For primary text, use #36454F (Charcoal) on light backgrounds like #F8F8F8 for optimal readability. For secondary text or captions, #696969 works well.

Accessibility notes

Ensure sufficient contrast between #36454F text and #F8F8F8 background for WCAG AA compliance.
Avoid placing #A9A9A9 text on #696969 backgrounds without careful contrast checking for readability.
Large text (18pt/24px or 14pt/18.66px bold) has more leeway; small text requires higher contrast ratios.
Use #2F4F4F or #36454F for critical UI elements like buttons against #F8F8F8 to ensure visibility.

Recommended combinations

Deep Foundation

Ideal for a dark primary base with a slightly different dark accent and a very light content area.

#2F4F4F · #36454F · #F8F8F8

Balanced Contrast

Excellent for general content, using mid-grays for hierarchy against a bright background.

#696969 · #A9A9A9 · #F8F8F8

Subtle Depth

Creates a sophisticated, layered grayscale look, suitable for UI elements or background textures.

#36454F · #696969 · #A9A9A9

CSS variables

:root {
  --urban-graphite-canvas-2-1: #2F4F4F;
  --urban-graphite-canvas-2-2: #696969;
  --urban-graphite-canvas-2-3: #A9A9A9;
  --urban-graphite-canvas-2-4: #F8F8F8;
  --urban-graphite-canvas-2-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graphite-canvas-2": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#F8F8F8",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#696969

Color 3#A9A9A9

Color 4#F8F8F8

Color 5#36454F

Accessibility

Contrast checker

1.6:1Fail

3.8:1AA18

8.4:1AAA

1.1:1Fail

1.6:1Fail

2.3:1Fail

5.2:1AA

1.8:1Fail

3.8:1AA18

2.3:1Fail

2.2:1Fail

4.2:1AA18

8.4:1AAA

5.2:1AA

2.2:1Fail

9.3:1AAA

1.1:1Fail

1.8:1Fail

4.2:1AA18

9.3:1AAA

Similar palettes

More like Urban Graphite Canvas

Concrete Jungle Bloom