Quick Guide to Creating a Successful Brand Color System

The color system of your brand is what sets the tone for its entire communication strategy. Colors reveal brand truth and invoke feelings, desires, and emotions from your target audience — which are necessary in order for them to connect with you. As major of a decision as this is, and as well thought out as it has to be, oddly enough choosing colors is something that designers kind of need to just let flow. When a trained eye sees the perfect combo, it will know. It is comparable to meeting the love of your life; you can’t explain why or how, but when you meet that person, the connection is there and the vision for the rest of your life makes sense.

A brand + color love connection = Punchy Drinks

To support an expert’s intuition, there is also a formal process that we go through as designers to support our selection of the perfect brand colors. My version of it goes like this:

Gain a deep understanding of the brand

First, like in any relationship, I get to know who I’m dealing with (in this case, the brand). What is it and where does it come from? What is its identity trying to achieve and what message does it want to send to the world? I take a look at everything the brand stands for and everything it wants to be. Then, I look at the market. I like to see where it stands in the sea of similar companies that do what it does. Most importantly, I try to find an opportunity to break through the clutter, always keeping in mind the brand’s original essence and category.

Sea of sameness with plant e-commerce sites

How we used color to break through for a new brand in that category

Gather inspiration and coordinating elements

After analyzing where the brand stands and developing a clear understanding of what I can do to make it stand out, I go on a crazy hunt for inspiration. I first create the initial palette and then start finding all kinds of coordinating design elements like photography, typography, icons, and layouts to help me see how the colors play out. If I feel that spark that tells me, “Yes! These colors communicate the brand essence effectively and connect it to the target audience’s emotions,” I know I’m on the right track.

Add purpose and value

Finally, I get into the technical part of a brand’s relationship with color, because although the spark is exciting, it’s not everything. In order for the relationship to last, I add meaning and purpose to each hue, especially if I am working on a digital design. This is called creating a color system.

Color systems establish the rules of the relationship, solidifying your message and avoiding miscommunication and misrepresentation of the brand.

When it comes to designing a User Interface for a website, app, or digital product, color systems are one of the most important tools. They guide users into taking subconscious actions the brand wants them to take. They not only determine what color is used for typography, buttons, backgrounds, icons, and accents but also what color combinations and tones work together in order for the design to be color accessible, (meaning enabling people with visual impairments or color vision deficiencies to interact with digital experiences in the same way as their non-visually-impaired counterparts).

A “dark mode” color palette we established for a Virgin Voyages shipboard app.

Performing accessibility audits are helpful for brand stakeholders to get a clear overview of where problems and opportunities lie within a proposed color system.

5 tips for creating a successful brand color system

No matter where you are in your process of creating a color system for your brand, follow these tips and tricks to ensure it is based on function and filled with purpose:

1. Don’t wait! Define your primary brand colors early, because they are foundational for your brand to grow consistently and harmoniously.
2. Encourage cross-team collaboration. Make sure your brand team + UX & design team build the full-color system together. This will ensure that all digital considerations are made from the get-go.
3. Include a few light grays and a few dark grays. This will help to achieve useful contrast. Try to avoid medium grays in the middle as they add little value and could get easily misused.
4. Establish a memorable naming convention. This ensures easy cross-team communication about the colors. Give them names other than their hex colors.
5. Follow WCAG 2.0 accessibility rules. We use the Stark plugin for Figma to help with this. When exploring accessible color contrast, show a range of choices to help a team select a color that passes the test.
6. Define usage guidelines. Assign colors to brand elements as well as global UI elements.

There are tons of other experts out that go more in-depth into color system creation using their own techniques and processes - one that I especially recommend is Nathan Curtis. As I said earlier, this is my version of the process and my goal is to help you train your eye to find that spark, discover unique color combinations that make your brand stand out in the market, and develop a unique color system smartly in order to make your user experience as inclusive as possible.

Always remember to have fun, enjoy the challenge, and trust your instincts. This will make your brand’s relationships with color be long-lasting.

Written by Sonia Acosta, Director of Design at Gallardo Labs