How to Use Colors Properly on Your Website

If creating a website has become a breeze with the help of all the web development tools, it is not so simple to choose its graphic and colors. Of course, everyone to his taste, but we need to understand the use of each color in web design.

When we talk about colors, we go beyond aesthetics and we see that: Colors allow to visually prioritize the content, help out with spreading the message and defining the mood. Therefore, the colors are a key element of your website design, but also the identity of your brand.

Ways of using colors

There are no constant rules on the use of colors. However, it is important to keep things simple, to maintain a reasonable number of colors and to distribute them proportionately. The 60-30-10 rule has already proven itself and will not give you any surprises.

  • The shades of your dominating color must cover 60% of your space
  • Your second color should cover 30% of your web page design and create a strong contrast with the first one, in order to draw attention to the items you want to highlight
  • The complementary color, which covers the remaining 10% is used to emphasize the strategic elements such as buttons

How to compose your colour palette

Our main dilemma is how to compose color palettes without going through the coloring box? One of the wonders of Web 2.0 is the free useful tools pack. You can choose your palette of colors with Colourco or with Adobe Kuler. These two great free tools gives you the chance to discover the HEX code of your colors. This six code characters will turn out to be useful for finding the colors in Photoshop (or any other design tool) and to make good use out of them.

Another tool useful for Google Chrome users is the Eye Dropper extension. That pipette, similar to what you use in Paint or Photoshop, allows you to capture the color and getting the code instantly. Pretty handy, isn’t it?

Now that you know the basic tools, it is only your decision what you’ll choose.

How to choose your colors

Each color is associated with a particular emotion. Here are the most common:

Colour Sensation Exemple
 Blue  Confidence, intelligence  Facebook, Intel, Nokia
 Red  Energy, passion  Coca-cola, Kellog’s, Nintendo
 Orange  Creativity, communication  Orange
 Green  Natural, stability  Starbuck’s, Perrier
 Yellow  Happiness, friendship  Hertz, La Poste
 Black  Power, elegance  L’Oréal, Nike

You can easily find all the color/sensation associations using the colormatters tool. Once you have finished with this process, it only remains to choose a modern mix o colors and exploit their potential.

Neutral colours

Neutral colors are the colors such as cream, gray or beige that are naturally gentle and soft and are reminiscent of the materials such as wood, stone or soil. In web design, they transmit a quiet and natural atmosphere. Useful in particular for culinary websites, wellness or organic products, neutral palettes convey your message in a very gentle way.


Neon colors

Using the 30% space with bright and refreshing colors such as turquoise or fuchsia, your design captures strength and power and it adds a touch of both young and sophisticated look. This trend is adopted by a great number of web designers. Also, using a dark background, you maximize the visibility of neon items. Incidentally, it is created a website in good style.

Pastel colors

Pastels are feminine colors, soft and visually pleasing. In contrast with the garish and neon colors, pastel shades are ideal for captivate visitors in an elegant way. The websites of the creators whose work is linked to childhood, fashion or art, will appreciate the sophisticated look of these colors. Combined with Serif typeface, charm can easily be intensified.

Monochrome combinations

The concept is relatively simple: it is about using different colors of the same shade. The monochrome style inspires confidence and helps leading the visitors to relevant elements. In addition, minimalism is very popular because it also emphasizes simplicity. The three fundamentals of minimal design are balance, alignment and contrast.


In conclusion, play as much as you can with color palettes

If you feel you have the soul of a designer, the climate is ideal to give free hand to imagination. The most popular trends at the moment, like Flat Design or Long Scrolling give the opportunity to play with the tones of your website. Of course, nobody forbides you to use some classic colors here and there, especially if you opt for Flat Design (this tool will change your life).

You just have to make your choice. After all, tastes differ when it comes to tastes and colors, at least in theory.

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.