Colour harmonies

is often the key factor in the success of a design. There are an infinity of colours and shades to choose. This means that choosing a selection of colours for a project seems something complicated. We must have some help which allows us to restrict the search for the colour combination we’ll use! Certainly, appreciation of colours is something very subjective and, in addition, something that depends on the swing of fashions. Anyway, some basic ideas are very helpful and they must be known so we can be able to work with ease with designs. This kind of information can also be found in our bookshelf: the manuals of design always include more or less extensive chapters dedicated to the election and combination of colours.

In the previous page in this section of the Manual, we have an introduction to the world of the in the digital design. Here we will see some essential ideas to combine the colours with success.

There are many open options at the time of creating a design. A combination of several of them in a single page seldom works, so we may consider them as mutually excluding. A certain treatment can be associated to different connotations and values of the design: freshness, seriousness, quality, being casual, youth, subtle...

We can consider the in a project in different ways: a monochrome treatment, or with tinted grays; dimmed or muted colours; pastel colours; vivid colours... and within each one of these possibilities, we can use different combinations. Some work, others no. Here we will try to introduce some basic directions for the selection of colours within one of these schemes.

Harmonizing colours.

Research and the experience of painters throughout the centuries allow us to have us diverse sets of colours which harmonize specially to each other. The best way to explore these groups of colours is to use the colour wheel, a circle where colours are radially juxtaposed. A wheel basically orders sequentially the progression of the colours that form the light spectrum, from the red to the violet.

The wheel must be familiar to us, no matter how little we have used some graphics program or or we have chosen colours in a any program. From these colours and their variants (adding white or black to obtain pastel colours and muted colours, respectively), we can make our selections of colours for a project. The reasons why certain colours go on well with some others are complex. Different forms exist to select colours so that they form a harmonic group: harmonious colours, as a group are mutually enhanced.

The chromatic selection for a project usually relies on a few dominant colours that harmonize with each other. A great amount of different colours, although could something pleasant to watch, is difficult to keep throughout a series of pages or screens, if you really try to focus the attention in something else than the spots.

Different types of harmonies exist, and they’re used by the designers and artists. Let us see some of them. The example that we propose is based on the basic colour wheel —it’s possible to obtain more variants by adding different amounts of white or black or changing luminosity.

Monochrome harmony.

Very simple to use, sober and elegant. This one is based on a single and its different tones. That is, in a chromatic wheel, we would stay in a single point and we would choose variants of the same value and saturation, with greater or smaller luminosity. In the Windows editor, the auxiliary bar on the right represents those different tonalities from a .

Analogous harmony.

The analogous colours occupy neighbouring positions in the wheel of colours. Due to their similarity (they share some primary colour), they harmonize well to each other. This type of combinations is frequent in the nature. Think of a landscape: the leaves, the seascape, rocks... within each of these areas you see analogous colours.

Complementary colours or contrast harmony

Complementary colours are in opposed points of the chromatic circle. These colours are reinforced mutually, so that a same seems more vibrant and intense when it is associated to its complementary. These contrasts are, then, suitable to call the attention and for projects where a strong impact through the is desired.

Split complementaries

Instead of using a pair of complementary colours, the ones in immediately adjacent positions are used. The contrast in this case so is not so marked. The trio of complementary colours can be used, or only two of them.

Double harmony of complementaries

It uses a pair of associations of complementary colours.

Triad or three-colour harmony

Three equidistant colours in the chromatic circle are chosen. More complex versions may include groups of four or five colours, equally equidistant (located in the vertices of a square or a pentagon enclosed in the circle.)

Colour families. Models and palettes

We must remember that usually the denominations of cold colours and warm colours Cold colours (the half of the circle centered in the blue pole: that is to say, from the violet to the greenish yellow.) —they give a sensation of calm, coolness, distance... The warm colours are the opposed half of the wheel, and they provide a sensation of warmth, proximity, vividness. These colours form a great series of harmonies of analogs and is easy to create understated but pleasant designs with them; it’s difficult to go wrong.

A family of colours includes colours that harmonize to each other, based on a primary . Therefore, we have three main families: the red family, the yellow family and the blue family.

It is possible to speak of different basic models to select colours for a project. Each one has its connotations and is better suited for certain uses, whereas it would be shocking in others. Although nothing prevents us to try to break the moulds:

Vivid and intense colours— colours taken directly from the wheel.
Pastel and muted colours. Softened versions of the colours, with greater and smaller luminosity respectively.
Combination of black with other colours. The black and white perfectly combine with any of the families and the schemes of vivid colours, pastels, muted. In fact, the achromatic black, white or greys heighten the perception of the colours of the rest of the composition. Also it is an interesting trick to create an image with muted tones, of neutral tendency, and just a few touches of intense colours: this provides a greater impact to the rest of the image, which as a whole seems to have more intense colour than it really has, and whitout estridency.

Digital tools to choose and combine colours.

Evidently, to choose colours within a digital production workflow is very different to mix colours in a palette with oils or acrylics. But also the requirement of colours it is very different for the world of the press and for the screen. Obviously, within a digital production system, comfortable and flexible tools allow to combine colours, as a wheel, directly in the screen of the computer. There are some direct and intuitive tools for the creation of harmonies in the graphics software.

A very good and user-friendly program called Wheel Pro generates simulations of the results of the colour harmony (it admits multiple types of harmonies) in Flash format. The options of the program are multiple, from an example of product package to logotype or an Website interface. Recommended by the ease of use and the excellent possibilities it offers.

CorelDraw, since its version 8, has an excellent wheel of harmonies of colours. You can choose from simple to complex harmonies (even with groups of 5 colours). The form in which it works is very simple; the window is one of the options of the control dialog box, and it allows to save the colours chosen within one of the palettes of the program. The system is very useful, since in addition it displays variations of the colours that have been chosen.

There’s a plugin for Photoshop (at the moment available only in the Mac version) which makes something similar to the harmonies palette in CorelDraw. Hotdoor Harmony has a similar interface to the one already described for the Corel program. In this case, to check your changes in colours, the program includes a sample image to which the colours of the harmony are applied.

Many other possibilities exist in addition to generate harmonies and choosing the colours. For example, a series of applications (commercial or free), Java applets and scripts which can be opened in any web browser.

The easiest to find are free javascript-based tools to specify the of the elements of a Web page, like the of bottom, of the text and of the links. Some of them are surprisingly useful and powerful. One of the best is Pixy’s.

An applet from a project of investigation in the University of Syracuse generates combinations of harmonic colours. In fact, this one is a tool to conduct a survey, but it can be downloaded to your computer and be used like a combination of colours utility. You’ll find it in http://creativity.syr.edu/colortest/

In easyRGB there is an interactive utility that creates harmonic combinations of colours; the user may introduce his own colour, for example the one used in his project logo.

New Vision has an utility called The Complementor that also is used for the same objective.

Scheme Designer

Scheme Designer (see image above) is a fantastic free utility with numerous options: generates different types of colour harmonies and not only allows to take samples with a colour eyedropper and previsualizes the results of the harmonies in a page model; you can export the code ready to use in HTMLHTML and CSS; you can save the generated schemes of colors, and many more options.

Finalmente, siempre queda el recurso de utilizar cartas de colores en forma de gráfico. Para la mayoría de programs puede utilizarse la herramienta cuentagotas para tomar muestras de los colores. Si el programa no dispone de este útil, puede emplearse un programa auxiliar, como Eyedropper (comentamos este programa en un artículo reciente sobre .) Finally, there’s always the possibility to use colour charts in graphical format. In most programs you may use the eyedropper tool sample colours. If the program doesn’t include this useful tool, you can use some auxiliary program, such as Eyedropper, ColorCop or Nadger (our favourite) as we comment on the article about graphic production of web pages.

Let’s remember, in addition, that:

A GIF or any other format of colour indexed graphic file (like a PNG-8)serves immediately like a colour palette.
Se pueden exportar paletas de colores a diferentes formatos reconocidos por los editores gráficos (pal, aco, act...) You can export palettes of colours in different formats, recognized by the graphic editors (pal, aco, act...)
To get a palette of colours in a vectorial illustration program, there are several possible strategies:
- Use some utility that assigns names to all the colours.
- Use the small colours in “Chips” within a document of the program and save it.
- Import the palette from a format recognized by the program (pal, act...).
La conversión de sistemas de unidades rgb-hsv-cmyk... suele ser automática dentro del programa, así como el paso de unidades hexadecimales a decimales o viceversa. En caso necesario pueden emplearse utilidades al efecto, o incluso para la conversión dec-hex, la misma calculadora del sistema. The conversion between the systems RGB-HSV-CMYK... usually is automatic within the program, and so is the change from hexadecimal units to decimal or vice versa. If necessary there are many free utilities for these conversions, or you can even perform conversions DEC to or from HEX with the system calculator.