Back to palettes

Palette

Urban Grid Rhythm

A structured grayscale palette reflecting the geometric precision and rhythmic lines of an urban grid.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Grid Rhythm 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 Grid Rhythm.

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

Data visualization

#1A1A1A#333333#4C4C4C#666666#808080

Palette guide

How to use Urban Grid Rhythm

Overview

The Urban Grid Rhythm palette offers a structured grayscale collection, reflecting the geometric precision and rhythmic lines of an urban grid. This dark-leaning monochrome includes deep #1A1A1A, balanced #333333, versatile #4C4C4C, harmonious #666666, and the lighter #808080. It's an ideal choice for designers and developers aiming to create a modern, industrial, or tech-focused aesthetic. The consistent tonal range ensures excellent visual coherence, while providing ample opportunities for contrast to establish clear hierarchies and functional design elements. This palette is inherently strong and sophisticated, perfect for conveying stability and precision.

Best used for

  • Tech company branding
  • Dark mode application interfaces
  • Industrial design websites
  • Architectural visualization
  • Photography portfolios with a moody aesthetic
  • Gaming UI or streaming overlays

Suggested color roles

primary

#1A1A1A - A very deep, almost black, serving as a powerful primary color for backgrounds, strong headings, or foundational elements.

secondary

#333333 - A dark charcoal grey, excellent for subheadings, navigation, or secondary content areas, providing clear visual separation from the primary.

accent

#808080 - A lighter medium grey, perfect for subtle highlights, interactive states (hover/active), or delicate separators, offering gentle contrast.

background

#333333 - A solid dark grey, providing a sophisticated and stable background for content, ensuring good readability with lighter text.

text

#808080 - A lighter grey that provides good readability and a soft contrast against darker backgrounds like #1A1A1A or #333333.

Accessibility notes

  • Ensure #808080 text on #1A1A1A or #333333 backgrounds meets WCAG AA contrast standards, especially for body text.
  • Avoid using #666666 text on #4C4C4C backgrounds for critical information due to potentially low contrast.
  • When using #1A1A1A as a background, ensure foreground elements have sufficient luminosity contrast.
  • Verify that interactive elements are clearly distinguishable, perhaps by using #808080 for active states.

Recommended combinations

Dark Mode Core

Ideal for a robust dark mode, using the deepest grey as background, light grey for text, and a slightly lighter dark grey for UI elements.

#1A1A1A · #808080 · #333333

Layered Detail

Creates a subtle, layered effect for complex dashboards or data displays, using varied dark to medium greys for depth.

#333333 · #666666 · #4C4C4C

Industrial Clarity

Excellent for a clean industrial aesthetic, using a mid-dark grey as a canvas, with deep grey for headings and light grey for accents.

#4C4C4C · #1A1A1A · #808080

CSS variables

:root {
  --urban-grid-rhythm-2-1: #1A1A1A;
  --urban-grid-rhythm-2-2: #333333;
  --urban-grid-rhythm-2-3: #4C4C4C;
  --urban-grid-rhythm-2-4: #666666;
  --urban-grid-rhythm-2-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grid-rhythm-2": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#4C4C4C",
        4: "#666666",
        5: "#808080",
      }
    }
  }
}

Related searches

dark grey monochrome paletteindustrial UI colorstech brand grey schememinimalist dark themeurban grid grayscale

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#333333
·
Color 3#4C4C4C
·
Color 4#666666
·
Color 5#808080
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3:1AA18
4.4:1AA18
2
1.4:1Fail
1.5:1Fail
2.2:1Fail
3.2:1AA18
3
2:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
3:1AA18
2.2:1Fail
1.5:1Fail
1.5:1Fail
5
4.4:1AA18
3.2:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Urban Grid Rhythm

View all monochrome
Grayscale Urban Loft
Urban Alley Glow
Urban Concrete Flow
Urban Graphite
Urban Graphite Canvas
Urban Graphite Soul