Palette

Urban Art Mural

A clean and crisp grey scale reflecting the stark beauty and contrasts of urban concrete art.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Art Mural 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 Art Mural.

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

Data visualization

#3A3A3A#6A6A6A#9A9A9A#C9C9C9#F5F5F5

Palette guide

How to use Urban Art Mural

Overview

The Urban Art Mural (Monochrome) palette offers a sophisticated gradient of cool grays, from the deep #3A3A3A to the near-white #F5F5F5. This collection embodies the stark beauty and textured contrasts found in urban concrete and minimalist street art. Designers can leverage the mid-tones like #6A6A6A and #9A9A9A to create depth, shadow, and dimension, while #C9C9C9 provides a softer intermediate shade. This palette is exceptionally versatile for projects requiring a clean, modern, and understated aesthetic, offering a strong foundation for typography and subtle graphical elements without overwhelming the viewer.

Best used for

minimalist web design
architectural presentations
corporate branding
fine art photography
editorial layouts
modern interior design concepts

Suggested color roles

primary

Use #3A3A3A for strong headings, primary UI elements, or as a deep background for sophisticated contrast.

secondary

Employ #6A6A6A for subheadings, secondary information, or to add subtle depth to graphics.

accent

#9A9A9A can serve as a gentle accent for borders, dividers, or subtle interactive states.

background

#F5F5F5 provides a clean, bright canvas, while #C9C9C9 offers a slightly warmer, softer base.

text

#3A3A3A or #6A6A6A against #F5F5F5 or #C9C9C9 for optimal readability. Conversely, white text on #3A3A3A.

Accessibility notes

Ensure sufficient contrast between text and background, particularly for lighter shades like #C9C9C9 and #F5F5F5.
Use darker grays like #3A3A3A for primary text to maximize legibility.
Avoid using adjacent shades (e.g., #C9C9C9 text on #F5F5F5 background) for critical information.
Test color combinations with accessibility tools to meet WCAG guidelines for contrast ratios.

Recommended combinations

Deep Contrast

For high-impact text on background or strong visual separation in UI elements.

#3A3A3A · #F5F5F5 · #6A6A6A

Subtle Gradient

Ideal for backgrounds, subtle shading, or layered visual effects in a clean design.

#6A6A6A · #9A9A9A · #C9C9C9

Clean Base

A classic, minimalist pairing for body text and background, ensuring clarity.

#F5F5F5 · #3A3A3A · #9A9A9A

CSS variables

:root {
  --urban-art-mural-2-1: #3A3A3A;
  --urban-art-mural-2-2: #6A6A6A;
  --urban-art-mural-2-3: #9A9A9A;
  --urban-art-mural-2-4: #C9C9C9;
  --urban-art-mural-2-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-art-mural-2": {
        1: "#3A3A3A",
        2: "#6A6A6A",
        3: "#9A9A9A",
        4: "#C9C9C9",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#3A3A3A

Color 2#6A6A6A

Color 3#9A9A9A

Color 4#C9C9C9

Color 5#F5F5F5

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

6.9:1AA

10.4:1AAA

2.1:1Fail

1.9:1Fail

3.3:1AA18

5:1AA

4:1AA18

1.9:1Fail

1.7:1Fail

2.6:1Fail

6.9:1AA

3.3:1AA18

1.7:1Fail

1.5:1Fail

10.4:1AAA

5:1AA

2.6:1Fail

1.5:1Fail

Similar palettes

More like Urban Art Mural

View all monochrome

City Grid Graphite

City Loft Grey

Urban Industrial Echo

Art Gallery Minimal

City Alley Shadow

City Grayscale View