Palette

Abstract Urban Canvas

A sleek and versatile monochromatic palette of urban grays, perfect for modern, abstract designs.

MonochromeMinimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#212121#424242#757575#BDBDBD#E0E0E0

Palette guide

How to use Abstract Urban Canvas

Overview

The Abstract Urban Canvas palette is a sleek and versatile monochromatic collection of urban grays, perfect for modern, abstract designs. Featuring a deep Near Black (#212121), a rich Dark Gray (#424242), a balanced Medium Gray (#757575), a light Silver Gray (#BDBDBD), and a soft Light Gray (#E0E0E0). This collection offers sophisticated depth and clarity. Designers and developers can leverage these foundational hues to create clean user interfaces, elegant branding, or impactful editorial layouts. Its focus on strong contrast and subtle tonal shifts makes it ideal for projects that aim for a refined, understated yet powerful visual presence, ensuring excellent readability and a distinctly contemporary feel across all applications.

Best used for

Minimalist website and app UI/UX
Modern corporate branding and logos
High-contrast editorial layouts and print media
Abstract photography and digital art backdrops
Architectural visualization and interior design
Data visualization requiring clarity and precision

Suggested color roles

primary

#212121 (Near Black) - Use this deep gray for dominant text, strong outlines, or as a powerful background to create high impact and define structure.

secondary

#424242 (Dark Gray) - An excellent choice for secondary text, subtle shadows, or background elements that require depth without being stark black.

accent

#E0E0E0 (Light Gray) - Essential for crisp backgrounds, primary content areas, or as a strong contrasting highlight against darker tones to ensure clarity.

background

Utilize #E0E0E0 (Light Gray) for clean, expansive canvases or #212121 (Near Black) for dramatic, sophisticated backdrops that make lighter elements pop.

text

For optimal readability, use #212121 (Near Black) or #424242 (Dark Gray) on lighter backgrounds, and #E0E0E0 (Light Gray) or #BDBDBD (Silver Gray) on darker backgrounds.

Accessibility notes

The high contrast between dark and light grays is generally good, but ensure adequate contrast for mid-gray text on mid-gray backgrounds.
Always verify contrast ratios for all text and interactive elements to meet WCAG AA or AAA standards, especially with mid-tones like #757575.
Ensure interactive elements are clearly distinguishable, perhaps by using borders or hover states, as color alone offers limited cues in monochrome.
Avoid using #BDBDBD (Silver Gray) for small text on a #E0E0E0 (Light Gray) background, as it may lack sufficient contrast for readability.

Recommended combinations

Urban Contrast

Fundamental for high-readability text, strong headings, and clean UI components, providing maximum clarity.

#212121 · #E0E0E0 · #424242

Subtle Depth

Ideal for creating subtle visual hierarchy, background layers, or ghost buttons, offering gentle tonal variation.

#424242 · #757575 · #BDBDBD

Modern Grid

Perfect for minimalist layouts, grid lines, or dividing elements where clean separation and structure are paramount.

#E0E0E0 · #212121 · #757575

CSS variables

:root {
  --abstract-urban-canvas-1: #212121;
  --abstract-urban-canvas-2: #424242;
  --abstract-urban-canvas-3: #757575;
  --abstract-urban-canvas-4: #BDBDBD;
  --abstract-urban-canvas-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-urban-canvas": {
        1: "#212121",
        2: "#424242",
        3: "#757575",
        4: "#BDBDBD",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#212121

Color 2#424242

Color 3#757575

Color 4#BDBDBD

Color 5#E0E0E0

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

8.6:1AAA

12.2:1AAA

1.6:1Fail

2.2:1Fail

5.3:1AA

7.6:1AAA

3.5:1AA18

2.2:1Fail

2.5:1Fail

3.5:1AA18

8.6:1AAA

5.3:1AA

2.5:1Fail

1.4:1Fail

12.2:1AAA

7.6:1AAA

3.5:1AA18

1.4:1Fail

Similar palettes

More like Abstract Urban Canvas

Abstract Urban Canvas

See it in context.

Ready when you are.

Built with Abstract Urban Canvas.

How to use Abstract Urban Canvas

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Urban Contrast

Subtle Depth

Modern Grid

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Abstract Urban Canvas