Palette

Urban Canvas Street

Gritty and refined, reflecting the industrial beauty of concrete, steel, and city streets.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4F#7B7B7B#AAAAAA#D0D0D0#EAEAEA

Palette guide

How to use Urban Canvas Street

Overview

The Urban Canvas Street palette is a versatile collection of refined grays, reflecting the industrial beauty of concrete, steel, and city streets. Ranging from the deep #4F4F4F to the very light #EAEAEA, with balanced mid-tones like #7B7B7B and #AAAAAA, this palette offers designers and developers a robust foundation for modern, minimalist designs. It's perfect for creating interfaces or branding that convey a sense of strength, sophistication, and raw urban texture. The clear progression of shades ensures excellent visual hierarchy and readability, making it an ideal choice for projects seeking a grounded, contemporary aesthetic with broad appeal.

Best used for

Modern web design and UI/UX
Architectural firm portfolios
Tech product interfaces
Minimalist fashion branding
Urban photography websites
Industrial design concepts

Suggested color roles

primary

Utilize #4F4F4F as a solid, grounding gray for main content blocks, headers, or navigation.

secondary

Apply #7B7B7B for secondary content, borders, or subtle background variations to add depth.

accent

Incorporate #AAAAAA for subtle highlights, hover states, or to soften transitions between elements.

background

Employ #EAEAEA as a very light, clean background that allows content to stand out with clarity.

text

Set primary text in #4F4F4F for optimal readability against lighter backgrounds, or use a true black for starker contrast.

Accessibility notes

Ensure #4F4F4F text on #EAEAEA backgrounds meets WCAG AA contrast standards.
Avoid using #AAAAAA or #D0D0D0 for small text on very light backgrounds due to insufficient contrast.
For emphasis, use darker grays like #4F4F4F for headings and important information.
Test color combinations with accessibility checkers to ensure readability for all users.

Recommended combinations

Street Depth

Creates a strong visual hierarchy, moving from darkest for main elements to lighter for details.

#4F4F4F · #7B7B7B · #AAAAAA

Light Concrete

Perfect for backgrounds and subtle layering, giving a sense of openness and modern simplicity.

#EAEAEA · #D0D0D0 · #7B7B7B

Modern Contrast

Use for balanced layouts, where dark text stands out on a light background, framed by a mid-tone.

#4F4F4F · #D0D0D0 · #7B7B7B

CSS variables

:root {
  --urban-canvas-street-1: #4F4F4F;
  --urban-canvas-street-2: #7B7B7B;
  --urban-canvas-street-3: #AAAAAA;
  --urban-canvas-street-4: #D0D0D0;
  --urban-canvas-street-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas-street": {
        1: "#4F4F4F",
        2: "#7B7B7B",
        3: "#AAAAAA",
        4: "#D0D0D0",
        5: "#EAEAEA",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#7B7B7B

Color 3#AAAAAA

Color 4#D0D0D0

Color 5#EAEAEA

Accessibility

Contrast checker

1.9:1Fail

3.5:1AA18

5.3:1AA

6.8:1AA

1.9:1Fail

1.8:1Fail

2.7:1Fail

3.5:1AA18

1.8:1Fail

1.5:1Fail

1.9:1Fail

5.3:1AA

2.7:1Fail

1.5:1Fail

1.3:1Fail

6.8:1AA

3.5:1AA18

1.9:1Fail

1.3:1Fail

Similar palettes

More like Urban Canvas Street

Urban Canvas Street

See it in context.

Ready when you are.

Built with Urban Canvas Street.

How to use Urban Canvas Street

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Street Depth

Light Concrete

Modern Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Canvas Street