Brand Colours That Change From Screen to Screen

One red, three colours

The brochure in the hotel rack is the right red: deep and warm, the colour on the side of the buses. On the owner's phone, the website's header looks orange. On the office monitor, nearly brown.

Nobody changed anything. The website's red and the brochure's red were never quite the same, and no two screens show the website's red alike.

A brand colour feels like a single fact about a business. In practice it is several numbers, one for each way the colour gets made, and most small businesses have written down one at most.

Why screens disagree

• Screen types differ, and many phones are set to make colours look vivid.
• Settings shift colour, from brightness to the warmer night modes.
• Office monitors are rarely adjusted, and drift as they age.
• Room light changes how any screen looks, from a dim office to sunshine.
• Image files can carry colour profiles that browsers read differently.

The last is the one a business can actually fix. Screens will always vary a little, but a logo saved with the wrong profile sits in a box of slightly different colour from the header around it.

Why paper and screens never match exactly

A screen makes colour by mixing red, green and blue light. A printer uses ink on paper: four standard inks in the CMYK process, or a single ink mixed to a recipe, called a spot colour.

The two overlap but do not match. Some bright screen colours cannot be printed with four inks, and some deep spot colours have no exact equivalent on screen.

Paper matters too. The same ink looks brighter on glossy coated stock than on uncoated letterhead, which is why spot colour guides come in a version for each.

So a brand colour is a set of close matches, each chosen for the way it will be made.

Where the website's colour came from

Ask how the colour on your website was chosen, and the answer is often uncomfortable: an eyedropper on a PDF of the brochure, a scanned business card, or one designer's monitor years ago.

An eyedropper on a PDF reads whatever that screen showed at that moment, after the software's own conversion from print colours. The value it produces is a guess at a guess.

A better starting point is the official screen equivalent that spot colour guides publish for each colour, adjusted by eye on several screens with the printed piece held beside them.

A worked example

A sightseeing bus tour company runs a small fleet of buses painted deep red, with brochures in hotel lobbies and a website that takes bookings.

The brochures were printed with a spot red, matched to the paint years ago. The website's red had been taken with an eyedropper from a PDF of the brochure.

On the owner's phone it looked orange, and on the office monitor brown. A tour booking site that resold the company's tickets showed a third red, copied from a logo file saved with an unusual colour profile.

The printer still had the spot colour on file. Starting from its published screen equivalent, the web company adjusted the value on two phones, a laptop and the office monitor, a brochure beside each in daylight.

The logo was saved again with the standard web profile, so the header and logo now match. A one-page colour sheet lists the spot colour, its CMYK mix, the hex code, and the paint and vinyl codes.

Write the numbers down

Every brand colour needs a short line of numbers: the spot colour reference, the CMYK mix for ordinary printing, the RGB and hex values for screens, and the codes for paint, vinyl or thread where used.

Put them on one page with the logo files, and give it to everyone who reproduces the brand: printer, sign shop, embroiderer, web company, and whoever builds the next trade show stand.

Without it, each supplier matches whatever sample is nearest, usually the last job they did, and the drift grows with every order.

Images and page colours

On a website, a brand colour appears in two forms: as a value in the site's code, used for headers, buttons and links, and inside image files such as the logo.

Browsers treat the two slightly differently. Colours in the code are read as standard web colour, while images are read through whatever colour profile is saved inside them.

Save web images in sRGB, the colour space browsers assume, and use the same hex value in the code that the logo uses. Then whatever a screen does to one, it does to the other.

Checking on real devices

Check the website's colours on at least four screens: an iPhone, an Android phone, a laptop and an ordinary office monitor, with night settings off and brightness at normal.

Hold the printed brochure or business card beside each, in daylight. The aim is not an exact match everywhere, which nobody achieves, but a colour that reads as the same red.

Do not tune the colour to your own screen. Whichever device it is adjusted on will look perfect, and every other one will drift further away.

Print proofs before the run

For print, approve colour on paper, not on screen. A PDF proof shows the layout; only a printed proof on the actual stock shows the colour.

Tell the printer which spot colour or CMYK mix to use, and which paper, rather than asking them to match the last job.

Keep one good printed piece in a drawer as the reference everyone compares against.

The counter-case

A business with a modest brand, used mostly online, can live with small differences between screens. Nobody notices a shade on one phone.

One about to redraw its logo or change its colours should define the new set properly rather than repair the old one.

The aim is not perfection. It is one set of numbers, written down and used by everyone, so the variation comes from the screens and not from the business.

Define each colour separately for screen and print, write the values down, and check them side by side on real devices.

Before the next print order

1. Find your spot colour or CMYK values.
2. Look up the official screen equivalent.
3. Adjust the hex value on several devices.
4. Save web images in sRGB.
5. Match the logo and header colours.
6. Write one colour sheet with every value.
7. Give it to every supplier you use.

Step six is what stops the colour drifting again. Screens will always differ a little; a business that hands every supplier the same numbers stops adding differences of its own.

The same sheet belongs alongside the current contact details you give suppliers, as covered in uniforms, vans and the old phone number.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.