How to select a color theme for your next project?

13 min readApr 27, 2021

How color influence your design and users

I’m sure even you have been conflicted with what colors to choose for your project. Selecting a color theme is the most important factor that you must consider for your Design Project.

A visually appealing user interface will have the ability to attract users and gradually grow traffic onto a website. Some various tools and guidelines can help you to create the perfect color theme for your design within just a few seconds.

How to choose the best colors for your design?

There are few important things that you must consider before selecting the color palette for your project,

Color Theory

To create a visually appealing design, you must understand how all colors relate to each other. Therefore, it’s best to familiarize yourself with Color Theory as it will help you a lot with the process of choosing the right color palette.

Color Theory is a framework that guides you through the creation of a color palette and choosing the right colors for it. For ease of use, we use this framework in a color wheel with all the colors displayed.

The main 3 categories of this color wheel are,

Primary Colors: Red, Blue, Yellow (Colors that cannot be formed by combining any other combination of colors)
Secondary Colors: Orange, Purple, Green (Colors that can be created by combining any 2 of the 3 primary colors)
Tertiary Colors: Magenta, Vermillion, Violet, Teal, Amber, Chartreuse (Colors that are created by mixing a primary color with a secondary color)

But these 12 colors are not the only colors that can be used within a design! There are 3 factors about color that helps you with the different shades of colors that you can use for designs,

Hue: This is the color in a natural state without any variations of lightness or darkness in a color. You can see this in the Full-Color Wheel without any alteration of the shades of the colors.
Value: These are the alterations that you do for a color that is in its natural state. The amount of lightness and darkness you add into color will define the value of the color. When the color is at 0% it will result in black color and in 100% it will result in white color. When you are designing a user interface, the value is one of the important points you must consider because this factor will decide which contrast of color is the best in an interface.
Saturation: Magenta, This is the intensity of a color. When you increase the saturation of a color, you have a brighter color. And vice versa, when you decrease the saturation you will receive a dull color.

Source — Color Theory by Interaction Design Foundation

To read up more about color theory, head over to the article by Jaye Hannah: The Color Guide: An Introduction To Color Theory And Color Palettes

2. Contrast

The contrast is the foundation of the color palette! The color shadings that you use will decide which is the best color shade that contrasts with the background and other elements of the user interface. When you are designing an interface, the contrast helps the user to see important information or wordings on the page. One of the most important points you must consider is having a good contrast in your design.

3. Color Psychology

The psychological effect on a person’s emotion because of a specific color is another area that we can consider. Different colors and shades can raise different emotions in a user.

Faber Birren has mentioned in his book Color Psychology and Color Therapy about colors that are desirable for different age groups. For example, Yellow is preferable for childhood, whereas blue is preferable throughout life.

For more information check out: Color Psychology — Brilliant Helping Hand in UX Design by UX studio

4. Overusing of colors

You must keep in mind never to overuse all the colors. If you overuse it, it will be challenging and confusing for the user to complete his/her tasks. If you’re still unsure about what colors to use, you can select a primary color and stick to it until you get used to selecting a color palette. Another technique that you can use is the 60–30–10 Rule.

This technique is a theory that helps you with making a visually appealing color palette. Ayobami has mentioned in her article the proper steps you can use to successfully use this technique. When you’re making the palette, the dominant color makes up 60% of the palette, the additional supplementary color makes up 30% and the rest 10% is a third color used as an accent of the design. These chosen colors can be used as the color theme of your design with respect to their percentages.

Source: How the 60–30–10 rule saved the day by Ayobami Adelugba

Colors and the emotions they evoke

When it comes to designing, you must know that each and every color has its own feeling and psychological role. Each and every color has the ability to evoke an emotional response from the user. According to Psychological Research, it was found that the human eye can see one thousand shades of light and one hundred levels of red-green and yellow-blue. Therefore, if you multiply all these values, you can see 10 million shades of colors! Last but not least, for these 10 million shades there can be 10 million feelings! As a designer, you must understand what emotion each color will evoke to design the best user interface for the relevant idea.

Source: Human Vision and Color Perception by Kenneth R. Spring, Thomas J. Fellers and Michael W. Davidson

Red

This is a dominating color. Different cultures have different meanings for the color Red. Most western countries depict red for Love and Passion but in African Cultures Red symbolizes death and grief but in Chinese cultures, red symbolizes Luck and Fertility.

Red is also used to show an important message on a website because it has the capability to catch a user’s attention.

The emotions that this color mostly represents are,

Energy
Excitement
Strength
Love
Romantic

For example, if we consider the brands YouTube, CocaCola or Netflix , all these brands have a red colored logo. The main theme color they use is red. Red has the ability to grab the user’s attention within a short time.

Brands using ‘Red’ as their main theme color

2. Orange

This too is another color that can show off excitement and energy. While Western cultures consider Orange as a positive color, it is associated with mourning and grief in the Middle East.

Orange mostly depicts the following emotions,

Confidence
Youthfulness
Creativity
Adventure
Success
Balance
Enthusiasm

For example, if you consider SoundCloud and Mozilla Firefox, the main theme color they have used is orange. SoundCloud is a main platform for music producers to showcase their production and the color orange evokes creativity. Therefore, you can see how useful colors are for a brand.

Brands using ‘Orange’ as their main theme color

2. Yellow

This color is actually very strange as it is associated with happiness but it also has the ability to activate anxiety. This color is often used for warning signs in real life therefore, it is an alarming color for the human brain. Like orange and red, yellow also can be an energetic bright color. Therefore, when used correctly, as yellow is a very bright color you can grab the user’s attention very quickly. Eastern cultures often consider Yellow as a sacred and imperial color but on the contrary, Latin Americans consider Yellow with mourning and grief.

So in summary the following emotions are evoked for the color yellow,

Happiness
Warm
Energetic
Positivity
Optimism
Warning/Awareness
Relaxed

For example, consider the logo of McDonald’s and Snapchat. McDonald’s is a place where people go to relax and enjoy their time. Snapchat is a social media application which can be used among friends to enjoy. Both these places evoke Happiness and Relaxed emotions for people. Therefore using yellow as their brand is quite useful because seeing this color can be relaxing for the user itself.

Brands using ‘Yellow’ as their main theme color

4. Green

This color reminds a user of the calm and serene nature. Therefore green brings a healing, fresh and harmonizing effect to the user. This is the bridge of the warm colors (red, orange, yellow) and the calming colors (blue, purple).

In summary, the following emotions are felt for the user,

Calm
Healing
Growth
Health
Harmony
Envy
Relaxation
Encouragement

For example, the logo of Sprite and Animal Planet uses green color. The brand Sprite promotes soft drinks that will relax and calm you. Animal Planet is a nature related television program. Therefore using green for both these icons gives the user the calm and relaxed feeling which is also related with the products.

Brands using ‘Green’ as their main theme color

5. Blue

This color is most useful for financial websites and applications. This is because blue brings the following emotions,

Trustworthiness
Secure
Calm/Relax
Stability
Peace
Loyalty
Harmony

For a financial purpose, trust is the most important between the company and the user. Anyone would have their own doubts to get into financial aspects with a company they do not know about. This is where the color blue comes in, blue brings out an emotion that assures a feeling of safety and trustworthiness.

For example, using Blue color for the brand PayPal will ensure the emotion of trust with the user to perform transactions with the company. Another brand that uses blue for their main color is Facebook and LinkedIn. These brands can bring the user an emotion being relaxed and calm.

Brands using ‘Blue’ as their main theme color

6. Purple

This is more of a royalty color. Purple brings out the following emotions,

Mysterious
Spiritual
Luxurious
Self-awareness
Dignity

This color can also be used to incorporate a playful mysterious vibe to the user.

For example, the applications Yahoo and Loom use purple as their main color for their brand. Using purple for these brands can bring a luxurious feeling to the user.

Brands using ‘Purple’ as their main theme color

7. Pink

Pink colored websites are not used as much as the other colored websites as it doesn’t fit the entire audience. But pink will work with the correct audience.

This color gives the user the following emotions,

Sincere
Sweet
Sophisticated

For example, the brands popular Baskin Robbins and Lyft use the color pink on their logo. This provides the user with a sweet and sincere feeling which will be really comforting for the user.

Brands using ‘Pink’ as their main theme color

8. Black

This is one of the popular colors that is used in websites. Black depicts a very powerful and sophisticated emotion but it is also associated with mourning and death in Western cultures. This works well with a brand that wants to promote power and mystery. Black is much similar to purple but black is much bolder and more confident than purple.

In summary, the following emotions depict Black,

Power
Intimidation
Formality
Mystery
Elegance
Sophistication
Anger/Sadness

For example, the brands Nike, Adidas and Apple all use the color black for their brand. This shows power and intimidation of their brand to the user.

Brands using ‘Black’ as their main theme color

9. White

This color brings out a virtuous and clean feeling to the user. Even Though western cultures treat white as purity and innocence, in most countries in Asia, white is associated with death and mourning.

White depicts the following emotions,

Purity
Calm
Clarity
Simplicity
Cleanliness
Efficiency
Peaceful
Serene

Using white in a website is advantageous because you can show the simplicity and spotless feeling of your website to the user. Without putting much effort, with the color white you can easily design a beautiful website.

For example, the brands Loreal and Uber use to display their logo with white color. The contrast of white and black is eye catching for the user. The cleanliness and the Simplicity of using white can be seen well with these logos.

Brands using ‘White’ as their main theme color

10. Brown

Brown-colored websites are not that common but they are often used with textures of wood and provide a rustic old-fashioned atmosphere. This color can be used to provide users with a feeling of nature.

Furthermore, the following emotions are evoked for the color brown,

Simplicity
Wholesomeness
Earthy
Sturdy
Rustic

For example, the United Parcel Services uses a brown colored logo with a background of yellow. This provides the user with the feeling of a sturdiness. In addition to this, the brand Cotton uses brown color to express simplicity and wholesomeness to their customers.

Brands using ‘Brown’ as their main theme color

Color Tools

It’s normal to feel lost when you come across choosing the correct color palette for your design project. Lucky for you, there are so many tools that you can use to help with this task. Today I will be mentioning the 4 best tools you can use!

1. Adobe Colors

Adobe colors is a free online tool that you can use to create color themes with the use of the Color Wheel. It also has other options such as,

Extract Theme: Helps you to extract a color palette from an uploaded image
Extract Gradient: Helps you to extract gradient colors from an uploaded image
Accessibility Tools: A colorblind simulator that helps you to create a color palette that is helpful to visually impaired users.

You can use this tool by going to: Adobe Color: Color wheel

2. Paletton

This is a great tool you can use as it has a lot of features available. You first must select the scheme that you would like; mono, complementary, triadic, tetradic, analogous, or accented analogous. Afterward, when you select the one color in the wheel, the rest of the color palette automatically changes to match the color. This tool also shows a preview of how the color palette would look like. There are also example page layouts generated to show how it would look like on the web page.

This is a very helpful feature for you. It is an online free tool that you can access at, Paletton — The Color Scheme Designer

3. Coolors

This tool generates amazing color palettes and you only have to click the spacebar for it! The hex values of the color palette are given so you can use them easily on your projects. You can also download the iOS application for this tool on your Mac. The Chrome and Adobe extensions are also available to download. This tool also has the ability to get a color and gradient palette from an image. You can even create a collage and its respective color palette.

You can access all this through: Coolors — The super fast color schemes generator!

4. Sip Color App

This Application is unfortunately available for iOS and macOS only. But it has a great lot of features that are really helpful to collect, organize, edit and even share your color palette. You can link your color palette between other tools that you use to help with the workflow.

You can download this application by going to: Sip

5. Nix Color Sensor

This is actually a hardware tool. You use the Nix Color Sensor device and lay it on top of the physical area that you need to get the color palette from and it will sense all the colors from that surface. By using the application downloaded onto your phone, you can bring the physical colors onto your phone in the form of a color palette! You can share the color palettes generated even with your colleagues or customers via text, social media, or email. This tool can even be used to get the color of a flower that you like!

You can check this device out from: Nix Sensor — Color Matching Tool, Paint Color Sensor App

Design Guidelines

Each and every one of us needs a set of guidelines to follow when we are creating a design. Apple and Google have introduced a set of detailed guidelines that we can use to help create the perfect design that is accessible to everyone. These guidelines bring out the best in a designer and help to create the perfect color palette.

1. iOS Guidelines

Apple provides a set of guidelines that can be followed when you are designing for all apple related platforms. For the specific device, they provide detailed guidelines. You can view all these guidelines for the needed device from Human Interface Guidelines — Design by Apple

2. Material Design

Material Design is a guideline system provided for us. It has detailed information on all elements of a website. You can check the guidelines provided for choosing the correct color system from The color system. You will be provided with principles and guidelines that you can follow and even a Color Picker to test palettes. You can check all the resources that are provided by them at Resources.

Conclusion

It is always best practice to choose a visually appealing color theme for your design. This can attract more users to your website and provide a great user experience. When you’re selecting the color palette, you must also think about the theme of your brand and select. The foundation of a great design is the color palette. So you must put your entire effort to build up a great theme.