Brand colors: choosing a palette that works on screen, in print and in dark mode

First, about color psychology

“Red sells, blue builds trust, green means eco.” Plenty of guides repeat lines like these, but research on color psychology gives mixed results. What a color means depends on context, culture and category: the same red means one thing on candy packaging and another in a banking app.

So when choosing a color, two other questions matter more. Does it set you apart from competitors, who in many industries use the same two shades? And can it technically be used everywhere the brand shows up? The rest of this article answers the second question.

A palette is more than one color

A brand with only “its color” soon starts painting everything with it, and then nothing stands out. A good palette has several layers:

• A primary color, recognizable and used sparingly: buttons, highlights, the most important elements.
• Neutrals: backgrounds, text, lines and surfaces. They fill most of the screen.
• Accents, one or two supporting colors for charts, illustrations and highlights.
• Functional colors: success, warning, error. If your brand color is red, an error message needs a different shade so it isn’t mistaken for a button.

The popular 60–30–10 rule (60% neutrals, 30% a secondary color, 10% accent) isn’t a law, but it’s a good reminder that a primary color works best when it isn’t everywhere.

Contrast: can people read it

WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and interface elements such as input borders and icons. Many light brand colors, especially yellows, light oranges and light greens, fail this with white text.

That doesn’t mean changing the brand. A variant is enough: the light color for large surfaces and illustrations, a darker shade of the same color for buttons and text. Also remember that color can’t be the only carrier of information. A field with an error needs a message too, not just a red border.

Screen and print are two different worlds

A screen emits light; paper reflects it. So a brand color needs several definitions:

• HEX and RGB for websites, apps and presentations.
• CMYK for digital and offset print.
• Pantone for spot-color printing, when the color has to look identical on every batch of materials.

Very saturated screen colors, especially intense oranges, greens and blues, often fall outside what CMYK can print. Print values have to be chosen separately and checked on a proof, not converted automatically in software.

Dark mode

More and more people use their phone and computer in dark mode. A palette designed for a white background doesn’t carry over by itself:

• The primary color on a dark background often has to be lightened to keep its contrast.
• Pure black under pure white text is tiring to read. Very dark grays and a slightly muted white work better.
• The logo needs a reversed version.
• Contrast has to be checked again, separately for each pair of colors.

How to document the palette

A PDF with pretty color circles isn’t enough. The team and outside contractors need a table:

We design colors together with the mark and typography, because only as a set can you see whether the system works. If you’re starting with the logo, also read which kind of logo your company needs, and see how we approach branding.