Palette

Canvas Loft Echo

A muted urban loft aesthetic, reflecting the quiet simplicity of exposed canvas and raw concrete textures.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3D3D3#C0C0C0#808080#A9A9A9#E0E0E0

Palette guide

How to use Canvas Loft Echo

Overview

The Canvas Loft Echo palette embodies a muted urban loft aesthetic, reflecting the quiet simplicity of exposed canvas and raw concrete textures. Featuring a range of sophisticated greys, from the light #D3D3D3 (Light Grey) and #C0C0C0 (Silver) to the balanced #808080 (Grey) and #A9A9A9 (Dark Grey), topped with the airy #E0E0E0 (Gainsboro), this palette offers a minimalist and timeless appeal. It's an excellent choice for designers seeking to convey modernity, sophistication, and understated elegance. This versatile collection of neutrals is perfect for projects that require a clean, uncluttered, and refined visual identity.

Best used for

Minimalist website and app design
Architectural and interior design portfolios
Art gallery and museum branding
High-end fashion or lifestyle product packaging
Urban real estate marketing
Contemporary furniture design

Suggested color roles

primary

Use #C0C0C0 (Silver) for dominant backgrounds or large content blocks to establish a clean, neutral foundation.

secondary

Employ #A9A9A9 (Dark Grey) for subheadings, navigation, or as a strong contrasting element for text.

accent

Apply #808080 (Grey) sparingly for interactive elements, subtle borders, or key textual highlights to add depth.

background

The light #D3D3D3 (Light Grey) or #E0E0E0 (Gainsboro) provides an airy, sophisticated canvas for content.

text

For optimal readability, use black or very dark charcoal text (e.g., #222222) on lighter greys, and white text on #808080 or #A9A9A9.

Accessibility notes

Ensure sufficient contrast between text and background, especially when pairing similar grey tones.
Dark text (e.g., #000000) is crucial on lighter greys like #D3D3D3 and #E0E0E0 for readability.
White text on #808080 and #A9A9A9 generally provides good contrast.
Avoid using light-colored text on lighter greys, as it will likely fail contrast standards.

Recommended combinations

Urban Foundation

Ideal for clean website layouts, sophisticated branding, or establishing a minimalist aesthetic.

#D3D3D3 · #C0C0C0 · #A9A9A9

Concrete Depth

Perfect for creating subtle visual hierarchy, interactive elements, or modern infographics.

#808080 · #A9A9A9 · #E0E0E0

Loft Light

Great for airy backgrounds, dividing sections, or a refined, understated user interface.

#E0E0E0 · #D3D3D3 · #C0C0C0

CSS variables

:root {
  --canvas-loft-echo-1: #D3D3D3;
  --canvas-loft-echo-2: #C0C0C0;
  --canvas-loft-echo-3: #808080;
  --canvas-loft-echo-4: #A9A9A9;
  --canvas-loft-echo-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canvas-loft-echo": {
        1: "#D3D3D3",
        2: "#C0C0C0",
        3: "#808080",
        4: "#A9A9A9",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#D3D3D3

Color 2#C0C0C0

Color 3#808080

Color 4#A9A9A9

Color 5#E0E0E0

Accessibility

Contrast checker

1.2:1Fail

2.6:1Fail

1.6:1Fail

1.1:1Fail

1.2:1Fail

2.2:1Fail

1.3:1Fail

1.4:1Fail

2.6:1Fail

2.2:1Fail

1.7:1Fail

3:1Fail

1.6:1Fail

1.3:1Fail

1.7:1Fail

1.8:1Fail

1.1:1Fail

1.4:1Fail

3:1Fail

1.8:1Fail

Similar palettes

More like Canvas Loft Echo