Palette

Gritty Urban Canvas

A raw, powerful monochrome suite inspired by the stark, textured surfaces of urban concrete and steel.

MonochromeMinimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A3A3A#6F6F6F#A8A8A8#2C2C2C#1F1F1F

Palette guide

How to use Gritty Urban Canvas

Overview

The Gritty Urban Canvas palette is a raw, powerful monochrome suite inspired by the stark, textured surfaces of urban concrete and steel. Featuring a range of deep grays from the near-black #1F1F1F and #2C2C2C, through balanced mid-tones like #3A3A3A and #6F6F6F, to a lighter #A8A8A8, this palette provides designers and developers with a robust foundation for minimalist and industrial aesthetics. Its subtle variations create depth and sophistication, making it excellent for projects that aim for a serious, modern, and unpolished feel, reflecting the authentic character of city environments.

Best used for

Modern minimalist web design
Urban photography portfolios
Industrial product showcases
Dark mode UI/UX themes
Architectural visualization projects
Streetwear brand identities

Suggested color roles

primary

Use #1F1F1F as the foundational dark color for backgrounds or main structural elements, conveying strength.

secondary

Employ #3A3A3A for secondary sections, panels, or subheadings, providing a slightly softer dark tone.

accent

Leverage #A8A8A8 as a subtle accent for highlights, interactive elements, or light text on dark backgrounds.

background

A deep tone like #2C2C2C or #1F1F1F works well for a dramatic, immersive dark background.

text

For dark backgrounds, use #A8A8A8 or white for optimal readability. For light backgrounds (if introduced), #1F1F1F is ideal for text.

Accessibility notes

Ensure sufficient contrast between #A8A8A8 text and darker grays like #3A3A3A or #6F6F6F for WCAG AA compliance.
Avoid using mid-tone grays for text on similar backgrounds; always aim for a significant luminance difference.
The darkest tones, #1F1F1F and #2C2C2C, provide excellent contrast for light text, ensuring readability.
Carefully test button states and focus indicators to ensure they are distinct and accessible within this subtle range.

Recommended combinations

Deep Urban

Excellent for a dark-themed website header, with #A8A8A8 providing clear navigation text.

#1F1F1F · #3A3A3A · #A8A8A8

Concrete Layers

Ideal for creating layered cards or sections, mimicking the varying shades of concrete surfaces.

#2C2C2C · #6F6F6F · #A8A8A8

Subtle Depth

Provides a robust base for content blocks, using #1F1F1F for headings and #6F6F6F for supporting details.

#3A3A3A · #6F6F6F · #1F1F1F

CSS variables

:root {
  --gritty-urban-canvas-2-1: #3A3A3A;
  --gritty-urban-canvas-2-2: #6F6F6F;
  --gritty-urban-canvas-2-3: #A8A8A8;
  --gritty-urban-canvas-2-4: #2C2C2C;
  --gritty-urban-canvas-2-5: #1F1F1F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gritty-urban-canvas-2": {
        1: "#3A3A3A",
        2: "#6F6F6F",
        3: "#A8A8A8",
        4: "#2C2C2C",
        5: "#1F1F1F",
      }
    }
  }
}

Hex values

Color 1#3A3A3A

Color 2#6F6F6F

Color 3#A8A8A8

Color 4#2C2C2C

Color 5#1F1F1F

Accessibility

Contrast checker

2.3:1Fail

4.8:1AA

1.2:1Fail

1.4:1Fail

2.3:1Fail

2.1:1Fail

2.8:1Fail

3.3:1AA18

4.8:1AA

2.1:1Fail

5.9:1AA

6.9:1AA

1.2:1Fail

2.8:1Fail

5.9:1AA

1.2:1Fail

1.4:1Fail

3.3:1AA18

6.9:1AA

1.2:1Fail

Similar palettes

More like Gritty Urban Canvas

Gritty Urban Canvas

See it in context.

Ready when you are.

Built with Gritty Urban Canvas.

How to use Gritty Urban Canvas

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Urban

Concrete Layers

Subtle Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gritty Urban Canvas