Palette

Urban Echo Canvas

A stark, minimalist palette reflecting the raw textures and muted tones of city architecture and concrete.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Echo Canvas 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 Echo Canvas.

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

Data visualization

#4F4F4F#8F8F8F#CFCFCF#EAEAEA#2D2D2D

Palette guide

How to use Urban Echo Canvas

Overview

The Urban Echo Canvas palette is a minimalist and robust collection of grays, reflecting the raw textures and muted tones of city architecture and concrete. Ranging from the deep, foundational #2D2D2D to the almost white #EAEAEA, this palette provides a versatile monochrome base for designers and developers. It is excellent for creating clean, modern interfaces where content clarity and subtle visual hierarchy are paramount. The various shades of gray, including #4F4F4F and #8F8F8F, allow for nuanced differentiation of elements without introducing distracting colors, making it ideal for professional applications, minimalist websites, and industrial design aesthetics.

Best used for

Industrial design portfolios
Minimalist e-commerce platforms
Technical documentation sites
High-end software interfaces
Architectural firm branding
Modern art gallery websites

Suggested color roles

primary

#2D2D2D serves as the deep, anchoring primary color, perfect for headers, navigation, or strong brand elements.

secondary

#4F4F4F offers a substantial secondary tone, suitable for important text, section titles, or prominent UI elements.

accent

#8F8F8F can be used for subtle interactive states, borders, or to delineate sections while maintaining a muted aesthetic.

background

#EAEAEA provides a bright, clean canvas that ensures excellent readability for darker text and a fresh, modern feel.

text

For dark text on light backgrounds, use #2D2D2D or #4F4F4F. For light text on dark backgrounds, #EAEAEA or a crisp white is highly effective.

Accessibility notes

Ensure #2D2D2D text on #EAEAEA background meets WCAG AA contrast standards; it typically performs very well.
Avoid using #CFCFCF or #8F4F4F for small text on #EAEAEA backgrounds due to insufficient contrast.
Use #EAEAEA for text on #2D2D2D and #4F4F4F backgrounds to ensure optimal readability.
Maintain clear visual distinction for interactive elements using sufficient contrast or other cues.

Recommended combinations

Strong Foundation

Ideal for main layouts, providing a robust dark anchor with a clean, readable content area.

#2D2D2D · #EAEAEA · #4F4F4F

Layered UI

Excellent for creating depth in cards, modals, or layered content sections without harsh contrasts.

#EAEAEA · #CFCFCF · #8F8F8F

Interactive Contrast

Perfect for buttons and form fields, offering clear states with good contrast and a professional look.

#4F4F4F · #2D2D2D · #EAEAEA

CSS variables

:root {
  --urban-echo-canvas-1: #4F4F4F;
  --urban-echo-canvas-2: #8F8F8F;
  --urban-echo-canvas-3: #CFCFCF;
  --urban-echo-canvas-4: #EAEAEA;
  --urban-echo-canvas-5: #2D2D2D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-echo-canvas": {
        1: "#4F4F4F",
        2: "#8F8F8F",
        3: "#CFCFCF",
        4: "#EAEAEA",
        5: "#2D2D2D",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#8F8F8F

Color 3#CFCFCF

Color 4#EAEAEA

Color 5#2D2D2D

Accessibility

Contrast checker

2.5:1Fail

5.3:1AA

6.8:1AA

1.7:1Fail

2.5:1Fail

2.1:1Fail

2.7:1Fail

4.3:1AA18

5.3:1AA

2.1:1Fail

1.3:1Fail

8.8:1AAA

6.8:1AA

2.7:1Fail

1.3:1Fail

11.4:1AAA

1.7:1Fail

4.3:1AA18

8.8:1AAA

11.4:1AAA

Similar palettes

More like Urban Echo Canvas

View all neutral

City Concrete Grind

Industrial Urban Grit

Urban Bloom Concrete

Bare Concrete Stillness

Brutalist Bloom Grey

Concrete Canyon Dusk