Hey there, design reader!
Welcome to week 19 of my UX Academy Journey, where things are really starting to get serious. Actually, who am I kidding—it’s been serious pretty much the whole time!
Last week we took a little break from our regular UX design programming to zoom out and discuss how the lessons from UX Academy translate into everyday life. The week before that was all about improving a rapid UX design practice. This week I would like to do the opposite and zoom in on and dissect one particular process that always trips me up: color palette selection!
Color theory is hard...
...just take it from the artists who know. But we are not artists, we are designers. And we can reverse out of this rabbit hole with a little bit of methodology—at least that’s what I keep telling myself!
Based on the moodboard from my first capstone, I was narrowing down my palette from *pretty much every color there is*.
Working on a childcare brand, it was particularly hard for me to pare down my color choices, so I asked my mentor to walk me through his process. Unsurprisingly, he gave me the same pointer as he does whenever I asked him about font selection—go back to the brand’s keywords and make sure your choices meet as many of them as possible (preferably the most important ones).
In the interest of refining a color palette creation methodology into a bite-sized process that I can return to again and again, I decided to break it down into even smaller, digestible steps. This is by no means the be-all-and-end-all of processes, but it’s one that has been working for me as an overzealous color generator (and typography obsessor) who needs to focus on simplifying.
As my mentor said, “Be simple and focused out of the gate—that way your users don’t find your design confusing.”
Step 1: Start with the brand keywords
Right off the bat, this is a point where it’s easy for me to go overboard with the initial set of adjectives—as a writer (and those of you who’ve been reading these posts can certainly attest) I tend to be verbose.
To help avoid this, my mentor recommends turning to your stakeholders for guidance. Ask them to give you between five and ten adjectives or keywords core to their brand’s ethos. When I did this with Chicken’s Creative Care (my first capstone’s project stakeholder, aka my client), she came up with a list similar to the one I’d created in my mood board, but asking her to do the heavy lifting in the definition helped me to prioritize which were most important and pare down.
Here’s what she gave me:
Step 2: Associate the keywords with colors
My mentor suggests putting these colors on a color wheel, with shade variances for each—but either a wheel or a standard bar will work. The important part is to prioritize keywords with colors, and start to play with shade variations to get a sense of the brand’s primary attributes and begin to thematically associate them with colors.
A basic color wheel with clusters of CCC’s brand keywords around it.
First I took a basic color wheel and started arranging my keywords around it. Using some standard color psychology, I looked for patterns between common cultural color associations and the brand keywords I’d laid out. And lo and behold, I began to see some overlap. Orange, for example, represented quite a few of my brand’s essential keywords: fun, kindness, creativity, and happiness.
Orange represents the combination of both the energy and happiness associated with each of its respective parent colors, red and yellow. It evokes a strong emotional response associated with joy, enthusiasm, creativity, encouragement, success and stimulation. In design and advertising, it catches attention and is well used as an accent color to highlight important graphic elements. All in all, not a bad choice when looking through a broader scope of the CCC brand’s core values.
Step 3: Select a primary brand color
Knowing that orange would somehow play into my color scheme, I decided to first select the brand’s primary brand color. In order to do this, I had to consider both the overall brand aesthetic and the logo.
A working logo concept for Chicken’s Creative Care.
While the logo design was not finalized yet, I knew that the chicken association—being that her nickname throughout her career was “Teacher Chicken”—was a primary element the stakeholder wanted the logo to incorporate. With that in mind, I conceptualized a first round draft using downloadable icons and some initial color selections. Teacher Chicken was also known for her multi-colored hairstyles (as evidenced by the photos used throughout her website’s design), so I threw a pop of purple/pink into the logo.
My first stab at the CCC color palette, using altogether way too much color.
This started to throw off my palette—until my mentor reminded me that just because I use a color in the logo doesn’t necessarily mean it needs to be in the brand palette.
“Be careful not to use too much color,” he said. “If you make things too playful, you run a risk—there’s a thin line between being really creative and not being considered professional.”
With that in mind, he challenged me to look at the color selections I had made and determine which would be the one color I’d want associated with the CCC brand—and I could only choose one. For Coca-Cola it’s red. For Spotify, it’s green. Which would CCC’s brand color be?
Given that yellow represented many of CCC’s core brand characteristics, was a strong attention-grabbing color with many positive emotional attributes (and is also often associated with kids products), and was present in the initial logo concepts, I settled on yellow as the way to go.
Step 4: Build complementary colors
Now that I had my primary brand color (yellow!) selected, and at least one of my accent colors, it was time to build a complementary set. My mentor had suggested that I settled on something between three and five colors in total, including highlights and neutrals—quite the challenge indeed.
He suggested breaking up those choices according to the follow recipe:
- 1 brand color: the sole color meant to be associated with your brand (yellow!)
- 1 highlight color: to complement and accent elements in the design (orange!)
- 1 base color: this is usually a black or darker tone used to inform but not distract from the design
- 2-3 neutral colors: these are used to balance the brighter tones and round out the palette
Skillshare’s Coolors palette generation tool is a great resource.
Knowing I needed a cooler color to offset the brightness of the yellow and orange in my design, and wanting to emphasize some of the brand keywords not represented on the warmer end of the color spectrum, I knew I wanted to add a blue tone into the mix.
With my yellow and salmony orange pretty much set, I decided to use the Coolors color scheme generator to find complementary colors. There are a ton of color generation tools out there and I’ve used them all. What makes this one unique is the ability to lock certain selections and quickly generate new matches, adjust shades, lock and regenerate until you find a set you like.
The CCC brand style tile, using the finalized color palette.
After playing around with the way these colors fit into my design, I adjusted the recipe a bit to include one primary brand color (sunglow!), two highlight or accent colors (salmon and moonstone blue), one base color (that purplish charcoal), and two neutrals (melon and white smoke) for six colors total.
The result was a more balanced design that was bright and festive, but didn’t overwhelm or detract from the overall brand aesthetic.
And now, some helpful color resources:
- Coolors.co Color Scheme Generator
- BrandColors.net—a comprehensive collection of official brand color codes
- Zeven’s psychology of color guide
- ColorSpace’s palette generation tool
- Smashing Magazine’s list of articles on color theory
Until next week, happy color theorizing!
Looking for a change of careers?
Designlab’s UX Academy program offers rigorous curriculum, personalized mentor support, and a thriving, global student community. Ready to launch your new career as a UX designer? Get all the details here.