Palette

Gritty Urban Canvas

A stark and modern grayscale palette reflecting the raw textures and muted tones 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 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

#333333#666666#999999#CCCCCC#EFEFEF

Palette guide

How to use Gritty Urban Canvas

Overview

The Gritty Urban Canvas palette presents a stark and modern grayscale collection, reflecting the raw textures and muted tones of an urban landscape. This neutral suite, spanning from a deep #333333 to a very light #EFEFEF, including #666666, #999999, and #CCCCCC, offers designers and developers a versatile toolkit for creating clean, contemporary, and sophisticated designs. Its clear progression from dark to light allows for excellent visual hierarchy and readability, making it ideal for professional websites, architectural renders, or any project aiming for a minimalist yet impactful aesthetic.

Best used for

Architectural firm websites
Modern art gallery interfaces
Minimalist e-commerce platforms
Professional portfolios and resumes
Clean mobile app design
Urban planning and development presentations

Suggested color roles

primary

Use #333333 for main headings, important text, or as a strong background color in dark mode.

secondary

Employ #666666 for subheadings, secondary information, or borders to create subtle distinctions.

accent

Leverage #EFEFEF as a light accent for highlights, interactive states, or clean background sections.

background

The light #EFEFEF provides a crisp, neutral background, while #CCCCCC can offer a slightly richer base.

text

For light backgrounds, #333333 offers excellent contrast for body text. For darker backgrounds, #EFEFEF is ideal.

Accessibility notes

Ensure sufficient contrast between #333333 text and light backgrounds like #EFEFEF or #CCCCCC for WCAG AA compliance.
Avoid placing #666666 text directly on #999999 background, as contrast may be insufficient for readability.
The darkest #333333 and lightest #EFEFEF offer excellent contrast for primary text and background pairings.
Test all interactive elements, such as buttons and links, to ensure their states (hover, active) are clearly distinguishable.

Recommended combinations

High Contrast

Perfect for main content areas, with #EFEFEF background and #333333 text, accented by #666666.

#333333 · #EFEFEF · #666666

Subtle Layers

Ideal for creating depth in card designs or layered UI components without harsh distinctions.

#666666 · #999999 · #CCCCCC

Dark Base

Great for a sophisticated dark header, with #CCCCCC for secondary text and #EFEFEF for highlights.

#333333 · #CCCCCC · #EFEFEF

CSS variables

:root {
  --gritty-urban-canvas-1: #333333;
  --gritty-urban-canvas-2: #666666;
  --gritty-urban-canvas-3: #999999;
  --gritty-urban-canvas-4: #CCCCCC;
  --gritty-urban-canvas-5: #EFEFEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gritty-urban-canvas": {
        1: "#333333",
        2: "#666666",
        3: "#999999",
        4: "#CCCCCC",
        5: "#EFEFEF",
      }
    }
  }
}

Hex values

Color 1#333333

Color 2#666666

Color 3#999999

Color 4#CCCCCC

Color 5#EFEFEF

Accessibility

Contrast checker

2.2:1Fail

4.4:1AA18

7.9:1AAA

11:1AAA

2.2:1Fail

2:1Fail

3.6:1AA18

5:1AA

4.4:1AA18

2:1Fail

1.8:1Fail

2.5:1Fail

7.9:1AAA

3.6:1AA18

1.8:1Fail

1.4:1Fail

11:1AAA

5:1AA

2.5:1Fail

1.4:1Fail

Similar palettes

More like Gritty Urban Canvas

View all neutral

Urban Alley Canvas

Urban Concrete Jungle

Urban Stone

City Concrete Grind

Graphite Urban Grid

Industrial Urban Grit