Handy tools for adding colour to your emails while staying on brand

Posted on May 14, 2015 at 10:09 am Written by

We’ve talked before on the blog about the importance of being consistent with branding in your marketing communications, and how your designer will have picked a colour scheme that should be adhered to wherever possible.

If you missed it you can catch up here  Branding guidelines: Do you have any for your business?

Many ESPs and other online editing applications, such as NewZapp, refer to colours by their Hex value. A hex value is a 6 character long code that has a hash # symbol in front of it. You might have seen some of the commonly used values, such as #FFFFFF for White and #000000 for Black.

Matching colours by eye can be really tricky and not very reliable

From experience I’ve found that matching colours by eye is not the most reliable of methods, so pinning down the exact hex values for your brand colours will give you the most accurate results.

To help you to work out just what hex values you need, there are some really useful websites that you might want to bookmark. These should make life easier when adding colour to your emails with both colour conversion and colour picking tools to create extra shades of your brand colours.

Depending on the information you have about your brand colour(s), one of the following sites may be of use:

1. You have a Pantone® number only
Pantone colours are notoriously tricky to convert to an online/digital alternative, not least because they come in coated and uncoated versions for printers to refer to when producing gloss and matt print work. For this reason, a designer will often pick the best match equivalent for digital work by eye. If all you have is a Pantone reference number then a look-up sheet should help.
Pantone to Hex look-up

This stocksigns.ca web page has a chart of Pantone shades (I’m like a kid in a sweet shop here!) and alongside each one is the equivalent hex value. It might also be worth you keeping a note of the CMYK values that are provided as these might also come in handy in the future!

2. You have the  CMYK references only
CMYK references are a mix of Cyan, Magenta, Yellow and Black – the four colours that combine to make any shade of ink colour if someone is producing printed materials for you. easycalculation.com has a cool conversion tool for you to enter your CMYK values and work out your hex equivalent. You can also enter RGB values too.
CMYK-Hex-500

 

3. You have the RGB values onlyRGB is the reference for on-screen colour, and literally comprises of three values, which indicate how much Red (R), Green (G) and Black (B) go into making a digital colour.
The conversion tool at rapidtables.com converts your RGB to a Hex value and also lists a few of the most commonly used colours. There’s also a handy slider to tweak a colour and obtain the adjusted hex value.
RGB to Hex conversion tool

 

4. You don’t have a colour scheme – but you want to create one!Sometimes you get a chance to have free reign with your colour scheme. In this instance you can have some fun looking through the whole spectrum for a shade you like the look of. The W3Schools website can always be relied upon for web design and developing tools, and on their HTML Color Names page at www.w3schools.com you can browse through a range of colours and see instantly the Hex value. Its a bit less daunting that looking through the whole Pantone range.
W3Schools Color Names

 

5. You have the basic colour scheme but you’d like to use lighter/darker tints of your colour
Another W3Schools resource is their Colour Picker which has the added benefit of showing you a whole range of tones based on your core shade(s) of colour.

Applying your colours to an email campaign
Inspired by the Colour Picker above, Here’s how using a variety of shades can easily take your own emails up a notch in NewZapp’s drag and drop editor:

Start with a NewZapp Basic template

Start with a NewZapp Basic template – this is Multi-Column-3

 

Pick shades based on your core brand colour

Visit the w3schools ‘Color picker’ page and enter your core brand colour

 

Apply lighter and darker shades of your core brand colour to your email

Apply lighter and darker shades of your core brand colour to your email

 

For this example I used one of the free templates provided with every NewZapp account, and applied colours using the Design panel.

To ensure your company brand and profile are properly protected, talk to us about a bespoke, responsive, re-usable template design of your own, with exact colours already in place.

 

Get the latest Email Marketing updates & insights