Choosing Website Colors: Tips for Designing Your Website


So you're building a portfolio website! You might feel like all around there are decisions to be made, and choosing your color scheme is a big one. Your website colors will be your visitors? first impression when they enter your site, and strangers are not forgiving. If they don't immediately relate to what you've chosen, they're unlikely to stick around past the home page.

We all know that colors can provoke an emotional reaction, and we all have our own subjective taste. So how can we make a choice that's going to please everyone?


I'm designing my own website from scratch. Where do I begin when choosing colors?

Let me share a little history with you. The color wheel was invented by Isaac Newton in 1666. This is basically a circular representation of the various primary and secondary (along with several tertiary) colors.

But what does his creation nearly 400 years ago have to do with your website? The idea here is that finding website color schemes which work together is as easy as using the wheel. Take a look at our image, below. Pick any two colors which are opposite each other on the wheel. Or choose any three colors that form a triangle when linked. Now try any four colors which form the shape of a rectangle (two pairs of opposite colors). Now take a look at the guidelines below.

The color wheel to help choose website colors

Basic Website Colors Structures:

Four basic ideas to help you decide upon a color combination for your website are:

1. Find the science too tough? Try a Monochromatic design. These refer to the use of colors of the same hue, perhaps with some different tints or shades. Like the calming effect of blue? Choose a light and a dark shade and you're golden! These designs are often easiest on the eye, with only gentle changes, keeping your site with a fluid feeling where every page is connected.

2. Want a strong sense of one emotion or feeling? Analogous colors may work well for your design. These are colors which are close, or even right next to each other on the color wheel. Tip: Get a second opinion when trying this out, as analogous colors can sometimes clash, creating an unsightly appearance and jarring feeling for your visitors.

3. Complementary design: Here's where we use the wheel to its full effect. Using colors which lie opposite, or directly across from each other on the wheel can give a strong powerful message, and make your website really stand out. This is best done when you want a striking website, and can be enhanced or muted by adding white or black to the colors to brighten or darken them as you wish.

4. Triadic colors: These colors are evenly spaced apart from each other (they may also form a triangle) These choices often form a sense of depth in a website, and generally complement one another very well. This will work best if you have a website which is text heavy rather than full of images, as the page can quickly become too busy for the eye.

The beauty (of designing your own website!) is in the beholder

Still confused? Want a little pop psychology to help you make your mind up?

Psychologists and market researchers tell us that color impression can account for up to 60% of the acceptance or rejection of a product or service. Impulse buyers generally react best to red-orange, black and royal blue. Planners and those who stick to budgets react best to pink, teal, light blue and navy. Traditional people react best to pastel colors such as pink, rose and sky blue.

As if that isn't enough to think about, different traditions and cultures also attach specific (and different) meanings to color. For example:

RedGood luck; celebrationChristmas, Valentine's DayPurityPassion, love
BlueImmortality'safe' colorNASoothing; 'something blue' tradition
YellowRoyalty, nourishingNAMerchantsHappiness, hope, joy, hazards
WhiteMourning, deathPurityUnhappinessMarriage, angels, peace
GreenExorcism; cheatingMoney; also see EuropeIslamSpring, new birth

The Bottom Line

Choosing website colors clearly involves a bit of thought, and you should definitely take the time to try out a few different options before making your choice. Using the color wheel, you should be able to find some excellent visitor friendly options. Pair your choices well with font and images, and you've created a winner!

Happy with your color scheme? Now move onto choosing your website font.


Top 5 Website Builders