How to choose the colors of a project: the definitive guide

The colors in life always have meanings very important and impacting a lot about psychology .

Did you know that the color of the dress you wear indicates the mood you have?

Knowing the influence that colors produce on our mind we can understand some aspects of people. Colors are also of great importance in the web and in print graphics .

This is why it is important to understand how colors enrich the user experience when, for example, you browse your pages online, browse your brochure, etc.

Our eyes have 3 primary color receptors that react exactly to red, green and blue in equal measure.

The one you see illustrated below is called the “Color Wheel”.

Schematized in a circle circumscribed to a perfect equilateral triangle, where at each vertex of the triangle one of the three primary colors (red, green and blue) equals , exactly every 60 degrees to the right or left the fusion of the two primary colors that form a color takes place secondary. For example, at 60 degrees between red and green, a yellow will form.

So, the three primary colors are: red, green and blue.

There are three secondary colors that form every 60 °: yellow, cyan (shades of blue) and magenta.

Between the primary and secondary colors, exactly in the center (and therefore at 30 degrees from each of the previous ones), tertiary colors such as orange, purple, blue and so on are formed.

saturation, brightness, tone

Obviously, as you will have understood yourself, the “Wheel of Pure Colors” does not contain all the variants of colors visible to the human eye. That’s why 2 other color alteration criteria come into play, and I’m talking about Saturation and Brightness (commonly called lights and shadows).

This triptych of pure colors, brightness and saturation gives life to what is one of the popular models in the representation of colors called HSB, in English, “hue, saturation and brightness” (if you use Photoshop and you’ve always wondered what that acronym meant … now you know 😉)

The saturation identifies the vividness of the color with respect to its maximum potential (in terms of 0 to 100%), the brightness refers to the amount of light (or white) in color (in terms of 0% to 100). In pure colors the brightness and saturation values ​​are at their maximum. The less saturated a color, the more faded it appears, until it loses color totally falling on the gray scale.

By combining pure colors (also called hues), saturation and brightness, you can create all the colors of the light spectrum , visible to the human eye.

Before continuing, however, I want to make you aware of a shocking truth … 90% of the graphic designers and web designers you know would not be able to explain to you with the same mastery what you just read . For them there are only beautiful and ugly colors.

If even for a moment in your life you have approached the world of printing on paper, you will have noticed that the language is slightly different.

In this sector, in fact, the CMYK scheme (cyan, magenta, yellow and black) is used, which translated is called four-color printing.

An RGB color scheme is used on the web, from the English Red, Green and Blue.
The brightness and saturation, in this case, is determined by the electrical power of the electronic support (liquid crystals, LEDs, etc.).

As you can see in the image, the mix of primary colors, in equal measure and at their maximum value (R: 255, G: 255, B: 255), produces a white light, while the absence of the three colors produces the black.

The colors on the web always use the RGB scheme and are represented and coded, by the browser, in a hexadecimal scale and labeled with the pound sign (#). Reds, greens or blues are converted to digits (0 to 255) or characters that the computer decrypts each time.

On this scale the 0, or the absence of color, is represented in the hexadecimal format “00”, while the 255, the maximum presence of color, is represented by “FF”. The equivalents of the primary colors in this scale, therefore, are # FF0000 (red), # 00FF00 (green) and # 0000FF (blue).

Some graphic applications automatically convert HSB to RGB and a hexadecimal currency, but if you are a designer only a deep knowledge of both models will make your life easy.

The relationship between pure colors and the study of the effects that have their combinations is defined: Color Theory.

The theory of colors

When creating a project, online or offline, one of the fundamental steps is the definition of a color scheme to be used.

When you have to  create a website, usually the choice of the color scheme ( “the palette” ) to use on the site is influenced by the colors of the logo; in fact, it is good practice to give a sense of continuity between the colors of the logo and the site itself.

Let’s see together a rundown of possible color schemes that you can use for the graphics of your website , but which in reality can also help you in the creation of graphics for printing.

Monochrome

A hue, saturation and variable brightness.

analogues

Adjacent tints in the color wheel.

 

 

complementary:

opposite hues in the color wheel.

 

Triad:

three equally spaced hues in the color wheel.

 

Double complementarae (Tetrahedral):

two colors and its complementaries.

doubly complementary tetrahedral

 

Neutral:

soft colors.

neutral

 

emphasized:

soft colors and a color with high levels of saturation.

complementary webdesign

 

In addition to making your website look good, colors help users use it and interact with it in content.

It favors “engagement”.

This concept is very important in Web Design for both new and old visitors to your website.

Obviously the choice of colors is a very subjective factor, there are no pre-established rules according to which one must necessarily use a certain color for a certain site. The important point is that everything must be clearly distinguishable and understandable .

Everything must be very clear, usability must always be in the first place.

One of the worst things that can happen is that a new visitor cannot understand how to use your site and decides to go and look for information elsewhere.

“Users don’t have time to waste, especially when they have nothing to do in the next 4 hours.”

Andrea Leti

The user who is on your website must have a nice graphic impression, but you must focus the maximum attention on the usability of the website and the colors.

Conventions play a fundamental role in guiding the user step by step where you want him to go and do what you have decided .

The use of red on a light background attracts attention , as if it were a danger, this is because colors convey psychological effects and arouse emotions.

Let’s see, in detail, what are the effects transmitted by the colors, to be able to choose with greater awareness the colors to be used for our web pages.

Red

Color of passion, of love. In psychology it symbolizes warmth, nutrition and is very stimulating. For many, too aggressive a color. It also symbolizes danger, blood, fire and violence. Red is the first color of the rainbow that infants learn to recognize, the first to which all peoples have given a name. In early Christian art he represented the red demon Lucifer in conjunction with black.

Orange

The color of welcome and hospitality is perceived as a vibrant color and is very popular with websites as it symbolizes attention, research and study. It also symbolizes flame, fire, lust. 

Yellow

The color of the sun symbolizes happiness, happiness, growth and gold. It can also symbolize dishonesty, cowardice, betrayal, jealousy, falsity, disease and gamble. By arousing a sensation of expansion and pushing for movement, yellow corresponds to a condition of freedom and self-development.

Green

It symbolizes nature, environment, life, growth, luck, youth, spring, fertility but also with putrefaction, acid and poison. The effect of stability produced by green represents, from a psychological point of view, firm values ​​that do not change. The choice of green also indicates self-esteem.

Blue

It symbolizes calm, water, sky, harmony, trust, cleanliness and loyalty. Sadness and depression. By fixing this color for a long time, it produces an effect of peace, satisfaction and harmony. Just think of a landscape with a calm sea.

Violet

It symbolizes royalty, spirituality, passion and love. Cruelty, arrogance and tears. Purple is also the color of penance. Traditional color of mysticism, of spirituality but also of erotic fascination, purple indicates the union of opposites, suggestibility.

Rose

It symbolizes femininity and youth. The color preferred by most women around the world communicates a message of weakness and naivety.

White

The color of purity. It is synonymous with cleanliness, innocence, space, chastity, simplicity and peace. But also death (oriental cultures), coldness and sterility.

Brown

It symbolizes neutrality, earth and heat. Dirt. The strong need, indifference or rejection towards this hue therefore indicate a precise attitude towards what is bodily and material and towards physical pleasures.

Black

Associated with power, elegance, magic, mystery and night. It also symbolizes mourning and death (western cultures), malice, unhappiness, sadness, remorse and anger. Nowadays it is a highly appreciated color in women’s fashion for its characteristic of making the person look thinner. In early Christian art he represented the devil.

Grey

It symbolizes neutrality, intelligence, solidity, cleanliness and something modern. It is also associated with maturity and sadness. It is chosen to define a distance and a non-involvement.

This guide will help you choose colors with a criterion, regardless of whether you have to create a website, a business card, a flyer, an advertising billboard.

When you have to choose, trust your own thought: “What do you think is good on your site and what do you think is best for the project you are working on?”

There is enough space in this world to be creative and unique in our own way.

Conclusion

The choice of colors, in addition to arousing a sense of aesthetic balance, conveys to the utmost the perception that users will make of your project, of your website.

For this website I used a custom color scheme, a pleasant mix of monochrome and black white.

For this reason, although for many it may seem a trivial or meaningless concept, colors are a vehicle of emotions.

For example, I can’t force  you to ask yourself:
breathe a second and … don’t think, don’t imagine a big lion  with yellow eyes and a whole body … PURPLE ! Feline yellow eyes and purple body!

Leave a Comment