5 things you should about website color schemes

What color do you like?

We see colors everywhere around us. Most of the time, it’s how we perceive beauty and things we like. When it comes to our personal choices, color can easily become a deciding factor. What you won’t realize, colors that are easy on the eyes, affect your decisions almost all the time.

Did you know? Color increases brand recognition by almost 80%.

You have seen websites, which are as simple as Google and can be as congested as Facebook. However, Each has their own feel based on what they stand for. When it comes to designing a website, color is an important factor that many web designers look into. Take this site, for example, how is the design and feel so far?

Things to know while selecting colors for website designing

According to Google, people are more likely to make a subconscious judgment of their choice with 90 seconds of initial viewing of a site. Moreover, between 62 and 90 percent of that assessment is based on color alone.


Basic color psychology


As far as colors are concerned, each brand uses its own unique set of colors. Some basic color set of colors used are as follows:

Basic Color Phycology | London Image Institute: https://londonimageinstitute.com/how-to-empower-yourself-with-color-psychology/

Usually, only one color is used when selecting a color for a brand. However, some large companies like Google can diversify and use multiple colors to represent their different core values. Niel Patel, has shared brand color stats on his website that better explain the color value. It has its stats taken from the top 100 most valuable brands. Here is the image:

Brand Color Stats | Neil Patel: https://neilpatel.com/blog/website-color-scheme/

Learning the color theory


Each color represents an emotion, that reflects on their customer’s behavior. Like yellow color represents happiness, which is the main color in Mcdonald’s logo.


We know each color has two main types, primary colors (red, yellow, and blue) and secondary colors (mixture of primary colors like green, orange, purple). Further, comes tertiary colors, which are a mixture of primary and secondary colors, for example, mixing blue (primary color) and green (secondary color) will give you blue-green color called aqua or cyan (tertiary color).


Here is an image that explains this concept:


The Color Wheel | Graphic Mama: https://graphicmama.com/blog/color-theory/

Furthermore, there are warm colors, and cool colors (women who do makeup will know what I mean). Here are examples of warm and cool colors:

Warm Colors Cool Colors | New Mexico State University: https://aces.nmsu.edu/pubs/_c/C316/welcome.html

Gender based perceptive preference colors


Now, what people will you will be targeting? That will be the next thing to focus selection in colors. Each gender has its own preference of shades and colors they like. According to studies conducted by Kissmatric, here is a brief chart of gender-based color preference:

Preferred Colors by Gender |CoSchedule: https://coschedule.com/blog/color-psychology-marketing

Keeping it simple


Your idea is what we represent on your site that we work on. Now, you don’t want a site that is difficult to navigate, or so brightly colored, you can’t open your eyes. This is why all colors in designing a website should be easy on your eyes. Most sites with a high level of users use cool shades in their sites that keep each user experience, pleasant.


However, you can try to go for any of these five main color combinations:


  • Complementary colors – These colors are the ones that sit across from one another on the color wheel. Normally this selection of colors will be a combination of one warm and one cool color. Red and green colors are the most popular complementary pair.


  • Split complementary colors – These colors are the ones made up of base color and two colors that are adjacent to the complement of the base color, just like a triangle in a color wheel.


  • Triad and tetradic colors – These colors are the ones that have similar relationships. Triadic or Triad colors are colors that are evenly spaced on the color wheel (like red, blue, and yellow). Tetradic colors, on the other hand, are four colors comprised of two pairs of complementary colors (like red, green, blue, and orange).

Triadic, Tetradic Color Schemes | Over the Moon: http://overthemoon-design.com/2015/10/triadic-tetradic-colour-schemes.html

  • Analogous colors – These are the color that likes to sit next to each other on the color wheel. Resulting in colors that are extremely similar like green and yellow-green.


  • Monochromatic colors – They are simply variations of the same color, which happens by using tints, shades, and tones, also called color nuances.


Letting go of your biases for a perfect harmony

One of the mistakes you can make while designing a website is choosing a color you like. Your preference should be a color based on psychology rather than personal preference. For example, if your favorite color is blue, you can’t use that if you’re a cosmetic company targeting a female demographic. Colors like purple or pink will be a better fit.


In a website, there is no specific rule for using colors that is beneficial for your company or for rankings on Google. Instead, you can follow a 60-30-10 rule. The breakdown of this rule goes like this:


  • Using 60 percent of a dominant color


  • 30 percent of a secondary color


  • Finally, 10 percent of an accent color


With this rule, you can come up with a color scheme, which creates perfect color harmony in your site.




Each website represents their own set of colors and aesthetics that leaves an impression on its visitors. Like if a site is for females it should be styled in colors that women like, same is the case when designing for men. For kids, however, using happy warm colors or attractive colors are the best, like yellow, orange-pink, teal, and so on. While designing, you can take ideas from your competitor’s website. Instead of coping with it from somewhere, try to come up with your own color scheme that suits your brand or company.

If you are designing your new website or looking for revamping your old one, contact us and we’ll help you out.