I love colors. Colors fascinate me, colors excite me.

I don’t think we designers see colors the same way most people do because we probably care more about them, we pay more attention to them, we have discussions just about how a button is colored, why somebody made that color decision etc. We designers need to have a good understanding of the emotional impact of colors. The reaction to a color varies from person to person. How I react to a certain color, in a certain context can be different to somebody else. It’s due to personal preferences, cultural background etc. Also liking a color is very subjective. Personally, I don’t like red. I don’t like red cars, I don’t like red clothes, I don’t even own any cloth that is red. A few years ago I bought a red nail polish that I love to use occasionally but this is the furthest where I go with red in my personal life. However, I’ve designed websites and apps that primary color was red because I thought that was the best decision I could possibly make according to the brief (and sometimes in order to solve problems) and have the desired effect on the target audience. I even use red(ish) color on this blog because I think red gives the whole site a little bit of pop as the rest of the site is black and white.

Recently I was struggling with finding the right colors for the app I’ve been working on, colors that will serve the purpose, colors that will interact well each other. While I had to make a decision about it, I still think it’s not the right one. So this is why I decided to write a post about color theory for designers (and product managers who might not see colors the same way we designers do). Color theory is a science in itself and some people build their entire careers on so choosing the right color for a site, app, button shouldn’t be rushed (and should be properly tested).

There are literally thousands of colors at the designers disposal and nearly an infinite way of combining them. In order to get to grips with the basics, here is how colors are classified and the terms used to describe them:

  • Hue: is the generic name of a color, it’s the pure color (blue, green, red, etc.).
  • Chroma: is the purity of a color (a high chroma has no added black, white or gray).
  • Saturation: refers to how strong or weak a color is (high saturation being strong).
  • Value: refers to how light or dark a color is (light having a high value).
  • Tone: is created by adding gray to a color, making it duller than the original.
  • Shade: is created by adding black to a color, making it darker than the original.
  • Tint: is created by adding white to a color, making it lighter than the original.
  • Pastels: these are pure colors but in this case both white and black have been added in equal proportions, they become greyer and softer, subdued colors and are generally very pleasant. Pastel tint is a pastel color where the proportion of white is greater than black. Pastel shade is a pastel color where the proportion of black is greater than white.

Color wheel: On the color wheel we have 3 types of colors which are primary, secondary and tertiary colors.

  • Primary colors: the true primary color is one that cannot be mixed from any other combination of any other two or more colors. It contains no visible trace of any other color whatsoever and in itself it appears visibly pure. Red, blue and yellow are the primary colors.
  • Secondary colors: these colors are created by mixing two primaries together. Orange, green and purple are secondary colors.
  • Tertiary colors: they are created by mixing secondary colors with primary colors. There are a wide variety of tertiary colors that can be created depending on the ratio of primary to secondary colors used.

Color contrast:

  • Contrast of hues: the difference of hue between the three primary colors is the greatest contrast of hue that can be obtained. One step removed from this is the contrast between the secondaries, and then the contrast between the tertiaries is even less noticeable.

  • Contrast of light and dark: in chromatic color the light/dark is present in the same extreme as achromatic color. The greatest contrast between two chromatic colors would be between yellow and purple, in the natural order of color, yellow being the lightest and purple being the darkest.

  • Contrast of temperatures: the color wheel, in the natural order of color, can simply be cut into two halves, one being warm and the other being cold. If we draw a vertical line from yellow through to purple, the hues to the right of this line are warm colors and to the left are cool colors. Another characteristic of warm and cool colors is that warm colors advance and cool colors recede. Colors appear hotter as yellow diminishes and red increases. Blue is a very cold color whereas green is a little warmer due to the addition of yellow.

  • Complementary colors: this is the contrast between two colors that are diametrically opposite each other on the color wheel. They are usually strong being opposite in both temperature and hue.

  • Simultaneous contrast: is the ability for a color to change its hue when placed next to or surrounded by achromatic or chromatic color. The human eye tends to differentiate between two neighbouring colors by emphasising their differences rather than their similarities - the background colors affect the foreground colors.

  • Contrast of saturation: this is simply the contrast between a pure color and the same color which has been diluted with white, back or grey. The pure color will be intensified if it’s surrounded on all sides by diluted or greyed off colors.

  • Advancing and receding colors: warm colors are generally regarded as advancing colors and cool as receding, there is a condition when the roles of both are reversed and the opposite happens. If we reverse the tonal value of a hue it becomes weaker in intensity and recedes for example reversing the tonal value of red becomes pink, so even though it’s a warm color its hue is not as intense and therefore recedes. These colors can be also used to create the illusion of depth and perspective within design. Some colors appear to visually advance, appearing closer to the viewer, and some seem to visually recede - so appearing further away. In general if you want something to appear to come toward the viewer choose warm colors such as red and yellow. Blues and greens seem to recede when sit next to red.

Part II coming soon…