Back to palettes

Palette

Urban Concrete Sleek

A minimalist collection of cool grays, embodying the stark and sophisticated aesthetic of industrial design.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Concrete Sleek 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 Concrete Sleek.

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

Data visualization

#2F2F2F#505050#7A7A7A#A3A3A3#CCCCCC

Palette guide

How to use Urban Concrete Sleek

Overview

The "Urban Concrete Sleek" palette is a sophisticated monochrome collection, ideal for projects demanding a modern, industrial, and minimalist aesthetic. Featuring five cool grays, from the deep #2F2F2F to the very light #CCCCCC, it offers a versatile foundation for designers and developers. This palette excels at creating clean, professional interfaces, architectural visualizations, or high-tech branding without the distraction of multiple hues. The balanced #505050 and subtle #A3A3A3 provide excellent depth and contrast, allowing for a sleek, contemporary feel that resonates with urban sophistication. Its inherent neutrality makes it highly adaptable across various design applications.

Best used for

  • Modern architectural visualizations
  • Industrial product design interfaces
  • High-tech brand websites and apps
  • Minimalist portfolio sites
  • Luxury urban apparel branding
  • Contemporary interior design concepts

Suggested color roles

primary

#2F2F2F - Best for dominant elements like main headers, navigation bars, or foundational UI components where a strong, sophisticated presence is desired.

secondary

#505050 - Ideal for subheadings, secondary buttons, or large content blocks to provide contrast and depth without being overly dark.

accent

#7A7A7A - Use sparingly for subtle highlights, interactive states, or decorative lines to add visual interest without breaking the monochrome theme.

background

#CCCCCC - Excellent for primary backgrounds, large canvases, or empty states, offering a clean, bright, and expansive feel.

text

#2F2F2F - For primary body text and headlines against lighter backgrounds like #CCCCCC or #A3A3A3 to ensure high readability and a cohesive aesthetic.

Accessibility notes

  • Ensure #2F2F2F text on a #CCCCCC background meets WCAG AAA contrast for optimal readability (ratio is 10.1:1).
  • Avoid using #A3A3A3 text on a #7A7A7A background as their contrast may be insufficient for accessibility.
  • For interactive elements, provide clear hover and focus states, possibly by shifting to a darker or lighter gray from the palette.
  • Consider using a true black or charcoal for critical text elements if the palette's grays don't provide enough contrast on specific complex backgrounds.

Recommended combinations

Dark & Light Base

A foundational pairing for strong headlines (#2F2F2F), clean backgrounds (#CCCCCC), and supporting text (#505050).

#2F2F2F · #CCCCCC · #505050

Subtle Depth

Perfect for layering UI elements, cards, or subtle gradients where differentiation needs to be understated and refined.

#505050 · #A3A3A3 · #7A7A7A

Accent Focus

Use #CCCCCC for the main canvas, #2F2F2F for primary text, and #7A7A7A for subtle accents, icons, or dividers.

#CCCCCC · #2F2F2F · #7A7A7A

CSS variables

:root {
  --urban-concrete-sleek-1: #2F2F2F;
  --urban-concrete-sleek-2: #505050;
  --urban-concrete-sleek-3: #7A7A7A;
  --urban-concrete-sleek-4: #A3A3A3;
  --urban-concrete-sleek-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-sleek": {
        1: "#2F2F2F",
        2: "#505050",
        3: "#7A7A7A",
        4: "#A3A3A3",
        5: "#CCCCCC",
      }
    }
  }
}

Related searches

urban gray color palettesleek industrial colorsmodern concrete graysminimalist monochrome designneutral gray UI palette

Palette colors

Hex values

Color 1#2F2F2F
·
Color 2#505050
·
Color 3#7A7A7A
·
Color 4#A3A3A3
·
Color 5#CCCCCC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
5.3:1AA
8.3:1AAA
2
1.7:1Fail
1.9:1Fail
3.2:1AA18
5:1AA
3
3.1:1AA18
1.9:1Fail
1.7:1Fail
2.7:1Fail
4
5.3:1AA
3.2:1AA18
1.7:1Fail
1.6:1Fail
5
8.3:1AAA
5:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Urban Concrete Sleek

View all monochrome
Concrete Jungle Hue
Graphite Cityscape
Modernist Concrete Art
Brushed Steel Aura
City Grayscale View
City Steel Gleam