Palette

Urban Concrete Pulse

A cool, subdued palette reflecting the stark and modern aesthetic of urban concrete.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#777777#AAAAAA#DEDEDE#2B2B2B

Palette guide

How to use Urban Concrete Pulse

Overview

The Urban Concrete Pulse palette captures the essence of modern, stark urban landscapes, offering a sophisticated range of cool greys. This versatile collection, featuring hex codes like #2B2B2B, #4A4A4A, and #DEDEDE, is ideal for projects requiring a minimalist, industrial, or sleek aesthetic. Designers and developers will find its neutral tones perfect for creating clean interfaces, architectural visualizations, or contemporary branding. The palette's subtle variations, from the deep #2B2B2B to the light #DEDEDE, allow for depth and contrast without sacrificing its subdued, elegant mood. It's an excellent choice for conveying professionalism and understated style.

Best used for

Minimalist UI/UX design for tech products
Architectural visualization and rendering
Industrial product design and branding
Modern corporate websites and portfolios
Contemporary art and photography galleries
Sleek fashion and lifestyle brand identities

Suggested color roles

primary

Use #2B2B2B as the dominant dark element for strong headings, primary buttons, or foundational structural components, anchoring the design with gravitas.

secondary

Employ #4A4A4A for supporting elements like subheadings, secondary calls-to-action, or active states, providing a nuanced contrast to the primary.

accent

Apply #AAAAAA sparingly for subtle highlights, interactive states, or delicate graphic elements, offering a gentle lift without overwhelming the neutral scheme.

background

Utilize #DEDEDE as the main background color for content areas, ensuring a clean, airy feel and optimal readability for darker text.

text

For maximum readability, especially against #DEDEDE, use #2B2B2B for body text and critical information. For lighter backgrounds like #AAAAAA, #4A4A4A offers good contrast.

Accessibility notes

Ensure sufficient contrast between #2B2B2B or #4A4A4A text and #DEDEDE backgrounds for WCAG AA compliance.
Avoid using #777777 or #AAAAAA for small text on light backgrounds like #DEDEDE, as contrast may be insufficient.
When pairing mid-tones like #4A4A4A and #777777, use them for larger elements or decorative purposes rather than critical text.
Consider using a darker text color (e.g., #2B2B2B) on all light greys to maintain optimal readability across the palette.

Recommended combinations

Core Contrast

Ideal for foundational UI elements: dark text on a light background with a strong secondary color for buttons or active states.

#2B2B2B · #DEDEDE · #4A4A4A

Layered Depth

Perfect for creating subtle visual hierarchy in dashboards, panels, or layered content blocks, offering soft transitions.

#4A4A4A · #777777 · #AAAAAA

Accentuated Detail

Use #DEDEDE as a clean canvas, #2B2B2B for primary content, and #777777 for icons, dividers, or subtle interactive elements.

#DEDEDE · #2B2B2B · #777777

CSS variables

:root {
  --urban-concrete-pulse-1: #4A4A4A;
  --urban-concrete-pulse-2: #777777;
  --urban-concrete-pulse-3: #AAAAAA;
  --urban-concrete-pulse-4: #DEDEDE;
  --urban-concrete-pulse-5: #2B2B2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-pulse": {
        1: "#4A4A4A",
        2: "#777777",
        3: "#AAAAAA",
        4: "#DEDEDE",
        5: "#2B2B2B",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#777777

Color 3#AAAAAA

Color 4#DEDEDE

Color 5#2B2B2B

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.6:1AA

1.6:1Fail

2:1Fail

1.9:1Fail

3.3:1AA18

3.2:1AA18

3.8:1AA18

1.9:1Fail

1.7:1Fail

6.1:1AA

6.6:1AA

3.3:1AA18

1.7:1Fail

10.5:1AAA

1.6:1Fail

3.2:1AA18

6.1:1AA

10.5:1AAA

Similar palettes

More like Urban Concrete Pulse

View all neutral

Bare Concrete Stillness

Concrete Grid Lines

Concrete Loft Living

Industrial Loft Concrete

Urban Foundry Grey

Urban Loft Echo