Brands use the psychology of color to convey their personality and to trigger emotional responses from the target market. For instance, if you want consumers to trust your brand and feel safe (possibly because of the potential sensitive nature of your industry and product), you may prefer blue. If you are unsure, seek inspiration from several logos and images that belong to direct competitors or are somehow associated with your brand. These can be used for selecting your main brand colors.
Color palettes, What are they?
A color palette is the full range of colors that your graphic designers will use for creating any user interface (UI) presentation (like a website, software and so on). ^
Why color palettes (versus one color)?
Color palettes are useful for knowing how to combine colors effectively within a single presentation. Color combinations are noteworthy because they render an overall effect that is often very different to what is likely from presenting each single component color alone. This point is most evident when looking at a single logomark against different backgrounds with varying levels of contrast. In short, the higher the contrast, the greater the logomark will stand out and be effective because humans tend to look more readily at elements that have the greatest level of contrast.
This is therefore used strategically. A common example is when webpage users select an item that becomes more contrasty (like primary action buttons*) while the other options become less contrasty. This technique allows users to recognize the less contrasty elements as representing parts of the presentation but temporarily suspend their attention from those currently less important elements (like secondary action buttons).
Furthermore, color palettes are included in the brand style guidelines to establish the only colors to be used by UI graphic designers or other creators. This ensures that the brand's appearance remains consistent across all interfaces and other touchpoints.
*primary action buttons are usually calls to action to complete current tasks (or strong warning like to 'cancel' irreversible actions). Unlike 'secondary actions' that blend into the background, these buttons should be eye catching. ^
The composition of a color palette
Typically, palettes consist of the following components.
a very dark color that is either black or nearly black. In most cases, this color is used for text. Otherwise, it may also be used as a background color.
a very light color that is either white or nearly white. In most cases, this color is used for backgrounds and clearance (aka 'white space'). Otherwise, it may also be used as text colors on a highly contrasting dark background color.
a brand color that relates most to the emotional trigger you want your brand to have on the target market. Consequently, you will use this color in the most often as the focal point, not necessarily the color with the highest usage rate. This is evident in the case of McDonald's whose focal color is yellow, even though red is often used as a background for the arches.
An accent color. This color originates from within the same color family, typically from the same side (warm or cool) of the color wheel as the other color. Sometimes, high contrast can be achieved by selecting colors that sit at 180 degrees, ie opposite to each other on the color wheel.
A 'contrasty' color. This is another, but more extreme accent color. However, it contrasts with the others. It should be very eye catching and is often used for call to actions (CTAs) buttons and hyperlinks.
Regardless of how many colors you have generated, all of them may be divided into the following 3 groups.
primary aka dominant (the background)
secondary aka complementary (often but not necessarily the brand color)
accents
Some brands have variations to these standards classifications.
For instance, Atlassian's 3 palettes are as follows.
1) a primary palette (with 2 neutrals and a brand color)
2) a secondary palette (with contrasts / accents of 5 colors) and
3) multiple 'extended palettes' (with tint and shade variations of the other 2 palettes). ^
How color palettes are used: the 60-30-10 rule
The primary, secondary and accent colors are assigned usage ratios that add up to 100%. The 60-30-10 rule has been well established in and borrowed from various fields that include interior design. As a sidenote, it is just a guide that can be used with some level of flexibility. However, since it has rendered reliable results in different fields, it is a good guideline, especially for beginners.
60% of a user interface (UI) usually comprises the background color. These colors are often neutral (like white, black or colors very close to them). (Neutral colors are subtle. Among the most common ones are black, white, brown, cream and gray. Although they are abundantly used in design, they often go unnoticed by layman users without experience in graphic design and brand management. They are so called because they often lack 'hue undertones' and are therefore thought of as being 'pure', and therefore rendering a very 'natural' feeling. The types of colors assigned to this dominant role can change between the neutrals and brand colors. For instance, bold designs like a special landing pages may assisgn a bold brand color as the 60% dominant color. See the illustration of this below.
30% is usually made of main elements like text. Brand colors are often used to this extent. However, that is not necessarily the case.
10% is made of accent colors that add contrast and interest to the page. These may be used to draw attention like calls to action (CTAs) buttons and hyperlinks. This percentage should be kept at its minimum because the contrast with the other colors tends to be very loud and, depending on your particular palette, may become intolerable beyond this point. For this reason, the common practice of swapping the assignment of the other colors between primary and secondary does not generally apply to these types of color.
Here is a palette. Before comparing it with the application of the 60-30-10 rule on the webpage below, note that black and white are interchangeable because they are in the same 'primary' palette. One can easily be swapped out for the other if that alternative creates sufficient contrast. Like the black and white, the light and hot pink can also be used interchangeably or in combination as the accent colors because they belong to the 3rd 'accent' palette. On these basis, the large white letters are using the black assignment of space and the hot pink image below the button is part of the pink allocation.
On this bold landing page; the palette's blue is used at a rate of 60% (in the background), its white at 20% (in the large print) and its pink at 10% (in the tiny print and secondary color when the button is rolled over). (Notice how, although the white and black can usually be substituted within this palette, the black can not be used below because it does not contrast sufficiently with this background).
DOMINANT: blue COMPLEMENTARY: white (or black) ACCENT: light pink or hot pink
When users scroll down, the webpage presentation switches the space allocations for the same palette of colors. The 'white' is now used at a rate of 60%, the purple is now at 30% and the black is at 10%.
DOMINANT: white (or black)
COMPLEMENTARY: blue or pinks
ACCENT: black
The poster immediately below follows the same 60-30-10 rule (for the most part).
Each brand varies of course. However, consider the examples above in which the neutral and contrasting colors comprised multiple color options. These colors will therefore be part of their respective palettes. On that basis, a single brand usually has multiple palettes as opposed to only 3 colors. As discussed above, Atlassian, a software company, offers 3 palettes, the 'extended' of which offer further numerous tint and shade variations for the earlier palettes. Keep in mind that color palettes are designed to provide all the possible colors creators can ever use. On that basis, provide sufficient options. ^
How to make a color palette ... or several palettes from one brand color
Color palette generators like a mycolor.space (a free online color palette generatspaceor) produce numerous palette options based on your given color. The given color always appears first in these palette options. In this case, the given color was #E31511.
However, if you need to customize palettes, you can use the following steps.
Within a color picker, select a color you are certain to use. You can use an image color picker to select a color from any image that you upload. Once you have the code for that image, enter the color into the color picker as pictured below.
Step 1. Select a brand color. See how above. I will use the following to illustrate. This color will be the center of our palette.
From this point, create several colors that are lighter and darker than the brand color. For this illustration, I will create 4 lighter colors (the process of which can be replicated to create 4 darker ones).
To create the 4 lighter colors, adjust the a) saturation and b) hue to arrive at different colors. As pictured below, imagine an arch that extends from the top left corner (that is closest to pure white), runs directly through the brand color and then ends in the bottom right color (that is closest to pure black). Select varations by plotting points along the curved path of this arch.
This process involves moving your mouse to those new plot points to find the additional colors that you like. You can also use the sliding tool to move away from the starting color. If you are going to select 4 different colors in the lighter range, it might be helpful to first establish the farthest selection plot point and then search for acceptable colors that are around equidistant points along the arch. In this example, if I want the lightest of my lighter colors to still feel related to red, I may stop at a sallow color as below before selecting the other points that are closer to the central point.
Continue this process until you like the new colors that are noticeably different from earlier ones. Here are the lighter colors is the emerging palette.
#E31511 Crimson
#E28751 terracotta
#F3b089 Tacao
#F7f1a8 Sandwisp
#F0f1cd ≈ Tahuna Sands
Continue to arrive at the more saturated (ie darker) colors along the arch and moving the slider. (Not illustrated here). ^
Step 3: Create 'tint' and 'shade' color variations
Variations of a single color are made by adding tints (ie more pure white) and shades (ie more pure black). Online variation generators typically generate variation options in 10% increments. On that basis, you can apply the same percentage of tint or shade to all the colors of your palette so far. This will create tints and or pastel variations. To find varitions for each color within the color family you created in the previous step. scroll down to the 'variations' section of the color picker (as pictured below using the brand color).
Select variations with the level of tint you like. If I select 40%, I will apply 40% in the same way to all other of the colors in the color family from the previous step.
#E31511 Crimson (original)
#Ee7370 ≈ Froly (lighter variation)
#E28751 Terracotta (original)
#Eeb797 Tacao (lighter variation)
#F3b089 Tacao (Original)
#F8d0b8 Danny Cream (lighter variation)
.. and so on.
Repeat this process for lighter and darker variations. Of course, the darker variations require you to select 'shades' at 40%. Upon completion, you should have a range that looks like this. Ensure that there is sufficient variation among the 3 variations of any single color.
At this point, you can select parts of the palette that you like to be included into a 3-component palette (with 2 interchangeable neutrals, a brand color and a contrasting color). To make this final selection, consider the level of contrast you need. See below how 3 new palettes emerged in this example.
You can create even more palettes from these new ones. For instance, you can use this smaller color family as the basis for finding new variations (using the same process from above). See a new palette with variations highlighted below.
As a fun fact and as illustrated below, you can even overlay a color filter onto any palette to arrive at entirely new colors.
Step 4: Establish color rules for your brand style guidelines
Once you have established the 3 components of your palette (ie primary, secondary and accents), create the color-related rules that must be added to your brand style guidelines that are based on acceptable levels of contrast.
Since primary and secondary colors can be used for backgrounds, test for acceptable contrast between them and elements like your logomark, wordmark, buttons of different contrasting colors, hyperlinks, font sizes, accent shapes and so on. Apply the same content to these different backgrounds, change the colors of each content as needed and then compare and contrast them until you can establish the rules for creators. See the demonstration (below) of this process and how to then apply the rules on a webpage.
Other rules are based on conditions. For instance. some brands allow greater use of contrast (in the form of illustrations) when brand awareness is already well established. ^
Free online color picker. My favorite. Select colors from any image, automatic suggested variations, suggested combinations, automatic conversioins among 8 code formats including hexadecimal and CMYK.
Brand voice refers to the brand's comunication style that helps to evoke ideas of a brand's personality. It encompassesevery conceivable element; from word choice, level of formality to cultural slant and so on. Just like other external brand elemnts, it has its own special place in the brand style manual. The 'brand voice' complements other external elements (like the name and logo) in delivering the human-like brand persona so consistently that it is memorable. This post will exclusively discuss taglines, which is one way in which 'brand voice' is expressed.
A tagline is a simple, concise phrase that is reiterated after a brandname, at the end of every advertisement or other marketing material.
Ideally, it is used strategically, often communicating a brand's unique value proposition, competitive advantage (or why the market should select your brand over others and or what a business does. In other words, the focus of a tagline should not be to sound catchy if a catchy expression is not very meaningful in any of these ways. As modern consumers grow wary of stiff corporate language, taglines need to sound more and more like the voice of a familiar person with a personality the target finds attractive.
Types of Tagline & Their Application
The following are among the most common types of tagline. Notice how they stress the brand's competitive advantage.
Differentiation tagline. Use this when you need a rallying cry to the public about why they should join your tribe over the competition. This tagline can be very useful for exclusivity marketing or brand positioning. For branding positioning, you stress that your brand is 'the only one that does __X__' or 'can render y results' (within the context of industrial conditions that make those results otherwise unachievable).
Example: Apple - "Think different" because the Apple tribe is 'more creative' and therefore different from PC users who they consider to be mundane. This tagline is a rally cry to other 'rebel' and 'creator' personalities; essentially calling to them to step away from the uncreative, normal plebes and into their exclusive tribe.
Example: The nature of its business sets the expectation that Tampa Gemeral Hospital has a naturally 'caregiver' personality, a personality one might expect to have a sweet voice about caring the most. However, this brand differentiates itself unlike others with such bold language that it is hard not to notice it when it says that it 'Other hospitals practice medicine. We define it.' Contrast this with the softer voices of other 'caregiver' hospital brands like 'keeping you\ well', 'exceptional care close to you' or the Salvation Army's 'caregiver' tagline of "doing the most good".
Example: L'Oreal - "Because you're worth it". Having the 'lover' brand personality archetype, this brand meets esteem needs (see Maslow's Hierarchy of needs) and appeals to the vanity with hints of prestige. It is unapologetic about how its higher-than-usual price and unnecessarily fancy packaging. This language will resonate with those of like mind, people who think they deserve the 'finer' things.
Value-creation, results-oriented tagline. Use this tagline if you want to stress what the product will surely accomplish, especially if this is your brand's competitive advantage. I find that brands with a 'wizard' personality traits speak like this because they promise transformation, they present themselves as the catalyst to 'make things happen'.
Example: These taglines are often used for products whose competitive advantage is related to high levels of hard and measurable performance. This is evident in cases like; Energizer's "Keep going and going" stresses performance; Tide's "Tide's in, dirt's out"; Good Year's "More driven"; Volvo's "For life" which is likely backed up by strict compliance with health and safety requirements that ensure good life-saving qualities.
Example: Geico's '15 minutes could save you 15% or more on car insurance/'
Literal tagline. This tagline is not as emotionally exicting. Rather, it simply describes the brand's function or what it does, literally. It is ideal for situations in which the brand name on its own is not sufficiently descriptive of the business and or the brand is new in the market.
Examples. I think this voice reflects the sober nature of the 'sage' brand personality very well. It appears a good fit for situations in which the consumable product changes with each customer, thereby requiring a promise of the brand's work ethic. Illustrations include the following.
New York Times' "All the news that's fit to print" which suggests that it is a serious brand that only prints quality content.
Use taglines that are appropriate to your brand's stage within its life cycle. Specifically, resist the temptation to imitate the catchy and often vague nature of world famous brands. Remember that they are so well known that their voice no longer needs to inspire brand awareness. Literal taglines are more suitable than vague taglines like IBM's 'Think' are more suitable for a startup. Nike's 'Just Do It' would mean nothing for a startup but has great meaning for Nike. Literal taglines must use keywords to raise brand awareness. Examples: This type of tagline is useful for new businesses, especially when the brand name alone is not sufficiently descriptive of the offering. Illustrations include the following.
Theresa Caputo, the Long Island Medium.
By using the keyword 'car insurance, this example is include here. However, Geico's, '15 minutes could save you 15% or more on car insurance' is also a great results-oriented tagline that can be emulated by even very new brands. This is such a winner tagline because it concisely says so much; what they do, the results you can expect and it contains keywords (car insurance). It is such a winner that it likely made sales. If prospective clients not knowing it alongside competing brands like Statefarm or Allstate, it delivers much more useful information. For instance, Statefarm's tagline is 'like a good neighbor, Statefarm is there' and Allstate's is 'you're in good hands'. While both acceptable, they rely on prior brand knowledge.
Janes Doe, on-call baby sitters in Charington Towers
TIPS TO RECAP
Keep it simple, short and easily digestible for your target market.
Use power words that forms your message's 'rhetorical appeal'-related trigger / brand positioning differentiator, whether the most powerful one emotion (pathos) or logical (logos) or ethics (ethos / principles). Rhetorical appeals are methods of influencing others as defined by Aristotle. Power words should resonate with your target. Research 'power words' for your industry if you need help.
Experiment! For instance, associate the tagline with your target's frequent habits. This is the basis for the success of Kit Kat's 'Have a break, have a Kit Kat' because pretty much everyone takes (snack) breaks throughout the day.
Reflect the tone of voice of your brand personality. The vocabulary and other stylistic choices shoould reflect the personalities of the target market and brand. If you sell gardening gear, talk like a gardener (NOT a banker). If you are talking to tweens, loosen up your language accordingly and so on. Here are some examples.
The 'rebel' personality has a tone that is more harsh, direct and blunt than normal. It is unapologetic.
Harley Davidson - "Screw it, let's ride" is consistent with the brand's personality. Its target feel that, when life is stressful, they should all go riding.
Apple - "Think different"
Keep and follow a brand style manual. For instance, have templates that reflect how to respond to different circumstances.
MORE CONTENT RELATED TO EXPRESSING A BRAND VOICE WITH TAGLINES
