Palette

Urban Graphite Canvas

A sophisticated grayscale collection reflecting the sleek, unadorned elegance of concrete and steel structures.

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

#1A1A1A#3D3D3D#666666#999999#CCCCCC

Palette guide

How to use Urban Graphite Canvas

Overview

The Urban Graphite Canvas palette is a sleek grayscale collection, perfect for projects seeking a modern, unadorned elegance. Ranging from the deep #1A1A1A to the light #CCCCCC, with versatile mid-tones like #3D3D3D, #666666, and #999999, it evokes the sophisticated feel of concrete and steel architecture. This palette is highly effective for creating minimalist user interfaces, professional branding, and striking digital art. Designers will find its monochromatic nature simplifies color decisions while maintaining a high level of aesthetic appeal, offering a timeless and clean visual experience.

Best used for

Minimalist website designs
Luxury brand visual identities
Dark mode application themes
Architectural visualization projects
Clean portfolio websites
Sleek product packaging

Suggested color roles

primary

Use #1A1A1A (Very Dark Gray) for dominant elements, backgrounds in dark themes, or strong branding statements to establish depth.

secondary

Apply #3D3D3D (Dark Gray) for secondary sections, large text blocks, or container elements, providing a clear but subtle separation.

accent

Employ #666666 (Medium Gray) for interactive elements, icons, or subtle highlights that need to draw attention without being overly vibrant.

background

Utilize #CCCCCC (Light Gray) for light mode backgrounds or as a subtle textured overlay, offering a clean canvas for content.

text

For dark backgrounds, use #CCCCCC or #999999 for primary text to ensure readability. On lighter backgrounds like #CCCCCC, use #1A1A1A or #3D3D3D.

Accessibility notes

Ensure sufficient contrast for text, especially when using #999999 on #CCCCCC backgrounds.
For dark mode, verify that #CCCCCC text on #1A1A1A background meets WCAG AAA contrast ratios.
Avoid using #666666 for small text against #999999 backgrounds; choose higher contrast.
Maintain clear visual hierarchy by varying shades appropriately to distinguish interactive elements.

Recommended combinations

Deep Monochrome

Creates a strong, dark base with a light accent, suitable for headers and content areas.

#1A1A1A · #3D3D3D · #CCCCCC

Balanced Grays

Excellent for layered UI elements, providing subtle depth and differentiation.

#3D3D3D · #666666 · #999999

Light & Dark Contrast

A classic high-contrast pairing for text and background, offering clear readability.

#1A1A1A · #999999 · #CCCCCC

CSS variables

:root {
  --urban-graphite-canvas-1: #1A1A1A;
  --urban-graphite-canvas-2: #3D3D3D;
  --urban-graphite-canvas-3: #666666;
  --urban-graphite-canvas-4: #999999;
  --urban-graphite-canvas-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-graphite-canvas": {
        1: "#1A1A1A",
        2: "#3D3D3D",
        3: "#666666",
        4: "#999999",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#3D3D3D

Color 3#666666

Color 4#999999

Color 5#CCCCCC

Accessibility

Contrast checker

1.6:1Fail

3:1AA18

6.1:1AA

10.8:1AAA

1.6:1Fail

1.9:1Fail

3.8:1AA18

6.8:1AA

3:1AA18

1.9:1Fail

2:1Fail

3.6:1AA18

6.1:1AA

3.8:1AA18

2:1Fail

1.8:1Fail

10.8:1AAA

6.8:1AA

3.6:1AA18

1.8:1Fail

Similar palettes

More like Urban Graphite Canvas

Concrete Jungle Bloom

Grayscale Urban Loft