Back to palettes

Palette

City Grayscale View

A classic grayscale range capturing the stark lines and subtle shades of urban architecture in a calm vista.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Grayscale View 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 City Grayscale View.

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

Data visualization

#1A1A1A#3D3D3D#666666#A0A0A0#CCCCCC

Palette guide

How to use City Grayscale View

Overview

The City Grayscale View palette offers a classic and versatile grayscale range, capturing the stark lines and subtle shades of urban architecture in a calm vista. From the profound #1A1A1A and the deep #3D3D3D, through the balanced #666666 and the lighter #A0A0A0, to the soft #CCCCCC, this collection provides a timeless and sophisticated aesthetic. It's an indispensable palette for designers seeking a minimalist, elegant, or highly adaptable foundation. Ideal for projects that prioritize clarity, professionalism, and a clean visual identity, this palette allows other elements, like typography or photography, to truly shine.

Best used for

  • Corporate branding and identity systems
  • Editorial design for magazines and books
  • Photography portfolios and exhibitions
  • Minimalist web and app interfaces
  • Architectural renderings and presentations
  • High-fashion digital lookbooks

Suggested color roles

primary

Use #1A1A1A as a strong primary for backgrounds or structural elements, providing a deep, anchoring foundation.

secondary

Employ #3D3D3D for secondary content areas, navigation, or large typography, offering a robust yet sophisticated presence.

accent

Apply #666666 for subtle accents, borders, or interactive states where a mid-tone gray provides gentle emphasis.

background

Utilize #CCCCCC as a clean, bright background for main content areas, ensuring excellent readability for darker text.

text

For text on darker backgrounds, use #CCCCCC or a crisp white. For lighter backgrounds, #1A1A1A or a deep charcoal offers optimal contrast and readability.

Accessibility notes

  • Ensure sufficient contrast when pairing light grays like #A0A0A0 or #CCCCCC with lighter text; always use dark text.
  • Avoid using #666666 for small text on backgrounds of similar luminance to maintain readability.
  • The darkest shades, #1A1A1A and #3D3D3D, provide excellent contrast for white or light grey text.
  • Check contrast ratios for all text and interactive elements, especially when using mid-range grays to ensure WCAG AA compliance.

Recommended combinations

Classic Contrast

Creates a strong, elegant contrast, perfect for headlines, hero sections, or dark mode interfaces.

#1A1A1A · #3D3D3D · #CCCCCC

Subtle Depth

Ideal for creating subtle gradients or layered effects that add depth and sophistication without color.

#3D3D3D · #666666 · #A0A0A0

Clean Canvas

Provides a bright, minimalist look suitable for main content areas, allowing for clear hierarchy and readability.

#CCCCCC · #A0A0A0 · #1A1A1A

CSS variables

:root {
  --city-grayscale-view-1: #1A1A1A;
  --city-grayscale-view-2: #3D3D3D;
  --city-grayscale-view-3: #666666;
  --city-grayscale-view-4: #A0A0A0;
  --city-grayscale-view-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-grayscale-view": {
        1: "#1A1A1A",
        2: "#3D3D3D",
        3: "#666666",
        4: "#A0A0A0",
        5: "#CCCCCC",
      }
    }
  }
}

Related searches

classic grayscale palettemonochrome urban designminimalist black and whiteprofessional grey tonesarchitectural grayscale scheme

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#3D3D3D
·
Color 3#666666
·
Color 4#A0A0A0
·
Color 5#CCCCCC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3:1AA18
6.7:1AA
10.8:1AAA
2
1.6:1Fail
1.9:1Fail
4.2:1AA18
6.8:1AA
3
3:1AA18
1.9:1Fail
2.2:1Fail
3.6:1AA18
4
6.7:1AA
4.2:1AA18
2.2:1Fail
1.6:1Fail
5
10.8:1AAA
6.8:1AA
3.6:1AA18
1.6:1Fail

Similar palettes

More like City Grayscale View

View all monochrome
Monochromatic Graphite
Monochromatic Ink Wash
Monochrome Slate
Shadow Scale Study
Abstract Canvas Swirl
Abstract Ink Flow