Back to palettes

Palette

Urban Gritty Edge

A stark monochromatic spectrum reflecting the raw, industrial textures of city concrete and steel.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#333333#555555#777777#AAAAAA#DDDDDD

Palette guide

How to use Urban Gritty Edge

Overview

The Urban Gritty Edge palette offers a sophisticated monochromatic spectrum, perfect for conveying a modern, industrial aesthetic. This collection of cool greys, ranging from the deep charcoal of #333333 to the light concrete hue of #DDDDDD, captures the raw essence of cityscapes and minimalist design. Designers and developers can leverage its stark simplicity to create impactful, uncluttered interfaces and branding. The intermediate shades like #555555, #777777, and #AAAAAA provide excellent versatility for depth, shadows, and subtle transitions. Ideal for projects demanding a serious, professional, yet edgy feel, this palette ensures a cohesive, timeless visual experience that speaks to urban sophistication.

Best used for

  • Minimalist UI/UX design
  • Architectural and interior design presentations
  • High-tech product branding and packaging
  • Editorial design for modern art or photography
  • Corporate websites seeking a sophisticated, serious tone
  • Gritty urban photography portfolios

Suggested color roles

primary

#333333 - Establishes a strong, foundational presence, ideal for main headings, navigation bars, or foundational dark mode elements.

secondary

#555555 - Provides depth and contrast against lighter shades, suitable for subheadings, prominent buttons, or main content blocks.

accent

#777777 - A versatile mid-tone for subtle accents, borders, dividers, or secondary interactive elements that need to stand out gently.

background

#DDDDDD - Creates a clean, understated canvas for content, offering a soft, contemporary feel without being stark white.

text

#333333 - Excellent for primary body text on lighter backgrounds like #DDDDDD or #AAAAAA, ensuring strong readability and a cohesive look. For darker backgrounds, consider a pure white or very light grey for contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #777777 on #AAAAAA or #DDDDDD. Aim for WCAG AA or AAA compliance.
  • Avoid using mid-tones like #777777 for small text on similar background shades; increase text size or lighten/darken the text color.
  • For interactive elements, provide clear hover/focus states that significantly change color or add an outline to aid navigation.
  • When overlaying text on images, ensure a solid background behind text or use a very dark (#333333) or very light (#DDDDDD) text color for maximum legibility.

Recommended combinations

Deep Contrast

Ideal for high-contrast hero sections, dark mode themes, or bold branding statements where #333333 is text on #DDDDDD with #555555 for accents.

#333333 · #DDDDDD · #555555

Subtle Gradation

Perfect for creating layered backgrounds, subtle card designs, or UI elements that require depth without harsh lines. #777777 for text on #DDDDDD.

#AAAAAA · #777777 · #DDDDDD

Monochrome Depth

Use #555555 as a base for content blocks, with #333333 for headings and #AAAAAA for secondary text or dividers, achieving a sophisticated, muted look.

#555555 · #333333 · #AAAAAA

CSS variables

:root {
  --urban-gritty-edge-1: #333333;
  --urban-gritty-edge-2: #555555;
  --urban-gritty-edge-3: #777777;
  --urban-gritty-edge-4: #AAAAAA;
  --urban-gritty-edge-5: #DDDDDD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-gritty-edge": {
        1: "#333333",
        2: "#555555",
        3: "#777777",
        4: "#AAAAAA",
        5: "#DDDDDD",
      }
    }
  }
}

Related searches

urban grey color palettemonochromatic industrial colorsmodern concrete palettegritty minimalist design colorsdark grey aesthetic hex codes

Palette colors

Hex values

Color 1#333333
·
Color 2#555555
·
Color 3#777777
·
Color 4#AAAAAA
·
Color 5#DDDDDD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
5.4:1AA
9.3:1AAA
2
1.7:1Fail
1.7:1Fail
3.2:1AA18
5.5:1AA
3
2.8:1Fail
1.7:1Fail
1.9:1Fail
3.3:1AA18
4
5.4:1AA
3.2:1AA18
1.9:1Fail
1.7:1Fail
5
9.3:1AAA
5.5:1AA
3.3:1AA18
1.7:1Fail

Similar palettes

More like Urban Gritty Edge

View all monochrome
Industrial Grunge Wall
Urban Cement Edge
Urban Graphite Canvas
Urban Grid Minimal
City Grayscale View
City Grid Graphite