Choosing a good color scheme is one of the most scary things when you start designing a brand — not because it’s technically hard (to click around with your color picker), but because the consequence is devastating to your brand if the color scheme goes wrong in the first place.
In this article, you will learn some basic principles in developing a color scheme for your brand. I will take AssemblyAI as our example and walk you through the process of building a sophisticated color scheme.
A good color scheme works for your brand. Tech companies and banks use blue and green to win customer’s trust. Fast food companies like McDonald’s (red and yellow), Dunkin’ Donuts (orange and hot pink) and Burger King (red) use warm, bright color scheme in their restaurants to encourage their customers to eat more, and to eat faster to ensure a high table turnover, as this color scheme stimulates appetite and creates tension.
A bad color scheme, on the contrary, harms your brand in various ways: It
delivers a tone that’s different from your brand identity. It makes your content hard to read. It is impossible to design with because of the disharmony among the colors.
Ramotion uses blue in the web design for a banking service
Yale University School of Art’s website looks like it was made by a 13 year old in 1996. Although the website itself is a crazy art (it is a wiki, which means that every graduate student, staff person, and faculty member of the School can change this website’s content or add to it at any time), it is a living example of how default fonts, horrible background, disharmonious color scheme together, can make your branding look so untrustworthy.
I’m not a big fan of color psychology, so I guess I will cut the “red is passion, blue is calmness” cliche. It takes only a handful of principles to make a good color scheme, but to screw it up — you have millions of ways. Let’s talk about the few principles you should follow when carrying out your project:
- Always limit your color palette to 3 colors. Abuse of colors makes your design look like a cheap hodgepodge. The worst part of a overstuffed color scheme is not the fact that it’s visually confusing, or that it’s more expensive to print, but that you are going to say farewell to an elegant and clean design solution with 12 colors in your color palette.
Theresa Neil took the UI design of the mobile app of NBC News as anti-pattern in her book Mobile Design Pattern Gallery: Too many colors! The overstuffed color palette is confusing and degrades the legibility of the menu options.
Ensure enough contrast between your color scheme and a light/dark background so that the legibility of your content is not harmed. Sometimes a color scheme looks nice in your swatches, but it does not work well with your white background or your delicate Geomanist ExtraLight.
Make sure the colors look fine when being put next to each other. Avoid using complementary colors (colors that are on the opposite position in a color wheel) in your color palette, because the contrast in hue between complementary colors is so strong that sometimes they build a sense of conflict and disharmony.
This being said, here’s the survival guide in developing a color scheme step by step.
Step 1. Study Your Brand
Study your brand identity. Is your brand calm (cold tone) or passionate (warm tone)? Serious (dark color) or playful (light color)? Bold (bright, hard color) or subtle (desaturated, soft color)? Based on your brand’s identity, you should have 2–3 candidates for your base color. One thing to keep in mind is that when deciding your base color candidates, do think out of the box. Does a tech company have to be blue? Does organic farm have to be green? Does product for girls have to be pink?
Take AssemblyAI as a example. We are a tech company. Yes. We are a speech recognition company that use deep learning network to recognize speech — geez we sound so geeky! But does this mean that we have to look super serious, with a cyber blue overlay on the hero image in our landing page? I heard our soul cracking. Apart from being a tech company, we are also a fun team of young people, who are bold in conceptualizing and cautious in implementation. We decided to pick powder blue and violet as our candidates.
Step 2. Do Some Research about Your Base Color Candidates
Does your base color mean something negative in your target market (In some countries, yellow means mourning)? Is there a major competitor of your company who’s using your base color already? Has the base color of your competitor won a wide recognition in the market already (eg. Facebook blue, Jet purple)? How hard is it to design with your base color?
If you have hard time answering the last question, you can use some tools to help you with it. Dribbble has this color function that allows you to search for art works of your choice of color.
Dribbble’s color function
Click the color drop to start search on your base color. You can copy & paste the HEX code from your color picking tool to the bottom left corner.
Ta-da! See how other people use your base color in design.
Pinterest is another place to find works in your base color.
Set your base color as keyword and view similar designs
Now compare your search results, and decide which color candidate is easier to work with. In our case, we have to let powder blue go because it’s too neutral in brightness, and does not provide enough contrast on neither dark or light background. Now we have our base color: violet #54558C
Step 3. Pick Your Secondary Color
Unless you plan to do a monochromatic design, you need a secondary color that works as a highlight to some of your UI elements such as badges, CTA buttons, and icons. Your secondary color should be bright and bold enough to catch user’s attention, and it should look nice with your base color.
Adobe Kuler is a popular color picking tool that allows you develop a professional color scheme. In our case, we choose a bright and bold teal #70CBC9.
Step 4. Develop Grayscale Using Your Base Color
One common mistake design newbies always make is using a grayscale of 0%
saturation, in which #555555 looks dull and aloof, and #000000 looks like an
abysmal black hole. Let me put this simple: in your grayscale, white is not white, black is not black, and gray is not gray. Usually, in a carefully designed UI, what seems to be black is a dark gray, and what seems to be white is a light gray, so that the contrast is nice and moderate.
If you examine Facebook’s color scheme, you will find its grayscale is tinted with its base color #3B5998. A subtle tint of your base color gives your grayscale personality, and keeps your design consistent.
A part of Facebook’s grayscale
You can build your grayscale by overlaying your basic color on top of the original (0% saturation) grayscale.
#414267 is #1A1A1A with a 68% #54558C overlay
Viola! Using this technique, we’ve got AssemblyAI’s grayscale!
By the end of this step, you should have established your font color, your dark background color, and light background color with your grayscale. Put your logo and some text on your background to double-check your legibility.
Step 5. Develop Your Color Wheel Using Your Base Color
You have gone so far!
The final concern about your color scheme is that if it provides enough colors in your palette to make illustrations and icons with — if you plan to have any. In my case, illustration is a crucial part in AssemblyAI’s branding, so when the violet and teal alone is not enough for the design, a color wheel matching with the base color should be developed.
You can use online tools like paletton as your color wheel to find the complementary color, split complementary colors, triad colors and tetrad colors of your base color. You can also use a traditional color wheel like this:
A traditional color wheel
Enter your base color in the bottom left corner to find colors for your color wheel.
AssemblyAI’s color wheel based on violet #54558C
With more color on our palette, it’s easier for us to do illustrations.
One of the illustrations made with the colors on the color wheel
AssemblyAI’s Web design with the color scheme
Developing a color scheme is the first step in branding. It conveys the vibe of your brand, and it determines how smoothly you can carry on with all the further designs — you can never be too careful with your color scheme. If the result does not end up to be satisfying in your first few attempts, don’t feel frustrated — design is a skill that takes time to grow, and you will only get better and better :)