A Freelancer’s Guide to Using Colors in Web Design

Đã đăng vào - Cập Nhật Lần Cuối vào

According to research by Blue Corona, users prefer to spend 15 minutes interacting with beautifully designed websites rather than plain and boring ones. As color is an integral part of web design, it plays a major role in the overall appearance of a website. People are naturally attracted and influenced by different colors and color schemes. As designers, it is our job to use the right colors in the right context. 

Research by Brandon Gaille reveals that 57% of users see the color blue as the color of success. Consequently, if you place the color blue in the right context it will appeal to a great number of users. However, times are changing and so are the people’s attitudes and expectations. By keeping yourself updated with the trends, you will be well on your way to create impeccable designs for your clients. 

Get to Know Your Brand  

The first thing we need to do is learn as much as possible about the brand we are designing for. The brand should be our primary focus when choosing a color scheme. Although it may seem obvious, it is extremely important to know what we are starting with. Before working on the design, we need to find out whether we are using an established brand color or we are starting from scratch. You will find out this information in the discovery phase, so be careful not to overlook it. To make your life easier, try using a client questionnaire such as this one as it can help you learn all you need to know about a brand and their color scheme. 

paper with colorful light bulbs

A brand needs to be easily recognizable and colors can help with this immensely. Both established and new brands will benefit from the use of colors when it comes to differentiating themselves from their competitors. The color choices should reflect a brand’s core values and this is especially important for established businesses. Such brands already have the market presence, so make sure to build upon that rather than changing it. 

Established brands also usually have guidelines which will help you with the choice of colors. New brands require new color palettes that you will test out and change if there is a need. Also, make sure to review a design mockup before actually building it. 

Get to Know the Target Audience 

Before developing your color scheme, make sure to perform a target audience research. Since color is subjective, you might fall under the influence of your own or your client’s preferences. However, you need to research what the site visitors find the most appealing and create a color scheme according to their needs. 

illustration people icons

For example, if the client is targeting an older demographic, you will need to make sure they can easily view the content. You will need to have larger text, a lot of color contrast while the actionable items should be presented as clear as possible. However, if the site attracts a younger audience, the color palette should be playful and bright. This is extremely important in terms of audience engagement, so make sure to make final decisions based on research. 

Learn About Color Psychology

Each color has a different effect on a site visitor. To make a more informed decision regarding your choice of color scheme, you should turn to the wisdom of color psychology. Colors evoke specific emotions in users and while following the rules of color psychology is not a must, it will definitely help you convey the message and feeling much more precisely. While it is common to hear clients comment on their color preferences, it is also essential that the choice of color reflects the type of business you are designing for. 

splash of color

What different colors mean according to basic color psychology: 

  • Red. It is considered to be a bold color. It creates a sense of urgency and evokes strong emotions. 

  • Orange. It symbolizes enthusiasm, and evokes positive emotions such as confidence and cheerfulness. However, it can also create a sense of urgency.

  • Yellow.  It grabs attention and represents optimism. Remember that some shades of yellow can strain the eye. 

  • Blue. This color provides a sense of calmness, as it associates water. It also creates feelings of trust and security which is why corporations often use it. 

  • Green. It is associated with nature and growth. It represents vitality, health, tranquility and serenity. 

  • Purple. It is usually used to represent success and wealth, but also creativity. 

  • Brown. The color is associated with earth, friendliness and the outdoors. 

  • Gray. It represents intelligence, reliability and security. 

  • White. White is a key color because it creates space. It also has neutral and clean feeling. 

  • Black. Black is the color of sophistication. Sleek brands often use it for its mystery and exclusivity. Therefore it is not at all surprising that websites with a dark background tend to perform really well.  

Choose the Right Color Scheme 

After doing all the necessary research, you need to set the key color of the brand, i.e. the “primary”. After you’ve set the primary, the next step is choosing the secondary colors. The number of colors in your color scheme will be different for each brand. The usual choice is three colors for the scheme. Think about whether the colors are fighting with each other and if that makes the screen look chaotic to users. 

man holding color gradient papers

You will also need to use additional colors, neutrals for secondary elements, background and text. Keep in mind they should also be coordinated with the main colors. You will notice that some of your favorite websites use grays, whites and variations of the primary color along with lighter or darker options. 

Keep in mind that you’ll have those additional colors, like neutrals for text, background, and other secondary elements. These should also coordinate with your main and accent colors. As you look at your favorite websites, you might notice whites, grays, or variations of the primary colors (light lighter or darker options). 

Apply the Colors to the Website 

Now it's time to implement your color scheme. But first, make sure that the scheme will work for all of your website users. You need to ensure that there is a reasonable amount of contrast between the background and the elements so that the color blind users can easily navigate the site. You can use a tool such as the Contrast Checker to help you with adjusting the contrast between the elements. 

illustration people making a website cartoon

After creating the color scheme and testing your site for accessibility, you need to start fitting all the elements together to make the site come to life. There is not one single way that works for every site, but you can think about breaking things down into primary, secondary and neutral colors. 

Primary colors are those that grab users’ attention. They are used for CTAs, buttons and other important elements. Secondary color is used for highlighting elements that are less important, such as secondary buttons, text that is less important and anything else that doesn’t need immediate attention. Lastly, neutral colors are used for backgrounds, text, or any elements that doesn't serve as an attention grabber. 

Design Your Way to Success 

Choosing a color scheme for your clients websites is extremely important for audience engagement, branding, user experience, and much more. Colors evoke strong emotions and entice users to interact with the website elements. Without proper choice of colors, your web design might suffer greatly. 

Remember to first get to know your brand and target audience so that you can make an informed decision on the color choice. Learn about color psychology and use the knowledge to choose the right color scheme. With good preparation, all you have left is applying the colors to the website and voila! You are well on your way towards becoming an exceptional designer.

Đã đăng 25 tháng 10, 2019


Web Design and Digital Marketing Specialist

Larry is a web designer turned writer. He currently resides in Boston, MA. He works as a freelancer and remote worker for several marketing companies. Larry has got over 5 years of experience working as a designer and marketer.

Bài báo kế tiếp

Overview of Current FinTech Trends That Make Businesses Stay Afloat