The world of colour

Children have a sense of colour much more spontaneous and free than the adults. Sometimes it is necessary to come back to our infancy and use colour with the joy of the small ones (drawing by Isabel, aged 6.)

One of the main incentives to use digital screen media instead of printed matter is being able to use the colour, because it doesn’t mean a luxury. Indeed, in the audio-visual communication, colour is not a luxury, but a necessity (though we shouldn’t letting black and white only out, naturally, for certain projects.)

Studies on perception and communication demonstrate that a correct use of the colour makes the information most attractive, allows it to attracts more quickly and better (with one better understanding and retention.) What is a correct use of the colour? Basically to use it for a determined function, for example emphasizing the essential parts of the message or evoking a certain sensation selectively (joy, coolness, seriousness, quality...): the colour does not need to be a simple decoration.

Connotations and use of colour

Although colour surrounds us in all sides and it is a key element in the natural communication —just think about all the variants of coloration in the world of animals and plants— to master it in the arts or design isn’t a simple task. The best form to use colour is doing it selectively, to highlight certain parts of the page, it’s better to avoid a chaos of colours that compete for calling our attention.

The meaning of colour in communication is, then, very important, and a suitable or inadequate use of it may be the difference between transmitting a message as it is meant, and getting the opposite effect. That’s why it’s important to consult different bibliographical references or web resources, to know more about the importance of the perception of colour and the way we can use it.

Colour palettes.

The selection of colours for a project constitutes a palette, by analogy with the colors selected by the artist. The best way to assure the consistency between the colours in different images or documents is to use colours of a shared palette. This is easy, because many programs allow to use the same palettes. Those of the Pantone or Trumatch colour systems include hundreds of different colours. Working in of 24 bits colour mode it’s always possible to define new colors, over 16 million possibilities! Can you imagine a crayon or marker box with so many colours? And even better, can you imagine you never run out of them? That’s what digital colour offers you. But don’t get carried away yet; for screen-based work this is exactly so, but for printed work you still will find the same constraints of colour matching, budget limitations and so on.

In the programs for web design, either for HTML or graphics, there is a limited 216 colour palette, called web-safe colour palette. Those colours look the same in any platform, be it Mac or PC, even with vintage, low resolution graphical cards (those that allow only 8 bit-colour) since this set of colours is common to the minimum palette that both types of system show. Although this number of colours is very small in comparison with the colours of other palettes or the variety of hues you can display in today’s computers, it’s than enough more for many projects. If we compare this selection with the number of colours in a watercolour or pencils box... few traditional, old-school designers have such variety! Even if it is for historical reasons, most web design applications still offer the old web-safe palette (see the image for a representation of this palette.)

We must consider, nevertheless, that those colours of the safe palette are not the only ones which can be displayed in a system with an old card which is able to show only 256 colours. By placing pixels of different basic colours many more colours can be simulated by visual mixing. At first glance the result is a continuous tone (after all, printed materials also have their colours as a visual illusion, with very small dots of four primary colours: cyan, magenta, yellow and black.) These tones obtained by visual mixture are prepared the same program of graphics, at the moment you save an image that contains some colour not present in the palette of 256 colours of the system. Like a curiosity, it is worth visiting the Color Mixer, an interesting Java application that produces a mixture of 2 or 3 colours of the safe palette to simulate the colour that is indicated to it.

Economy in the use of colour.

However, having so many colours at their fingertips not force the designers to use a great amount of them. They have many options to choose, but for each project, the professionals usually select a limited palette: a combination of a few colours that are consistently used throughout the project, making the general design a more coherent one. One of the advantages to use a limited palette is the fact that it is simple to emphasize elements of the design with a selective application of a certain colour. Many designers or painters create works which, at first sight, seem to have very vivid or intense colours, but in fact they are made with a majority of neutral colours, and just a few touches with more vibrant colours to give some emphasis. For example, a picture painted in almost its totality with ochres, siennas, grays, whites and black, will look really colourful with a slight touch of more vibrant colours, like coerulean blue and orange.

Colour definition systems.

In order to define the colours with which a determined program works, three main models exist: RGB, HSV and CMYK. In addition, commercial systems of definition of colours exist, like the Pantone system. In the Pantone system a series of colours for printing are obtained by means of mixtures of proprietary inks provided by the manufacturer. In order to obtain the expected results, it is essential to have a book of samples of those colours on paper (smooth or rough paper —there are quite a few swatch libraries.) The Pantone colours are only simulated in your screen and they have an equivalence in cmyk only for a part of their range.

Many design programs incorporate complete utilities of colour management , to assure a correct visualization in screen, and a correspondence between the colours of the monitor and those printed, since there is a lot of difference between the colours that appear by additive mix (by projected light, as in the screen) or of substracting mix (from reflected light, in printed materials or any real object.)

The values assigned to each component of one colour are measured in different units. It is habitual to assign numerical values in decimal (from 0 to 256) or hexadecimal ranges (a system in base 16, of general use in the computer science programs that use numbers 0-9 and letters A-F). For example, a colour can be RGB (15,150,256) in binary and another colour (cf,cc,00) in hexadecimal. The colours in patented systems, such as Pantone, are defined by a reference number in their catalogue, for example, Pantone 350C. Naturally, this example is a colour that can be obtained, more or less faithfully, with a combination RGB, HSV or CMYK, in your screen or printed. But the colour gamma (the total range of colours which each system can display) is different for each colour system.

In the RGB system, colour is defined in terms of chromatic light: that is, a mixture of red, green and blue light which, when combined, produces all the colour-light like those on the screen or the lights of a theatre scenario. Combining those three values we obtain all the possible colours. A value of (0,0,0) is black, the maximum value in each one yelds white light.

Another system with three parameters to define the colour is the HSV system (of hue, saturation, value ). The three parameters are related to those of system RGB. The dye (hue) is the colour to begin with; saturation, intensity or chroma means what concentration the pigment has, and the value supposes a more or less dark tonality.

The CMYK System, of Cyan, Magenta, Yellow, BlacK, defines the colours in additive mix, as an inkjet printer or the commercial press does. The colour is the result from the superposition of semitransparent dots of the four colours cyan (a kind of blue), magenta (intense pink colour), yellow and black. The system is additive, unlike the previous ones, and here (0,0,0,0) means pure white (usually the blank paper.)

Colour in screen and printed is very different, and the range of colours that can be represented doesn’t match exactly. The colour management systems allow at least that the colours simulated in screen are as approximate as possible to those which will be obtained at the time of printing.

Tips for palette creation, importing, exporting and sharing.

A colour mixer as it appears in a typical painting or illustration program. We can choose in any of the RGB, CMYK, HSV systems and even other options, like the dialog box to pick Windows colours.

Cada programa (tanto de dibujo como de pintura), tiene su propia forma de generar y administrar las paletas de color. Es frecuente que ya dispongamos de una variedad de paletas para elegir. Si aún así queremos crear colores a medida, en el caso más sencillo, aparece un mezclador de colores y se pueden definir los colores uno a uno para, a continuación, añadirlos a la paleta deseada. Más interesante es usar paletas ya preparadas, por ejemplo, a partir de una imagen que contenga colores que nos interese utilizar. Each program (both drawing and painting), has its own way to generate and to administer the colour palettes. Frequently we already have a variety of palettes to choose. If we want to create our own colours, in the simplest case, there is a mixer for colours and you can add them one by one as new swatches to the palette you wish. You can also create palettes from an existing image, which already contains the colours you want.

A fast way to create a palette (with a maximum of 256 colours) is to save an image in GIF or PNG-8 format. A table of colours is created automatically (with a maximum of 256); its associate palette can be loaded when elaborating a new graphic.

With the illustration programs similar utilities exist: Freehand has an xtra called name all colours which is specially useful to create a palette from an image. Also colour lookup tables from Photoshop (an ACT file) can be imported into to the standard programs. Illustrator includes an interesting filter (creation of colour mosaic) that has a similar applicability.

Using colour eyedroppers.

Initially this was an option of bitmap painting programs, but now most programs of vectorial drawing also incorporate this useful tool, which saves lots of time to select colours already used in an image. For example, in Illustrator, the tool alternates its function between “paint can” and “eyedropper”. What it does is select the colour, and tranfer it to the paint tool, then it’it’s applied to the selected object. In the case of Illustrator, you don’t need to change tools in your toolbar or the menu; you simply have to click and release the Alt key to alternate.

Colour mosaics

We’ve already seen that when the system doesn’t have sufficient colours to represent a graphic, it simulates the missing colours as a pattern made with the other available colours. Several forms exist to create this mosaic of points that creates the illusion of a continuous tone in screen; they can be regular plots and irregular (diffussion) plots.

In addition, with programs of drawing and painting, a series of possibilities exists to use the colour mosaics to obtain interesting effects. For example, many programs include a filter that simulates the cuatricromy halftones used in impression: the continuous tones of colour thus are replaced by a plot of colour points in cyan, magenta, yellow and black.

Other effects are similar: the effect of mosaic or pixelation consists of assigning a fixed size grid to represent the image. This filter is available in most paint or photo-edition software.

Finally, one interesting application of these effects is the colour mosaic we find in Illustrator. One of the filters of the program creates a mosaic of colour from a placed bitmap image. The interesting thing is that, next, we’ll have a mosaic of vectorial objects (their shape and size determined by the user) and a ready-made palette of colours sampled from the image, which you can use in the drawing program.

Special effects in colouring. The gradient mesh.

Programs of drawing and painting can apply flat colours, but also more sophisticated fills. The flat colour is too computer-like, to cold. The gradients and other kinds of fills are richer and can go a long way to enhance the images digitally coloured. In the simplest case, a color is fused with another, similarly to two washes of watercolour that have been applied one next to the other when the painting was still wet. More sophisticated versions of the effect put more colors and options, to create multicoloured gradients with radial or linear fusion, and other options.

It has been traditionally considered that drawing programs are unable to create subtle coloured objects, at least not in the same way you can in a bitmap painting application. Nevertheless, something has changed with time, and the incorporation of interesting functions in programs of illustration. The most recent versions of programs of vectorial drawing (in CorelDraw and Illustrator) feature a fascinating tool, the gradient mesh fill tool, which creates a kind of net over the object, and the colors are fused towards each one of the knots of the mesh. This allows to create subtle and very beautiful effects.

Global and selective colour changes

An added advantage to handle the colour with ditial tools is the possibility of saving as many copies as needed, and experience variations in the colour of each one of them. In the programs of illustration and painting we find filters that allow to change the colours of the whole image or the selected parts: saturate or desaturate, add a determined colour, to create an image with a single colour (in different tones)... More powerful is the option to create named colour swatches: if you apply different variations of these swatches to parts of the image, any change in the definition of the base colour will automatically update all the instances where it appears.

Interesting resources about colour

To learn more on this fascinating world of colour, numerous resources exist. In the books of artistic and manual techniques, or design instructional books, there is always a chapter or several chapters dedicated to the colour.

You should also get some art books and see the works of the great classic and contemporary masters of colour...some personal favorites include Matisse, Piero Della Francesca, Willem deKooning, Claude Monet, Paul Gauguin, Paul Klee, Mark Rothko, Richard Diebenkorn, the mesoamerican paintings murals, Vassili Kandinski, the german expressionists...

In the net you will find specialized websites which devote abundant information to the world of the colour, for example Colorize. This is one of the most complete resources, and includes connections to other related pages, tutorials and more. The former Corel designer.com site featured many articles about colour, including the Gary W. Priester’s series, The Color Wheel.

More about colour and the combination of harmonic colours in the next article.