colour combination in your website

What colour combination should you use in your website and how it will help your visitors in the long run

colour-combination-in-your-websiteTo some people, the more colorful it is the merrier it is. However, in a more general definition of a well-balanced website appearance, it is not always the case. Words such as nice, wow, or beautiful can be very subjective when it comes to evaluating the appearance of a particular website. For some, a colorful, flashy, and bright website can be appealing while a darker theme could be better for others. So the main question now is – how do you go about choosing the right colors for your website?

The biggest and most widely practiced concept of web color implementation is the RYB approach. Being the main three colors, Red (R), Yellow (Y), and Blue (B), hence RYB, these 3 colors are known to have a great impact on how web visitors react and interpret messages on your web pages.

You’ll realize that most of the links on the web are underlined in a default blue. Error messages are usually in red. Yellow provides a nice light addition that compliments dark backgrounds really well. Orange (red-yellow) texts, for example, is extremely popular with black backgrounds. Try it and you know why.

Take a look at for example. It has an excellent application of the primary and secondary colors together with the support of black and white. Apply this technique to your web designs and you’ll improve the overall layout appearance significantly, if not greater.

Different classification of websites requires a different approach. In most cases, you don’t want to have a corporate website with a black or an extremely dark background. Apparently, a white background seems to signify formality and a certain level of layout cleanliness. Not that a dark background can’t have a clean-cut look, it is just a typical mental translation of human observation that the color white is, in fact, the cleaner one or simply easier on the eyes. The black background on the other hand frequently portrays something which is fancy, elegant, playful yet has a reasonable level of seriousness in it.

A majority of designers or rather webpage creators believe the role of emphasization by utilizing light and dark colors. For example, a dark background combined with a light content area simply attracts visitors to emphasize more in the middle, which happens to be the content area. It simply works too if you have a light-colored background with a dark content area. Alternatively, you can add patterns or images into the background to spice things up. Just don’t get these additional items to change the original appearance of your colors. The only issue with background with exceptionally large images is that it might kill some of the attention that you want your visitors to have on your main content.

There’s nothing wrong with having a website with either a light or dark background, provided that it looks good, and of course if it is nicely presented together with a readable content with a friendly user interface. How do you know if it looks good is simply something that can’t be measured by words, but rather by simply looking at it? If you look at it and by some spontaneous self agreement, that you think the color fits perfectly with everything else, then you’ve hit the big jackpot. If it works otherwise, and you just feel like there’s something wrong, play around with the colors until you have that comforting feeling that you’ve done a great job.

You might be thinking right now, which color goes with which color? You can either browse all over the net, looking at websites and noting down a good combination of colors as you go or you can simply go to This website is extremely simple and easy to use, yet very powerful in terms of features. Simple and straightforward, you simply choose one dominant color for your website and it’ll simply choose for you 6 other colors that compliment your main color, together with the color codes. Simple as 1-2-3. Try googling for color match and get enhanced and modified versions of the original.

Additionally, always try not to get your website too dark or too bright. You can use either one or both of them at the same time, but not too excessively, and try to find a supporting color that compliments or enhances your initial choice. Try to balance up the usage of color tones all over your website too. If you think that the upper right of your website is too bright compared to the rest of your page, then either you reduce the brightness to equal the overall layout or simply brighten up the rest of the website, in a controlled manner of course. If you’re adventurous, replicate that bright top right area to the bottom right area, making the right area somewhat a “bright colored zone”. The key point here is to maintain the balance of your color usage. You don’t want to drive a car with one of the doors being slightly and yet obviously darker or lighter.

Last but not least, try to limit the number of colors to a reasonable amount. 2 to 4 are a good amount of colors, not counting black and white. Black and white are just simply too important not to be used. If you really need to use extra colors, try to use a darker or lighter version of your main colors. If your main color is red, wine red, crimson, or even maroon are good alternatives. Even a certain tone of brown could actually look like red sometimes. Try to “recolor” your graphics or get some graphics that tally with your overall selection of colors.

Another good concept to follow is to apply a color scheme according to your logo. If your logo has orange and black for example, try to enhance that color by applying those same colors as well as the same colors with different tones throughout your whole website. Some designers even select their colors based on the preselected images they have for their website. Certain images just tend to be too exceptionally perfect to be omitted, thus explaining such occurrences.

I hope this guide will help you to get your colors right and have a better understanding of what to choose and what not to do in any of your future web design works. Nevertheless, try not to limit your creativity and imagination based solely on this article. Get your ideas flowing and experiment with your ideas constantly. Good luck!


Leave a Comment

Your email address will not be published.