Colour Psychology in Website Design

Usually, there is a tendency for people to associate particular colours with different emotions. Therefore, the colours used on your website could have a psychological effect on people visiting your site. Through using specific colours which are geared towards the emotion you want to invoke, it has been proven that it can cause an increase in product sales.

Below are some colours together with the emotions and symbols they inspire:

1) WHITE- peace, purity, innocence, chastity, infertility, hygiene, excellence. Generally, white evokes a rather breezy and refreshing feeling.

2) BLACK- grief, night, space, authority, strength, reliability, cautiousness, power, constancy, classy, stylishness, wisdom, compliance, demons, witches. Black is usually quite controversial. It can symbolize either good or evil.

3) RED- love, passion, heat, blood, fire, warmth, anger, stimulation, power, action. Red can be used to draw the attention. It is best used as an accent colour rather than a background colour.

4) PINK- romantic, tenderness, femininity, affection, soft hearted, softness, sensuality, tranquility. Pink tends to usually reduce aggression.

5) BLUE- water, sky, ocean, ice, coldness, freedom, peaceful, vapour, calmness, temperature, shade, travel, truth, insight, solitude, loyalty, intelligence, devotion, trust, masculinity. Be careful however. Different tones of blue can vehicle opposite meanings. Light blue tends to be more peaceful whereas dark blue is more depressing.

6) PURPLE- luxury, superiority, monarchs, decorum, prosperity, feminine, infatuation, sensitivity, romance, coolness, shadows, mysterious, mystic, mist.

7) GREEN- nature, money, envy, greed, calm, existence, childhood, regeneration, richness, rebirth, hope, vitality, freedom, culpability. Here also, different shades of green can convey different meanings. Dark green is associated with cool, it is also seen as masculine, conservative, and a colour of wealth. Emerald green symbolizes immortality, olive green symbolizes peace. Generally, green is an easy colour for the eyes.

8) YELLOW- vividness, light, warmth, purity, sympathy, light-heartedness, inventiveness. Note that lemon yellow is a tiring colour for the eyes. There is a tendency for yellow to increase bad temper so it shouldn’t be used as a main colour, but rather as an accent. Also, the colour yellow tends to enhance concentration.

9) ORANGE- warmth, autumn, flames, youthfulness, satisfaction, wholesomeness, fruitfulness, power, strong, generous, fortitude, ambition. Orange is the colour which is the most connected with appetite so it could be a good choice for a website selling food products. Orange can also make a product seem more appropriate for everyone and also more affordable.

10) BROWN- wood, ground, strength, soothing, solid, reliable, maturity, humility, conservative, plausible. Light brown conveys an idea of genuineness.

11) GREY- exclusiveness. Grey also enhances a person’s psychological response to other colours.

More generally, red, orange, and yellow are colours which tend to enhance excitement, whereas purple, blue and green for example are rather more soothing colours.

Make use of the colour which symbolizes the emotion you want to put forward as the main colour on your website. You can also add 1 to 2 other colours in order to reinforce this emotion. The colours you use for the background, header, graphics, text, highlighting, headlines, etc. all contribute to the influence your website will have on all your visitors.


J.M. Stevens is contributing editor at This article may be reproduced provided that its complete content, links and author byline are kept intact and unchanged. No additional links permitted. Hyperlinks and/or URLs must remain both human clickable and search engine spiderable.

Hex codes for Colours (RGB) Explained

When you work on your computer such as editing an HTML page, doing an animation job, or editing a photo, it is quite likely you might come across some strange colour code set in the program which looks like #FFFFFF. Usually people just use the code with the help of a web palette or any program for editing. Nevertheless, this code gives you some insight on the display of your computer and how the screen functions.

Bearing in mind the basics of elementary school art, the three primary colours are red, blue, and yellow. They’re called the primary colours because there aren’t any other colours making them up. For example, purple isn’t a primary colour because it is obtained through the combination of identical parts of blue and red. If we adapt this fact to the mechanics of a television, or a computer screen, colour can also be produced by blending the three basic colours in order to make other colours. This process is called “additive colour”.

If you suppose that all the TV’s and computers simply make use of the three primary colours to begin with, it is in fact not that easy. The three basic colours used to begin with the colour mixing are red, green, and blue. For example, if you start with the composite colour green, you will still be able to make yellow because it can be found within the green. Also, now you will begin with four colours: red, green, blue, and yellow. Then, the second procedure for working with colours is called “subtractive colour.” Subtractive colour is when you combine colours together in order to make another one, just like mixing red and blue paint, in order to get purple. This isn’t the same as additive colour, because here, colours are made by taking away a shade out of the colour scheme and by adding more of another. If you add more white to some black, the colour obtained will be more silver through taking away more black as more white is mixed in. If you use the subtractive colour method when you add all the colours together, you will obtain black because you added the colours together and they subtracted from all the other colours leaving you with black.

So when you blend together a computer’s additive colours, red, green, and blue, together, you get white. When you shine a white light through a prism or a lead crystal glass you will obtain a rainbow of colours (which is actually how a rainbow is made). White light shines through water into the air, thus separating the it into a colour rainbow. Further, if you paint a circle with rainbow colours in it, light up a light and turn the circle fast enough, you will obtain white. This process is called the “Newton Colour Cycle”.

On computers, colours are described with a hexadecimal code. This 6 digit number represents the shades of three additive colours in the first two digits, namely red, green and blue. The hexadecimal system contains 16 digits beginning with 0 up until F, which means number 16.

For example, #FFFF00 stands for yellow (notice that the red and the green are at full tilt and there isn’t any blue). By squeezing the red and green next to each other, the red ends up cancelling out the blue leaving us with yellow. So it is a subtractive colour method being used in an additive world.

Another example is the DC143C code, which creates a hue of red called “crimson.” So we can tell that the red setting, DC, means the colour is pretty intense, there’s not much green and blue is set a little under halfway up. So hexadecimal coding is just about fine-tuning the right shade. You can consider the 3 different colours from 00 up to FF, there are 256 different shades; and we end up with 256-3 different colours which make clear the 64 bit representation of colours.

So now you know more about Hex codes for colours, you can bring it up in your next exciting conversation!

J.M. Stevens is contributing editor at This article may be reproduced provided that its complete content, links and author byline are kept intact and unchanged. No additional links permitted. Hyperlinks and/or URLs must remain both human clickable and search engine spiderable.