Episode 121 - Creating a Color Palette for Your Shopify Brand

The Podcast

Show Links

ColorHexa - https://colorhexa.com
Branding Crash Course - https://jadepuma.com/products/branding-crash-course

Help the Podcast

Apply for Shopify Store Consult - https://jadepuma.com/pages/podcast-consult-application

Transcript

Hey, Scott. Austin here.

Today, I'm going to discuss a key aspect of your brand's identity and that is the color palette.

What do you see in your mind when I say YouTube? Is it a bright red play button? If I say Facebook, do you see a blue F? And does Instagram bring a red, purple and yellow polaroid icon to mind?

While the logos for a brand are important, the colors of the brand are also important in making the brand memorable to customers.

Creating a color palette is a crucial step in establishing your brand identity, especially for a Shopify store like yours in this crowded e-commerce space. Here's why a color palette is important:

Brand Identity: Colors play a significant role in defining the look and feel of your brand. A consistent color palette makes your brand more recognizable and memorable to customers.
Emotional Connection: Colors evoke emotions and feelings. Choosing the right colors can help you connect with your target audience on an emotional level, influencing their perception of your brand.
Differentiation: A distinctive color palette can set your brand apart from competitors, making your products stand out in a crowded market.

Implementing your palette is about presenting a consistent color story across every touchpoint of your brand. From your Shopify store's homepage to the packaging of your products, your chosen colors should be present. It's this consistency that builds familiarity and trust with your audience.

To make a good color palatte, we're going to have to understand some color theory. So, let's delve into some of the foundations of color theory.

The Color Wheel

The color wheel is our guide here. It's a visual representation of colors arranged according to their chromatic relationship.

Primary Colors

Primary colors are the foundation of the color wheel. They cannot be created by mixing other colors. Although we learned in kindergarten that the primary colors for our finger paints where red, yellow and blue, in the digital world, the primary colors are red, green and blue. On the color wheel, the three primary colors are evenly spaced out, like a pie slice that takes up one third of the pie.

Secondary Colors

Secondary colors are formed by mixing two primary colors. And they go between the primary colors on the color wheel.

The result is three secondary colors. Yellow goes between red and green. Cyan goes between green and blue. And Magenta goes between blue and red.

Tertiary Colors

Tertiary colors result from mixing a primary color with a secondary color next to it on the wheel. As there are 3 primary and 3 secondary colors, that means we'll have these 6 tertiary colors between them:

Azure: A mixture of blue and cyan.
Violet: A blend of blue and magenta.
Rose: Formed by mixing red and magenta.
Orange: Created by mixing red and yellow.
Chartreuse: A mix of green and yellow.
Spring Green: A combination of green and cyan.

Color Terms

Here are some color terms that are important to understand:

Shade. A shade is created when black is added to a base color, making it darker. So a red becomes a dark red. Shades add sophistication or seriousness.
Tint. A tint is the result of adding white to a base color, making it lighter. So a red becomes a light red. Tints bring a softer, more youthful vibe.
Tone. Tone is produced by adding gray to a base color, which reduces the color's intensity or saturation. Tones reduce intensity for more nuanced and mature branding.
Hue. Hue refers to the pure color itself without tint or shade.
Saturation. Saturation is the intensity or purity of a color. A color with high saturation is vivid, while a desaturated color appears more washed out or gray.
Brightness. Brightness (or value) refers to how light or dark a color appears.

Color Relationships

Color relationships are bit of color science but they appear magical in the way that they belong together similar to the way that notes in a chord go together. Here are some commonly used color relationships.

1. Complementary Colors

A complementary color is one that, when combined with its opposite, produces white light. In this model, the primary colors (Red, Green, Blue) are each paired with one of the secondary colors (Cyan, Magenta, Yellow), which are formed by mixing the other two primaries.

Here are the main complementary color pairs in the RGB color wheel:

Red and Cyan: Red is a primary color, and cyan is a secondary color formed by mixing green and blue.
Green and Magenta: Green is a primary color, while magenta is a secondary color created by mixing red and blue.
Blue and Yellow: Blue is a primary color, and yellow is a secondary color formed by mixing red and green.

Complementary colors are particularly important as they provide high contrast and vibrant visuals when used together, and they balance each other out to produce white when mixed in the right proportions.

2. Analogous Colors

Analogous colors are groups of three colors that are adjacent to each other. They usually consist of one dominant color (which could be a primary or secondary color), and then neighboring tertiary colors on either side of the dominant color. These adjacent colors tend to have one color in common in their mix, which creates a harmonious and pleasing effect.

Here are some examples of analogous colors:

Red, Rose, and Orange: Here, Red is the primary color, and it shares a common base with Rose and Orange in the RGB color wheel. This creates a warm and cohesive color scheme.
Green, Spring Green, and Cyan: Green is the primary color, while Spring Green and Cyan are the colors adjacent to it on the wheel. This grouping shares a greenish hue, offering a cool and harmonious blend.
Blue, Azure, and Cyan: In this case, Blue is the primary color, and it pairs with Azure and Cyan, creating a serene and cool color palette.

Analogous color schemes are often found in nature and are pleasing to the eye, making them a popular choice in design. They create a sense of unity and can convey a variety of moods depending on the color temperature of the chosen hues (warm or cool). They are used to create visually appealing and cohesive designs without high contrast, offering a more subtle and harmonious visual experience.

3. Split Complementary Colors

Split complementary colors involve a variation of the standard complementary color scheme. Instead of using colors that are directly opposite each other on the wheel, a split complementary scheme uses a base color plus two adjacent tertiary colors to the base color's complement. This approach offers a strong visual contrast like the standard complementary color scheme, but with less tension and a more balanced and harmonious look.

Here's how you can identify split complementary colors in the RGB model:

Choose a Base Color: Start with a primary or secondary color from the color wheel. Let's say Red. This will be your main hue.
Identify the Complement: Find the complementary color of your base color. The complement of Red is Cyan.
Select Adjacent Tertiary Colors: Instead of using the direct complement, use the two colors adjacent to it. For Red, instead of using Cyan, you would use Azure and Spring Green, which are next to Cyan on the wheel.

This color scheme is excellent for creating a vibrant and dynamic look without the sometimes jarring contrast of direct complements. The split complementary scheme is particularly useful when you want to add variety to your color choices while maintaining balance and harmony.

4. Triadic Colors

Triadic color schemes involve using three colors that are evenly spaced around the wheel, forming a triangle. This approach creates a vibrant and balanced color palette with a harmonious blend of contrast and richness. Triadic schemes are popular because they offer strong visual contrast while retaining a sense of color harmony.

Here's how it works:

Select the First Color: Choose a starting color from the RGB color wheel. This can be a primary (Red, Green, Blue) or a secondary color (Cyan, Magenta, Yellow).
Find the Other Two Colors: From your starting color, imagine an equilateral triangle on the color wheel. The other two points of the triangle will indicate the other two colors in the triadic scheme.

Here are some examples of Triadic Color Schemes in RGB:

Primary Color Triad: Red, Green, Blue: This is the most basic triad in the RGB model, consisting of the three primary colors.
Secondary Color Triad: Cyan, Magenta, Yellow: These secondary colors also form a triad, providing a vibrant contrast.

Using a triadic color scheme in design can be very effective for creating a visually appealing and dynamic look. However, it's important to balance these colors well, as they can be quite bold and vibrant. Often, one color is used as the dominant hue, while the other two serve as accents. This approach helps to create a sense of visual cohesion while still leveraging the strong contrast and vibrancy that a triadic scheme offers.

5. Tetradic Colors

Tetradic or rectangular color schemes on the color wheel involve using four colors that are two sets of complementary pairs. This type of color scheme offers a lot of variety and can create vibrant and visually appealing combinations, but it's also one of the more complex schemes to balance effectively.

Here's how to Create a Tetradic Color Scheme. Choose Two Complementary Pairs. Start by selecting two colors that are opposites on the color wheel. Then, find another pair of complementary colors. These pairs should ideally form a rectangle on the color wheel.

Using a tetradic color scheme can be a great way to create a rich and diverse color palette for your brand or design project. However, due to the complexity of balancing four colors, it requires a thoughtful approach to ensure that the final result is harmonious and pleasing to the eye.

6. Monochromatic Colors

Monochromatic color schemes on the color wheel involve using various shades, tints, and tones of a single base color. This approach creates a cohesive and harmonious look, as all the colors in the scheme share the same hue but vary in saturation and brightness. Monochromatic schemes are often used for their simplicity and elegance, and they can convey a sense of balance and unity.

How to Build a Monochromatic Scheme:

Start with a Base Color: Choose a primary or secondary color from the RGB color wheel. This color sets the overall mood and theme of the palette.
Add Shades: Darken the base color by adding black. This creates different shades of the color, which can add depth and intensity to the design.
Add Tints: Lighten the base color by adding white. Tints increase the range of the palette, providing lighter, softer variations of the color.
Incorporate Tones: Add gray to the base color to create tones. This reduces the color’s saturation, offering more subdued versions of the color that can add sophistication to the palette.

Monochromatic color schemes are popular due to their elegant simplicity and the cohesive, unified look they create. They are particularly effective in situations where you want the focus to be on content or form rather than on color diversity.

The Meanings and Emotions Behind Colors

So let's shift from the science of the color wheel to the art and emotion of color.

Understanding the emotions and associations behind different colors can greatly enhance your ability to choose the right palette for your brand. Here's a look at common colors and the emotions they typically evoke:

Red

Emotions: Energy, passion, excitement, power
Associations: Love, danger, strength, appetite stimulation
Usage: Often used in food, entertainment, and sports industries to evoke excitement and urgency.

Blue

Emotions: Trust, calmness, responsibility, serenity
Associations: Stability, trustworthiness, professionalism
Usage: Widely used in corporate and tech industries to promote trust and reliability.

Yellow

Emotions: Happiness, optimism, creativity
Associations: Cheerfulness, warmth, attention-grabbing
Usage: Effective in children's products, creative industries, and to draw attention.

Green

Emotions: Growth, health, freshness, peace
Associations: Nature, sustainability, wealth (darker shades)
Usage: Popular in natural and organic products, financial services, and eco-friendly brands.

Orange

Emotions: Enthusiasm, friendliness, energy
Associations: Fun, youthful, affordable
Usage: Great for calls-to-action (CTA) buttons, lifestyle brands, and to create a sense of playfulness.

Purple

Emotions: Luxury, spirituality, creativity
Associations: Royalty, mystery, sophistication
Usage: Often found in beauty, luxury products, and to create a sense of premium quality.

Pink

Emotions: Romance, femininity, tenderness
Associations: Love, nurturing, playfulness
Usage: Common in beauty and fashion industries, children’s products, and to appeal to a younger, feminine audience.

Black

Emotions: Elegance, power, sophistication
Associations: Exclusivity, modernity, formality
Usage: Used in luxury brands, fashion, and to create a sleek, modern look.

White

Emotions: Simplicity, purity, cleanliness
Associations: Innocence, minimalism, clarity
Usage: Often used in healthcare, luxury, and to create a clean, simple aesthetic.

Grey

Emotions: Neutrality, balance, calmness
Associations: Professionalism, formality, sophistication
Usage: Common in corporate settings and for background colors to create a professional feel.

Brown

Emotions: Stability, reliability, comfort
Associations: Earthiness, natural, rustic
Usage: Effective in organic or natural products, and industries related to earth and nature.

Gold

Emotions: Wealth, prosperity, success
Associations: Luxury, high-quality, prestige
Usage: Common in high-end products and branding to convey luxury and exclusivity.

Each color can have multiple meanings and the context in which it is used can significantly alter its perception. It's important to consider the cultural context as well, as color associations can vary in different parts of the world. Your choice of colors should align not only with the emotions you wish to evoke but also with your brand identity and the values you want to communicate to your audience.

Creating Your Color Palette

Armed with this knowledge, how do you craft your brand's color palette? Here's a recipe that you can follow:

Understand Your Brand Personality: Your color palette should reflect your brand's personality. Is your brand playful or serious? Luxurious or affordable? Eco-friendly or tech-focused? The answers to these questions can guide your color choices.
Consider Your Target Audience: Different colors resonate differently with various demographics. Consider the preferences and cultural associations of your target audience when choosing your colors.
Look at Industry Trends: Analyze the color palettes used by successful competitors and industry leaders. This can give you insights into what works well in your market. And you don't want to look too much like one of your competitors.
Pick a Base Color: Choose a primary color that best represents your brand. This will be the most dominant color in your palette. This is the hardest part of the whole process. For my agency, JadePuma, it was easy because the brand name kind of dictates that I need to use jade green which is hex code 00a86b. But if your brand name allows you more freedom, you'll need to invest some thought into what hue your brand's primary color is. And then determine what variation of the the hue to use. Will it be a shade to make it more serious or a tint to make it brighter? The nice thing is that once the primary color decision is made, it becomes the foundation of the color palette and makes it easier to make the rest of the decisions.
Next, turn to the color wheel for your supporting cast. Complementary colors for boldness and energy, analogous for a soothing, unified look, or a triadic scheme for a lively, engaging palette. This is where artistry intertwines with science. Your creative intuition is just as crucial as the theoretical guidelines. It's about crafting a palette that resonates with your audience and brings your brand to life.

There are many tools available online to help you with the color relationships, shades, tones and tints. The one I use the most is ColorHexa, which I'll link to in the show notes. Once you put your base color in, it will show you the color schemes, shades, tints and tones for that color. From this, you'll be able to pick the rest of the colors for your palette.
When it comes to brand colors, for the bulk us -- in other words, those of us that are not artists or color experts -- it's best to go with fewer colors in your palette. At a minimum, you'll want to define these colors:

Main Color. This is the primary color for your brand.
Black. You need to define what your black color will be. Is it a pure black of #000000. Or is it a lighter tint like #333333.
White. Most brands are going to go with pure white of #ffffff. Even if you do, you should document it.

Create a Style Guide: Once you've settled on your color palette, document it in a style guide. This should include the specific color codes (like HEX or RGB values) to ensure consistency across all uses. I also define shades and tints of each color. Many times, I define up to 5 colors in light to dark array for a color.

I make sure that the shades and tints are the same number of steps away from their parent color across all colors in the pallete. That way the shades and tints will also work together in the same way that the main colors in the palette do.

These different shades and tints can be used as need for contrast purposes. A couple of common examples are:

Hover colors
Lighter or darker colors to use a backgrounds. For example, if our main brand color is green, I may use a very light green as the background for the header to seperate it from the body of the page. And the text in the header would be black. The footer though could be a dark green with white text.

Now that's not the only way to create a color palette. It is the one that I use most often. But another method I use is to use a pre-existing color palette. There are plenty of sites that show pre-defined color palettes. To see what I mean, do a Google image search for 'color palette using pale pink' or your preferred color. The results will show many, many predefined color palettes with your preferred color. And you can select the one that you like the most for your brand.

Implementation

Once you've defined your color palette, it's time to implement it. The first place is in your Shopify theme. Each theme has different color settings. So you'll need to see what settings your theme has and decide how to implement your palette within the settings. It may take a few iterations to get it feeling right. Don't be afraid to try out different combinations. Getting feedback from others can provide valuable insights into how customers will perceive the brand. And don't forget to add your brand colors to the checkout too.

You also have one color setting in your Shopify notifications. In your Shopify admin, go to Settings > Notifications to set the color.

You'll also want to go through all of you customer facining apps and update the colors with your brand's palette. Each app is going to have its own level of color controls and settings.

One last note on your color palette. And that's about how often it should be updated. Once you've zoned in our color palette, it should remain fairly static. Meaning it doesn't get updated or editted for years and years. The reason for that is two-fold.

First. Updating your colors across all of your customer touchpoints is a lot of work in your digital assets. But its ever more work in you products and packaging.

Second. One of the reasons that we create a brand is to provide consistency to the customer to build familiarity and trust. If the colors are always changing, then the consistency will not be there, which can decrease trust.

There you have it – the art and science of creating a the color palette for your brand. It's a process of understanding color psychology, leveraging the color wheel, and infusing your brand's essence into a color palette. Then consistently implementing it at every customer touch point.

It's not easy to do, but it is important. It's the type of effort that seperates the top e-commerce brands from most Shopify stores.

If you like this type of branding content and want more of it, check out my Branding Crash Course. Here comes the promo for it.

Thanks for listening.