_ Simple, non technical instructions for doing techie stuff.
Wednesday, June 30, 2021
Brand Personality - Color Palettes 101
Brand colors
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.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.