BACKGROUND
ScaleGrowth is a pre-seed startup that provides no-code tools to community builders who want to launch, manage, and engage their communities. I first started working with ScaleGrowth in April 2021, as the sole product designer on their team.
One of my first tasks was to create a brand color palette — an important task, since color palettes for brands are instrumental in conveying the feeling of the brand itself, building recognizability among users, and maintaining visual consistency between the product, website, and marketing materials. ScaleGrowth had been using two colors already, "ScaleGrowth Green" (their primary brand color) and "Electric Indigo" (interactive elements only), but wanted to expand their color choices to add more visual interest to illustrations on their website and use as accents in branded slide decks and social media imagery.
GOALS
Because ScaleGrowth is a company focused on building communities and fostering connections between people, I wanted to develop a palette that invoked a feeling of playfulness and energy. From a color theory standpoint, I also wanted to select colors that were roughly in the same family of light and saturation as ScaleGrowth Green and Electric Indigo. With this in mind, I settled on a few parameters to keep in consideration throughout my process:
complementary combinations based on color wheel theory,
lightness/saturation comparable to current brand colors,
color psychology / feelings evoked by colors and combinations of colors
The ScaleGrowth website also had several illustrations on it already, so as an secondary parameter, I considered colors that were already being used on the site — although these were changeable, the overall color palette was complementary (faded pinks and yellows) so I thought it was reasonable to provide a more formal palette based on those colors as an option.
SELECTING SUPPORTING COLORS
Based on color wheel theory, I was first leaning toward exploring oranges and yellows as a possibility, since those are triadic colors with green and purple (meaning they are evenly spaced in thirds around the circle of the color wheel). However, I also wanted to explore some more patterns, and was thinking blues or pinks may also go well with the two ScaleGrowth colors that were in use.
With this in mind, I used an online tool called coolors.co to auto-generate some possible color palettes based on the current SG colors. Then I saved a few that looked promising and were in line with my original thoughts. After this step, I wanted a more customized look at combinations based on these generated palettes, so I pulled out the individual colors from those and arranged them together:
Based on observing the differences between the auto-generated shades within each color type, I could group the colors together and compare them to each other individually. Doing this allowed me to narrow down colors to recommend four top candidates based on the parameters I had defined earlier.
For example, colors 1C, 1D, 2B, 2D are too light and de-saturated compared to ScaleGrowth Green and Electric Indigo, so I eliminated those from the list of best candidates. 3C and 3D are very dark neutral colors, and a neutral grey color was already defined in ScaleGrowth's design language, so I decided not to include those two colors either. Among 1A, 2A, and 3A, I felt 3A was too neon and lemony, while 1A and 2A were too orange and didn't match the saturation that Electric Indigo and ScaleGrowth Green had.
This process of elimination left colors 0A through 0D; these four had the most similar brightness and saturation to ScaleGrowth Green and Electric Indigo. Put another way, they fell in the same “family” as the current brand colors, so I decided they were likely the best options to complement the two existing brand colors.
BUILDING COLOR PALETTES
Now that I had a set of strong contenders for the brand palette, I created palette options to show to the team. I didn't want to use an overwhelming set of colors, so I limited the number of colors in the brand palette to four total, including ScaleGrowth Green and Electric Indigo.
To get actually create the palettes, I used color wheel theory to create harmonious combinations from the current brand colors and top 4 color choices. The four palettes I designed are shown below, along with the relations between the colors in the palette to each other:
I also tweaked the four supporting color options slightly by adjusting their HSL values so that they all had Light at 50%. This is so that their lightness matches that of ScaleGrowth Green. (Electric Indigo is used at 40% lightness). This way the color options are even more consistent with the primary brand color.
GETTING FEEDBACK & CONDUCTING REVISIONS
Once I had the four initial palettes ready for proposal, I shared them with the ScaleGrowth team over Slack and asked for feedback. Opinions were fairly split between Palettes 2-4, and during this process the CEO suggested including "Watermelon" (#fd2a5f) as an option to replace the pinky-red colors from the Top 4 Color list. Watermelon had previously been used by ScaleGrowth and so already had some ties to their brand. I added the color to the top contenders, resulting in the five following colors as options for ScaleGrowth's new brand palette:
Originally I had included Electric Indigo in the color palettes I proposed earlier. However, I decided to remove it from the brand accent palettes since it’s the interactive color, which could only be used for interactive UI elements such as links and buttons. Therefore it didn’t make sense to me to heavily incorporate it in things like images and illustrations, or future slide deck templates.
Removing Electric Indigo from the color palettes left the three palettes shown here. (Note that Magenta, Watermelon, and Tomato were too visually similar to each other, so I opted to avoid having those colors in the same palette. This is why all three palette options below look very similar to each other in terms of color combinations — I didn't want the palettes to be skewed toward reds and pinks. However, just for completeness, I did also put together two extra options (Palettes A-B) that contained more than one of the red-family colors.
The team was also interested in seeing how these color palettes looked in illustrations, since that was the primary use case for the brand palette. To test these colors in images, I first created an expanded palette for each test color across Lightness values from 90% to 10% on the HSL scale. This was important since multiple shades of a color are needed for each single color to provide details in images and make them appear not-flat. The expanded brightness range also gives a good look at how the colors interact over the whole light-to-dark spectrum; for example, I noticed that the 50% Light shades that ScaleGrowth were very neon compared to the 60% Light versions, so I recommended using 60% Light to be more relaxing to the eye while remaining bright and fun.
After creating the expanded brightness range for all six proposed colors, I used the tints and shades in some test illustrations from Blush, and then put everything into a Google Slides file for easy asynchronous presentation. That done, I went back to Slack and asked the team to review the new proposals and respond with which color palettes they felt most closely matched the ScaleGrowth brand. No one on the team preferred Palettes A or B over Palettes 1-3. Between Palettes 1-3, Palette 2 (Watermelon) was the preference, as team members felt that Tomato was too bright and orange-y, similar to an error color, while Magenta was too "dark" compared to the other three colors in the palette.
FINALIZING THE OFFICIAL BRAND PALETTE
With Palette 2 - Watermelon being the preferred choice, we had a winner! To formalize the brand color palette, I documented the new colors by adding them to ScaleGrowth's Design Language in Figma, and saved each shade and tint as a Color Style in Figma for easy re-use. Since then, the brand colors have appeared in ScaleGrowth's investor pitch deck, various social media posts, and will soon be on the website (after I redesign it — stay tuned for that!). The final palette is shown below too.
