Can your logo live in a single color?

Short answer

A logo has to stay recognizable even when it loses its color: on a rubber stamp, in a fax printout, in an embroidery, in a laser engraving, or in the tiny icon on a browser tab, it often lives with just a single color or only black and white. That's why three separate versions are designed and tested from the start for every logo: one printed with a single ink, one that drops white onto a dark background, and one reduced to gray. A logo built on a gradient runs into trouble in single-color production, at small sizes, in low-resolution printing, and on materials where color reproduction is limited, because a gradient disappears when it's reduced to a single color or a few pixels, and it stops being the thing that identifies the logo's shape.

Where there's no color

In GT-04, we saw that a brand palette needs to be defined consistently on screen and on paper. But in some of the places a logo lives, color doesn't exist at all, or it's very limited.

A rubber stamp prints with a single ink color; it can't produce tonal variation or a gradient. A fax machine reduces an image to black and white dots. A newspaper ad is often single-color or low-quality printing. An embroidery works with a limited number of thread colors and sharp edges. A laser engraving on a metal plate or sandblasting on glass knows only two states: engraved and not engraved. A photocopier can turn a colored logo at the edge of a document into a gray smudge.

In all of these conditions, the logo has to rely on its shape rather than its color. A logo that's still recognizable after losing its color works in every one of these environments; a logo that isn't recognizable runs into trouble in each of them.

Three versions

A carefully built identity designs at least three more versions of the logo from the start, alongside its full-color version.

The one-color version shows all of the logo's elements in the same color. If the full-color logo has two parts separated by two colors sitting next to each other, that separation disappears in the one-color version; that's why a thin gap or line may need to be placed between the parts in the one-color version. The one-color version is usually designed in black, but it can also be printed in the brand's primary color.

The reversed version shows the logo in white or a light color on a dark background. This isn't just inverting the colors. Thin white lines on a dark background can look thicker and brighter to the eye than black lines of the same thickness, and small gaps can look like they've filled in; that's why some details are thinned out or opened up slightly in the reversed version.

The grayscale version determines in advance how the full-color logo will look in black-and-white printing and in photocopies. Here, the value dimension from DT-01 is decisive: if two different colors in the full-color logo have the same lightness, they turn into the same gray in grayscale and can't be told apart. When the grayscale version is designed, these colors are redefined as grays with enough of a lightness difference to stay distinct.

The risks of gradients

The question on the lesson card asks about the limits of a design choice that's common today: in which environments does a logo built on a gradient run into trouble?

A gradient gives a vivid, modern look on screens and in high-quality printing. Some well-known digital brands' app icons are recognized by a gradient. But a gradient runs into trouble everywhere color is absent or limited.

In single-color production, a gradient disappears completely. A stamp or an engraving can't produce the gradient's smooth transition; the logo turns either into a single flat area or into coarse dots that imitate the gradient. If the logo's identity is in the gradient, nothing is left in a single color. That's why a brand with a gradient icon also has to prepare a black or white, single-color version from the start, for the places where the gradient can't be used.

A gradient loses its meaning at small sizes. In an icon made up of only a few pixels, the transition from one color to another can only appear as a handful of differently colored pixels; the eye perceives it not as a transition but as a blurry smudge.

A gradient bands in low-quality printing. On newsprint, in cheap digital printing, or on a screen working with a limited number of colors, the smooth transition splits into visible steps. Something similar to the false boundaries the rainbow colormap creates in data (VG-02) shows up here inside the logo: the steps form lines the designer never drew.

A gradient often can't be produced when moving to physical materials. A sign, a metal badge, a textile label, or an embroidery either can't produce a gradient at all or can only produce it at great expense.

Using a gradient isn't forbidden; but the logo's identity has to rely on its shape, not on the gradient itself. The gradient becomes a layer that enriches the full-color version; the single-color version carries the logo's real, bare shape.

Favicon: the smallest test

The most demanding size a logo will face is the small icon that appears in browser tabs and bookmarks.

Sixteen by sixteen pixels means two hundred fifty-six squares in total. A logo's fine lettering, small details, or gradient don't fit in that space. That's why many brands use a simplified part of the logo, a single letter, or an icon for the favicon. Color simplifies too in this small version: one or two flat colors, separated from the background by a strong lightness difference. A site can offer icons at more than one size; the HTML standard asks the browser to pick the most suitable one among them based on type, environment, and size information. This is the technical way to offer a separately drawn, simplified version for the small size.

Browsers' light and dark themes also need to be taken into account; a dark favicon that looks good on a white background can disappear in a dark-themed tab.

Example — the logo on top of a photo

An events company places its logo in the corner of participants' photos in its social media graphics. The logo is used in its white reversed version. The photos vary widely: a cloudless midday sky, a dim hall, close-ups of people with different skin tones.

The white reversed logo looks sharp on a dark hall or a dark skin tone; it disappears on a bright sky or a light skin tone. A single logo version can't work on every part of a variable background.

The solution is to use this lesson's versions together. A single-color dark version is prepared for light backgrounds, and a white reversed version for dark backgrounds, and one of them is chosen for each image based on the lightness of the area the logo falls on. The logo is placed so it doesn't fall on a face, especially on skin; when that can't be avoided, a thin, semi-transparent neutral area is placed behind the logo. This way, the logo reads with the same clarity no matter which photo or which person it appears next to, and no one's face turns into a logo's background.

Common misconception

Summary

1. A logo loses its color in limited reproduction conditions like a stamp, a fax, an embroidery, an engraving, and low-quality printing; that's why one-color, reversed, and grayscale versions are designed from the start.
2. A gradient disappears in single-color production, blurs at small sizes, and bands in low-quality printing; a gradient should carry the richness of the full-color version, not the logo's identity.
3. A 16×16-pixel icon like a favicon is the logo's simplest test; on variable backgrounds, in photos of people with different skin tones, the logo is used in the right version based on the lightness of the background.

Test yourself

1. (Easy) Which three additional versions of a logo should be designed from the start?
2. (Easy) How many pixels is a favicon usually?
3. (Medium) In which environments does a logo built on a gradient run into trouble?
4. (Medium) Why isn't a reversed logo just a matter of inverting the colors?
5. (Hard) Why might two parts of a full-color logo fail to stay distinct in its grayscale version, and how is this solved?
6. (Hard) Why isn't a single version enough for a logo placed in the corner of photos with different backgrounds, and what should be done instead?

Answers

1. The one-color, reversed, and grayscale versions ("Three versions").
2. Usually 16×16 pixels ("Favicon: the smallest test").
3. A gradient disappears in single-color production like a stamp or an engraving; it turns into a blurry smudge at small sizes like a favicon; it bands in low-quality printing like newsprint and cheap digital printing; and it can't be produced, or can only be produced at great expense, on materials like signs, badges, and embroidery ("The risks of gradients").
4. Light lines on a dark background look thicker and brighter to the eye, and small gaps can look like they've filled in; some details are thinned out or opened up in the reversed version ("Three versions").
5. If two colors have the same lightness, they turn into the same gray in grayscale. When the grayscale version is designed, these colors are redefined as grays with enough of a lightness difference to stay distinct ("Three versions").
6. The white reversed logo is sharp on a dark background and on dark skin tones, and disappears on a bright sky and on light skin tones. A dark version is chosen for light backgrounds and a white version for dark backgrounds, the logo is placed so it doesn't fall on faces; when that can't be avoided, a semi-transparent neutral area is placed behind it ("Example — the logo on top of a photo").

Sources

• MDN Web Docs, "Favicon," glossary entry.
• WHATWG, "HTML Living Standard," 4.6 Links, "icon" link type.
• ITU-T, "Recommendation T.4: Standardization of Group 3 facsimile terminals for document transmission."

Next step

GT-10 moves on from the logo's versions to documenting color: it covers how to define a brand color with screen codes, CMYK values, a spot color equivalent, and paint and textile equivalents, which of these definitions becomes the "source of truth," and acceptance tolerances. UX-01 carries the same discipline into software: it discusses color tokens that run from raw color values to meaningful names, tone scales from 50 to 900, and how a change in a design file gets reflected in code at the same time.