How do I make the signature colour match my brand logo exactly?

Open your logo in the image colour picker, click the brand colour to get its hex code, then use that code as the 'Accent color' in the signature builder. The accent colours your name and every link, so the signature matches your logo exactly. If your brand colour is very light, choose a darker shade for the text so it stays readable.

Published · 3 min read

Why not pick the colour by eye?

A colour that is 'close' to your logo looks clearly wrong when it sits right next to it, especially if the logo itself is in the signature. Eyes are easily fooled by similar shades, and screens show them differently. A code settles it: #0F6B5F is the same colour on every device that displays it.

The steps

  1. Open the Image color picker and load your logo file. The image stays in your browser and is not uploaded anywhere.
  2. Click a solid area of the brand colour, not an edge blended with the background. For the pixel 15, 107, 95 the tool gives #0F6B5F.
  3. Copy the hex code.
  4. In the Email signature builder, open 'Accent color'. The field is your browser's colour picker, and many pickers have a box where you can type or paste a code. Put it there.
  5. Check the preview: the name and every link, from phone to social accounts, now show in the new colour.

The tool stores the colour in one normalised lower-case form, so #0F6B5F becomes #0f6b5f in the signature code, which is the same colour. It also accepts the short three-digit form, so #abc means #aabbcc. Colour names such as teal are not accepted; the colour must be a hex code.

When the brand colour is light

Some brand colours look great in a logo and weak as text. A gold such as #F5C518 has a contrast of only 1.63 to 1 on white according to the Color contrast checker, far below comfortable reading levels for normal text, so a phone number written in it is hard to read. The answer is not to drop your brand but to pick a darker shade from the same family for the text:

  • #F5C518 on white: 1.63 to 1, fails at every text size.
  • #B8860B on white: 3.25 to 1, fine for large text only.
  • #8A6D00 on white: 4.92 to 1, passes AA for normal text.
  • #0F6B5F on white: 6.39 to 1, the tool's default colour.

Signature text is small, 14 pixels for details and 16 for the name, so treat it as normal text when you check. Keep the original light colour inside the logo, where it works as designed.

What does not change colour

The accent applies to the name and links only. Title, company and address stay in a fixed grey, body text in a fixed dark tone, and the divider between languages in light grey. That is deliberate, so the signature stays calm and readable whatever your brand colour. Remember too that some recipients use dark mode in their email program, which may adjust colours its own way, so send a test email and open it on your phone in both modes if you can.

Common questions

Can I use two colours, one for the name and one for links?

Not in this tool. There is a single accent colour applied to the name and links together.

My logo has several colours. Which should I use?

Pick the darkest or most prominent one, then check its contrast on white before you settle on it.