Palette

Urban Canvas Blend

A clean, sophisticated mix of grays, representing the subtle beauty of an urban architect's canvas.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#808080#A9A9A9#C0C0C0#D3D3D3#4F4F4F

Palette guide

How to use Urban Canvas Blend

Overview

The Urban Canvas Blend palette offers a sophisticated range of grays, perfect for creating clean, minimalist, and modern designs. Featuring a gradient from the deep #4F4F4F to the airy #D3D3D3, alongside mid-tones like #808080 and #A9A9A9, this palette embodies understated elegance. It's a versatile choice for designers and developers seeking a neutral foundation that highlights content without distraction. The subtle shifts in gray provide depth and structure, making it ideal for corporate branding, architectural presentations, or any project aiming for a polished, contemporary aesthetic. This palette ensures clarity and timeless appeal.

Best used for

Minimalist website design
Corporate branding and identity
Architectural visualization
Photography portfolio layouts
Tech product UI/UX
Luxury fashion e-commerce

Suggested color roles

primary

Use #808080 as a foundational mid-gray for main content blocks or navigation, offering a balanced neutral.

secondary

Apply #4F4F4F for strong accents, footers, or dark mode interfaces, providing depth and contrast.

accent

Incorporate #A9A9A9 for subtle highlights, hover states, or delicate graphic elements to add sophistication.

background

Utilize #D3D3D3 as a clean, bright background that allows content to stand out, reminiscent of a fresh canvas.

text

Employ #4F4F4F for primary body text to ensure maximum readability against lighter backgrounds, or use a true black for starker contrast.

Accessibility notes

Ensure #4F4F4F text on #D3D3D3 backgrounds meets WCAG AA contrast standards.
Avoid using #A9A9A9 or #C0C0C0 for small text on light backgrounds like #D3D3D3 due to poor contrast.
Use a darker gray, such as #4F4F4F, for essential text elements for better readability.
Provide sufficient visual separation between similar gray tones to aid users with color perception differences.

Recommended combinations

Deep Neutral

Excellent for creating visual hierarchy, with the darkest as primary, mid-tone for secondary, and lightest for accents.

#4F4F4F · #808080 · #C0C0C0

Light & Airy

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

#D3D3D3 · #A9A9A9 · #808080

Subtle Gradient

Use for soft transitions in UI elements or background gradients to add depth without strong contrast.

#C0C0C0 · #A9A9A9 · #D3D3D3

CSS variables

:root {
  --urban-canvas-blend-1: #808080;
  --urban-canvas-blend-2: #A9A9A9;
  --urban-canvas-blend-3: #C0C0C0;
  --urban-canvas-blend-4: #D3D3D3;
  --urban-canvas-blend-5: #4F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas-blend": {
        1: "#808080",
        2: "#A9A9A9",
        3: "#C0C0C0",
        4: "#D3D3D3",
        5: "#4F4F4F",
      }
    }
  }
}

Hex values

Color 1#808080

Color 2#A9A9A9

Color 3#C0C0C0

Color 4#D3D3D3

Color 5#4F4F4F

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

2.6:1Fail

2.1:1Fail

1.7:1Fail

1.3:1Fail

1.6:1Fail

3.5:1AA18

2.2:1Fail

1.3:1Fail

1.2:1Fail

4.5:1AA

2.6:1Fail

1.6:1Fail

1.2:1Fail

5.5:1AA

2.1:1Fail

3.5:1AA18

4.5:1AA

5.5:1AA

Similar palettes

More like Urban Canvas Blend

Ancient Marble Sculpture

Ancient Marble Veins

Antique Book Pages