Choosing Brand and Logo Colors: A Practical Guide

Brand colors have a harder job than most palettes. They have to look right on a website and a business card, on a white page and a dark photo, on a phone screen and a printed bag. They also have to stay the same everywhere for years, often in the hands of people who never met the designer who chose them.

This guide covers the practical side: how to structure a brand palette, how to make logo colors that survive every background and medium, and how to write it all down so it's used consistently. What different colors can suggest to an audience is covered in our guide Color Psychology: What Colors Mean and How to Use Them, so start there if you're still choosing a direction.

The parts of a brand palette

Most brand palettes, however large the company, come down to four kinds of color. Each has a different job and a different amount of space.

• Primary: the color people should remember. It's in the logo, on key buttons and on the most visible surfaces. Usually one color, sometimes two.
• Secondary: one or two colors that support the primary in illustrations, backgrounds and charts. They add range without competing.
• Neutrals: an off-white, one or two grays and a near-black for text and backgrounds. They take up most of the space in practice.
• Accent: a small amount of a contrasting color for highlights, badges and calls to action. Scarcity is what makes it work.

How many brand colors do you need?

Fewer than you think. A primary, one secondary, one accent and three or four neutrals is enough for most brands, and it's easy for other people to apply correctly. Every extra color is another decision someone has to make, and another way for the brand to drift.

Larger organizations often add an extended set later: tints and shades of each color for interfaces, and a wider range for charts. Treat those as derived colors built from the core palette, not as new brand colors. The Shades and Tints tool builds such a scale from one color.

An example brand palette

• White text on the green primary: 6.02:1, so the green can carry buttons and headers with white type.
• Green on the off-white: 5.52:1, so it also works as a text color for headings and links.
• Near-black text on the mustard: 10.42:1. White on mustard is only 1.67:1, so the mustard always takes dark text.
• The coral accent is in between: near-black text reaches 4.74:1 and white text only 3.68:1. Use dark labels on coral, or keep white text on it large.
• Near-black text on the off-white: 16.03:1 for long reading.

Notice the pattern. Each brand color has a text color it works with, and that pairing becomes part of the rules. Getting it right once means nobody has to guess later.

Logo colors that work everywhere

A logo is used in places you can't control: embroidered on a shirt, stamped on a box, faxed, shown tiny in a browser tab, or placed on a partner's dark website. Plan for these from the start with a small set of versions.

Full color

The main version, used on light backgrounds where you have full control. Keep it to one or two colors if you can. Gradients and fine color details look modern on screen but are harder to reproduce in print and lost at small sizes.

One color

A version in a single solid color, usually the near-black or the primary. This is the one used for engraving, stamps, single-color printing and anywhere ink is limited. If your logo only makes sense in color, for example because two parts are only told apart by hue, it will fall apart here. Design the shapes to work in one color first and add color second.

Reversed, for dark backgrounds

A light version, usually white or the off-white, for dark backgrounds and photos. Don't assume the full-color logo works on dark. In the Fern and Co palette, the green primary on the near-black is only 2.90:1 and fades away, while white on the green reaches 6.02:1. The mustard on the green, at 3.58:1, is another option for a two-color reversed logo.

Logos are exempt from WCAG contrast rules, but people still need to see them. Treat 3:1 against the background as a sensible floor, and test the logo on your real photography, not just on flat colors.

• Test the logo at favicon size, around 16 to 32 pixels, where thin details vanish.
• Print it in grayscale to see whether its parts still separate.
• Place it on white, the off-white, the near-black, the primary color and a busy photo.
• Check it on a cheap phone screen and on paper, not only on a calibrated monitor.

Screen and print: HEX, RGB and CMYK

Screens mix light in red, green and blue, while printers mix cyan, magenta, yellow and black ink. The same brand color needs a value in each system. HEX and RGB are for anything on a screen, and CMYK is the starting point for printed work.

Some bright screen colors, especially vivid greens, blues and oranges, can't be printed exactly with standard inks and will look duller on paper. Printers convert colors using profiles for a specific press and paper, so the CMYK values from a simple converter are only an approximation. For important print jobs, ask your printer for a proof, and consider choosing an equivalent from a spot color system, a set of premixed inks that prints consistently.

Here are the Fern and Co values as a simple formula converts them. The Color Converter shows the same conversions for any color.

• Primary green: #1F6F5C, rgb(31, 111, 92), approximately cmyk(72%, 0%, 17%, 56%).
• Mustard: #F2C14E, rgb(242, 193, 78), approximately cmyk(0%, 20%, 68%, 5%).
• Coral: #E4572E, rgb(228, 87, 46), approximately cmyk(0%, 62%, 80%, 11%).
• Near-black: #1C1917, rgb(28, 25, 23), approximately cmyk(0%, 11%, 18%, 89%).
• Off-white: #F5F5F4, rgb(245, 245, 244), approximately cmyk(0%, 0%, 0%, 4%).

Documenting your brand colors

A brand palette that only lives in the designer's files will drift within months. A short color page in your brand guidelines prevents that. It doesn't need to be long, but it should answer every question someone might have when they open a blank document.

1. A name for each color, such as Fern Green, so people can talk about it.
2. Its values: HEX and RGB for screens, CMYK and any spot color for print.
3. Its role: primary, secondary, neutral or accent, and roughly how much of a layout it should take.
4. The text colors that work on it, with their contrast ratios.
5. Approved combinations, such as which colors may sit next to each other or be used together in the logo.
6. Do and don't examples, shown as small pictures.

Do and don't examples

• Do use the reversed logo on dark backgrounds and photos. Don't place the full-color logo on a color it disappears into.
• Do use near-black text on mustard. Don't use white text on it.
• Do keep the coral accent for small highlights. Don't use it as a large background.
• Do use the exact values from the guide. Don't sample colors from a screenshot or a previous print job.
• Do use tints of the primary for backgrounds. Don't invent new hues for one campaign.

To share the palette with developers and other designers, open it in the Export dialog. It copies the colors as HEX, RGB, HSL, CSS variables, Tailwind, JSON, SCSS, LESS or SVG, and downloads a PDF swatch sheet you can drop into your brand guidelines.

A second example

This palette has a trap that's easy to miss. The purple primary and the near-black are both very dark, only 1.39:1 apart, so a purple logo on a dark package would almost vanish. The reversed logo here should be off-white or apricot. The teal accent is also too light for white text, at 2.59:1, so it needs the near-black for any label.

See it in use

Before you commit, put the palette on real layouts. The Palette Visualizer shows it on a website, a mobile app, graphics and typography, which quickly reveals whether the primary is too loud or the neutrals too cold.

Common mistakes

• Choosing a primary color that only works on white, with no plan for dark backgrounds.
• A logo that depends on color to make sense and breaks in one color.
• Too many brand colors, so every team uses a different mix.
• Bright screen colors that print dull, discovered after the print run.
• Documenting HEX values but not which text color goes on each brand color.