Every Client Logo in One Colour

A wall of client logos is a wall of other people’s brands. Each one arrives with its own colours, its own weight and its own idea of what sits behind it. On our site that section has to work on a light page and a dark one, and the first version handled it the blunt way: every logo sat on a white tile.

Nothing disappeared, so in one sense it worked. In dark mode it also turned the section into a sheet of stickers, twenty white rectangles on a black page. We replaced it in August.

Drawing logos with a mask

A CSS mask uses the transparency of an image to decide where an element shows through. Fill a block with our text colour, mask it with a logo, and the logo appears in that colour. When the theme changes, the colour changes, and every logo follows.

<span
  role="img"
  aria-label={logo.alt}
  class="bg-title mask-contain mask-center mask-no-repeat"
  style:mask-image={`url(${logo.url})`}
></span>

Every client then appears in the same ink and at a similar weight, which is what a wall of logos needs. The brands stay recognisable, because a good mark is recognisable by its shape.

Sorting the files automatically

A mask only works if the file has transparency. A logo exported on a solid background turns into a filled rectangle. So before drawing anything, the page loads each file at 96 pixels, samples it into a small canvas and counts how much of it is solid.

const size = 48;
ctx.drawImage(img, 0, 0, size, size);
const d = ctx.getImageData(0, 0, size, size).data;

let opaque = 0;
for (let p = 0; p < d.length; p += 4) {
  if (d[p + 3] > 32) opaque++;
}

const kind = opaque / (size * size) > 0.85
  ? 'box'
  : 'mark';

A file more than 85 percent solid is treated as a box and shown as a normal image. Everything else becomes a mask. This is simplified from ours, which also measures how light each mark is. We ran the same check on the logos live on our site today: all twenty are transparent marks, and none falls back to a box.

What a logo file needs

This is where branding and web development meet. Identities are often handed over as colour files for print and screen, and a website needs one more kind:

• A transparent background, as SVG where possible, or PNG with transparency. All twenty of ours are PNGs, which works.
• A one colour version that still reads, with inner details cut out as empty space instead of drawn in a second colour.
• Tight cropping, so the mark is not floating in empty space the page then has to guess about.

The second point is the one that fails quietly. A mark that separates its parts only by colour, a blue shape on a green one for example, becomes a single blob as a silhouette. None of the twenty logos we show has that problem, but it is the first thing we look for when a new one arrives.

If you are commissioning an identity, ask to see the mark in black on white and in white on black, before any mockup. It tells you more about how the brand will live on screens than a render of a shop front.