How to choose a website color scheme

Color plays an underrated role in how we perceive the world around us. From the dark gloomy clouds that tell us it’s about to rain, to the green light that indicates it’s safe to cross the road, its influence is so deeply ingrained in everyday life, that often we barely notice it.

This extends to your website design too. But where do you start when it comes to picking your website’s color scheme? After all, there’s a whole lot more to it picking a few hues that look ‘nice’ together.

Read on for our ultimate guide to using color psychology and theory to create an impactful color scheme for your brand’s website.

The importance of color when creating a website

When we open a new web page, the color scheme is often the very first thing we notice—even if it’s on a subconscious level. For this reason, color is pivotal in shaping a user's first impression of your brand and determining whether they’ll respond to your calls to action. It helps communicate your brand personality (even without using words) and often becomes the visual calling card your audience remember you by.

website color scheme

Website mockup for a food service delivery by tubik. Image via Dribbble.

Take this website design for a meal-delivery service. With so many similar services on the market these days, it’s important that the designer immediately conveys their unique point of difference. They have done so by using a varied purple palette with pops of red. This gives their website an elegant and sophisticated feel, which fits the bespoke and curated nature of their service. Whereas, if they had gone for a bright and vibrant color scheme, they may have blended in with every other healthy delivery company.

Canva’s Purple Minimalist Etsy Banner template is ideal for achieving a similarly modern and sophisticated aesthetic. With Canva Pro’s magic resize feature, you can easily resize this template with the click of a button to perfectly fit the banner dimensions of your website.

The impact of color endures beyond just the first impression. Whether you’re a service-based freelancer or an e-commerce store, chances are the main objective of your website is to get people to buy from you. With research showing that 85% of shoppers base their product purchasing decisions on color, your color scheme can be the secret weapon that entices them to do just that.

website color scheme

Red makes a strong statement for this perfume website. Image via Dribbble.

Perfume companies are a prime example of how color can help convert—because the consumer can’t actually smell the fragrance they’re thinking about buying. Therefore, it becomes even more crucial to convey the brand personality and scent profile through visual elements like color. Red takes center stage in this perfume website design. It exudes power and confidence, which subconsciously conveys to the viewer that this is how they will feel when they wear this scent.

Want to harness the power of red in your own designs? Canva’s template Stationery Collections GoDaddy Store Image is ready to be customized with your font and icons.

The impact of color on the audience’s psychology

The influence of color on the human psyche is so profound that there’s an entire sub-section of marketing dedicated to it: color psychology. This is the concept that different colors have different impacts on human moods and behaviors—think the calming blue ocean or a red stop sign that makes us stop in our tracks.

By using color psychology to your advantage, you can influence brand perception and direct the user’s gaze on your website to take the desired action.

Here, we take a look at some brands that have used color psychology effectively on their websites.

website color scheme

Stripe uses blue as their brand colors.

Blue is associated with safety, trustworthiness and a sense of calm. So, it’s not hard to see why Stripe—an online payment processing software—have used it heavily in their website color scheme to build credibility and trust around their brand.

Creating a website in the financial services industry or similar? The Blue Accounting Business/Advertising Website template is perfect for achieving that serene aesthetic.

website color scheme

Australian bank ING has orange as its brand color.

While also operating in the financial sector, Australian bank ING takes a different approach. They have built a visual brand around their orange color scheme and for good reason—it’s linked to friendliness, warmth, and inclusiveness. This helps ING stand out against other financial institutions by positioning them as the bank of the people.

Orange you glad you don’t have to start from scratch to get this inviting look? Check out Canva’s Orange Black Advertising and Marketing Business Website template

website color scheme

Cadbury is one of the world's well-known chocolate brands and easily recognizable by the color purple.

Purple is associated with indulgence and magic and is often paired with gold for an even more luxurious feel. Chocolate brand Cadbury has been using this regal color combination long before the internet even existed, but they continue to use it on their online channels to solidify their brand perception in the modern era.

Whether you’re marketing a high-end product or just want to encourage a little indulgence like Cadbury, Canva’s Purple and Yellow Fashion Online Store Website template is an excellent place to start.

How color shapes your online personality

Think about meeting someone new in person for the first time. If they’re dressed head to toe in black, you may think they’re either gloomy or super chic. Meanwhile, if they’re dressed in bright or loud patterns, you may see them as a fun person who doesn’t take themselves too seriously. Similarly, the colors you use on your website (particularly your homepage) will impact how users perceive your brand’s personality.

Here, we take a look at some website color scheme examples that exemplify the brand’s personality.

website color scheme

Dogit website mockup by Arpeggio Communication. Image via Dribbble.

It’s impossible to ignore this bright and bold website color scheme. You immediately get the impression that it is a fun, modern and energetic brand, thanks to the vibrant colors used. The blue conveys a friendly, trustworthy feel, while yellow appears joyful and optimistic. Together, the two colors create a harmonious yet eye-catching aesthetic.

Incorporate this same playful color combination into your own brand website with Canva’s Blue Grotto Pets and Animals Business/Advertising Website template.

website color scheme

Sand and Sky's color scheme is inspired by Australia's pink clay and lush green botanicals.

Pink is the dominant color in the website for natural skincare brand Sand and Sky, accompanied by the secondary green accents. This is a well-thought-out color scheme that gives the website a fresh, feminine and youthful vibe that feels more cool than cutesy. The pink and green also represent the brand’s unique product offering that has Australian pink clay and botanical ingredients.

How to create a color scheme for your website

Along with your logo, your website color scheme should dictate the colors you use across your other visual collateral (such as newsletter templates and Instagram posts) to help keep your aesthetic consistent.

So, how do you create this from scratch? Here are some tips to guide the process.

Use the help of a color wheel

You don’t have to reinvent the wheel when you choose colors for your brand—just use ours! Canva's color wheel is a handy tool used in color theory to determine which hues look appealing together. There are two types of color wheels—the RYB and the RGB. The former is the red, yellow, blue color wheel, which is usually used by artists to combine paint colors. Then, there’s the red, green and blue color wheel, which is used by graphic designers as it involves mixing light for online use.

Canva’s color wheel uses RGB colors and it allows you to see which color combinations perform well together based on color theory. When you find one you like, you can start working on a graphic with this color scheme or export your palette for later reference.

website color scheme

Canva's color wheel and color theory page.

Check out Canva’s color wheel here.

Consider the demographic

There are some color schemes that hold universal appeal (or the opposite!) to the majority of people. For example, most people would probably think that pink and brown is a jarring combination, while pink and blue is generally inoffensive.

However, at the end of the day, color perception isn’t a one-size-fits-all experience. Different people perceive colors in different ways, depending on their age, culture and life experiences. For example, while people in the Western world might automatically associate red and green with Christmas, this might not be the case for people in other parts of the world.

For this reason, it’s extremely important to keep your target demographic in mind when choosing your website color scheme. Try to put yourself in their shoes and imagine what kind of associations and feelings the color combination might evoke for them.

website color scheme

Website concept design for a children's app designed by Daniel. Image via Dribbble.

For example, this concept for a children’s app has two primary target audiences—young children and their parents. The designer selected their color scheme accordingly, using a light blue background to invoke feelings of safety and serenity that are likely to appeal to parents. However, they have combined this with brighter blue and orange elements to give the design and more fun and youthful aesthetic.

Designing something for a younger audience? Canva’s Pink and Blue Pet Care Small Business Website template has a fun and fresh aesthetic that can easily be repurposed for your own brand.

website color scheme

Naturale Brewing Co. landing page concept by Nathan Riley for green chameleon. Image via Dribbble.

Meanwhile, this landing page concept by Nathan Riley proves that you don’t have to use a lot of colors to create an aesthetic that is perfectly targeted to the demographic. He used a neutral palette to achieve a masculine and rustic feel that is likely to appeal to a millennial male audience.

Get the look with Canva’s Home Brewing GoDaddy Store Image template, which is the perfect dimensions for a website banner image. The font and background image can be easily swapped out with your own.

Create a color palette

From the buttons and footer to your pop-up form, there are many different visual elements to think about when creating a website. This is why it’s so important to have a color palette at your disposal to pick and choose from as you see fit. Generally, a color palette will have four to five different shades in it, ranging from your main branding colors to secondary, more neutral ones.

website color scheme

Pharrell William's website is colorful and dynamic.

Pharrell William's website allows visitors to create a card that represents their favorite project. Each project is represented by a color from a specifically created palette, then presented in varying sizes. You don’t need to use as many colors like this one, but it’s a good idea to have a handful to choose from. Rather than a diverse palette you may also opt to use similar colors in slightly different hues and saturations—it all depends on your brand personality, demographics, and needs.

How to use a color palette from a brand kit

Your color palette will be an indispensable tool in your brand kit, which is essentially your graphic design bible. This is a resource you create when creating your visual brand identity, and also includes your fonts, image styles, and logo.

website color scheme

ThisThatApp Assets by Helena. Image via Dribbble.

Most brand kits will have a section dedicated to your color palette, where you identify your brand’s colors and the corresponding codes. These can include Pantone (specialist color) and CMYK (standard print colors) codes but for web design, you mostly need your RGB and HEX (hexadecimal) codes. Depending on your brand aesthetic, you may also include different tints and shades of the same colors.

Having your color palette easily accessible in your brand kit will ensure you get the exact color match any time you’re designing something new for your brand. Canva Pro’s Brand Kit feature allows you to set your brand color and codes for easy access when you’re designing within the app.

While your social media presence is like waving to your audience, your website is that handshake that solidifies their first impression of you. Whether it’s bold and bright or muted and calming, using an appropriate color scheme is the best way to ensure that impression is a positive one. By using the tips and inspiration in this article, you can create a website color scheme that brings your unique brand personality to life.

Your secret weapon for stunning design