Studies show that 90% of a consumer’s assessment of a product to try is based on color (Buffer.com). This is why planning website color schemes is an important part of designing your site. People are more often than not visually-driven. Our purchase decisions are influenced by visual cues such as packaging and color schemes. We also tend to associate colors with specific brands - just like how red and yellow combinations remind us of McDonald’s or how blue is Facebook’s color.
Here are a few tips on how to select the best website color schemes to build brand recall and attract your target audience.
1. Determine the emotions you want your website to arouse
Consider your target demographic when choosing website color schemes. Each color evokes a different type of emotion. For instance, red encourages appetite and tends to increase the heart rate. This makes it a suitable color of choice for announcing sales where you want to communicate a sense of urgency. It is also a good color for food brands like Kellog’s McDonald’s and Coca Cola. Yellow is about innovation, cheerful thoughts and a good stimulant of mental process so it’s an effective attention-grabbing color.
2. Determine the number of colors you want to use
Once you have selected your primary color (based on the emotions the sight of your brand should evoke), the next step is to decide on how many colors you want to mix with this shade. For websites, the recommended number is 3 - you have a primary color and 2 accent colors.
The best website color schemes make certain parts of a site pop but they are careful not to take away focus from the actual content. In fact, these colors are made to get a user to notice the content. For instance, your dominant color should be used in certain areas that you want your visitors to pay close attention to. Accent colors are great for secondary information on the site such as subtitles and information boxes. A third neutral accent color would be good to use for the site’s background.
3. Choose the accent colors
Using just one color on the entire site can be pretty boring. Choose accent colors that can highlight certain parts of your website such as quotes or buttons. Selecting the accent color to match your dominant color can be quite challenging, though, because it can be difficult to tell whether certain color combinations blend well together. Fortunately, there are a lot of tools like Colorspire that you can use to test out different color combinations. They enable you to visualize how different color schemes might look on your website.
When implementing accent colors in relation to your primary color, we recommend following the 60-30-10 rule in website design. This means that 60% of your site’s real estate uses the dominant color while the accent colors will be for the remaining 40%.
4. The color wheel is your best friend
It’s also a good idea to consult the color wheel when selecting website color schemes. You can choose analogous colors - or colors that sit next to each other on the wheel or complementary colors - those that are located opposite each other. For instance, blue is complementary with yellow. You can also choose different shades of your primary color to create a monochromatic look to your website.
5. Compare different website color schemes
You don’t have to commit to the first color scheme you come up with. It’s good to have at least three to four possible combinations that you can test out with colleagues, family and friends to get a sense of what might work for your business. This can help you narrow it down to the best website color schemes that will suit your brand. Strikingly’s site editor lets you try out different website color schemes that will work well with the template that you select. If you don’t find what you are looking for on the predetermined combinations, you can always customize your colors by adding the hex code for the primary and secondary colors that you want to use.
You can also check out our post on the best websites this 2019 for some inspiration on the best website color schemes and design elements to use for your site.