Uses of Colour in Graphic Design by Lehka Subramanium(Group 1)

1.0 INTRODUCTION

 

                                                       

        “The God is Colouring Newton does shew,
         And that the Devil is a Black outline, all of us know.  
                       (William Blake, to Venetian Artists)

   Colours are at every corner of our sight. Small kids tend to wonder why they are many types colour. And kids will commonly choose a striking colour as their favourite ones without understanding the history and characteristic of the specific colour. Generally, colours are the observable attributes of light. Since light is an energy, colours are categorized as a form of energy too. Colours are used to set mood, seek attention or describe an explanation. Different colours have different wavelengths. The electromagnetic radiation of the wavelength are converted and interpreted by our brain and eyes, thus we tend to see different colours around us.  
Newton’s theory of color was that “the sun’s light, or any other white light, was a mixture of rays of light, each with its own irrefrangibility, by which he meant characteristic angle of refraction in a prism”.(Sir Isaac Newton,1666). 

2.0. FORMATION OF COLOUR

2.1.  Colour Wheel 

   Sir Isaac Newton created the idea of colour wheel in 1666. This happened when he arched the colour spectrum, or the dimension of all noticeable light, into a shape of a circle. Besides using the oblique representation to show the relation between colours, it is also used to adopt colour schemes. The application of colour on how it is applied to whirl around the idea of colour wheels, actually helps to describe on the invention of colours. The colour wheel is a definite sector progressing around 360 degrees. Also, colour wheel are is expressed as an average hue of blending colour , recognizable to every individual as the colour binder is integrated into various function, where the outer edge has a more sodden colour.

   Objectively, the idea of modern colour wheel was built around the 18^th century to express the link between distinctive colours around a circle, while combining diverse primary colours together in a rigid proportion to resolve secondary and tertiary colours.  

          Figure 1.0: The different types of color wheel to express each colour.

          Figure 1.1: The modern colour wheel has been in use since the 18th century.

2.1.          Colour Harmonies

Colour wheel enable us to view the complementary, analogous and triadic, colour at one sight. These components are known as colour harmonies. 

 2.1.1.      Complementary colour

Specifically, complementary colours are colours that are placed oppositely on the colour wheel. For example, red and green are complementary colours. C omplementary colours are suitable to set out an overwhelming picture. Otherwise they will be too contrasting and bright. Complementary colours can be used for logo but it is a bad idea to be used in texts.  

 








Figure 2.0 : Red and green are at the opposite side,  similarly, blue and orange are complementary colours too.

Figure 2.1: Red and green colour of the plant represents complementary colours.

2.1.2.  Analogous colour

On the other hand, analogous colours are those next to each other, specifically, adjacent to each other on the colour spectrum. Analogous colour can be combined to portray a natural and simple theme. For example, blue and green creates a natural, balanced and pleasant scenery look. 

Figure 3.0 : Green and blue are analogous colours.

Figure 3.1 : the colour of the plant symbolizes analogous colour.

2.1.3.      Triadic colour

Lastly, triadic colours are colours that are located at 120^th degree on the colour spectrum. A balanced triadic colour can be practiced by dominating one colour while the other two colours plays a minor role.

Figure 4.0 : In triadic model, the colours are located evenly on the colour spectrum.

Figure 4.1 : It’s a triadic colour concept with three colours, orange, green and purple.

3.0.  COLOUR SYSTEM

   Colour system are divided into two; additive and subtractive. Generally, both are used in our daily life. For instance, website uses additive colour to express all the colours to the users whereas books applies subtractive colour to generate the front layer. Similarly, additive colours are used by anything that emits light, for example, sun, screen and etc. Meanwhile subtractive colours are used by everything that reflects lights, for instance, mirror).

3.1.Additive

                 Figure 5 : RGB , which stands for Red, Green and Blue makes up addictive colour.

   The combination of varies wavelength of light generate a variation of colours, thus the more light is added, the brighter and lighter the colour turns. The elements of addictive colour are similar to primary colours, which is Red, Green and Blue. This three colours are the most fundamental of all the colours. Also, white represents a merging of colour while black symbolizes the absence of colour. The combination of red green and blue are represented in white in the above figure. (Theory, 2013).

3.2.          Substractive

Figure 6: CMY stands for Cyan, Magenta and Yellow. This three are the elements of subtractive colour.

   Subtractive colour can be divided into three, Cyan, Magenta and Yellow or shortly known as CMY. In subtractive, white represents absence while black symbolizes the merging of different colours. Since subtractive colour reflects light, the wavelength of reflected lights affects the possible colours seen by human.

   However, the existing colours do not help in reflecting the wavelength of lights fully, thus we need an extra colour to reflect the lights. The extra colour is called as “Key” which is a black colour. Subtractive colour includes four colour now, CMYK, which represents cyan, magenta, yellow and key. (Theory, 2013).

4.0.         COMPONENTS OF COLOUR

                                   Figure 7 : The differences in term between hue, saturation and value.

4.1.          Hue

   “What colour is that?” is another way of asking what is hue? Similarly, hue is actually the attributes of colour. For instance, the property of any colour, red, green or yellow defines the term hue. Hues varies depending on the wavelength of light. Hence, hue can be easily identified. Hue have a range from 0-359 degrees. For example, yellow is positioned at 56^th degree in the colour wheel while green is at the 120^th degree.

Examples:

Figure 8.0 : The four striking colour with different hue degree represents hue contrast. 

Figure 8.1: Blue falls under the same category, which is the primary colours, thus they have the same hue. This hue is called as constant hue. 

4.2.          Saturation

The saturation of a color is not constant, but it varies depending on the surroundings and what light the color is seen in.  Saturation explains the intense or the power of a colour relative to the brightness or lightness. For example, a solid colour painted in the bedroom tend to appear differently in the morning and otherwise in the night. Its range is between 0-100%. Hence, saturation can be different although the hue are the same. Saturation is also known as “intensity” and it is better to represent them in terms dull or faded and powerful or natural.

Examples : 

Figure 9.0: This is a ‘saturation constant’ representation as they have the same saturation but different hue. 

Figure 9.1 : This figure is called as ‘saturation contrast’ as they are from the same hue but varies in saturation.

4.3. Brightness/Value

Value or commonly known as brightness explains how vivid and intense a colour is.

Also, in a simple term value is the assessment of the brightness of a colour. Value is expressed in percentage, ranges between 0-100percent. For instance, yellow colour will be black when it is set in 0% brightness but it will be in it will be in the pure yellow colour when the value is set at 100%. The value can be measured by looking at the colour’s greyscale measurement.

Examples :

Figure 10.0 : This colour are expressed as low value and constant range as they have the same brightness level. 

Figure 10.1 : The brightness of grey colour can be changed to black when its percentage is set at 100%.

Figure 10.2 : The colours are set at 100% brightness to express the contrast of value.

4.4.          Tint and Shades

Figure 10.3 : Tint and shade shows how the colour differs from its original colour.

Tint and shade shows how the colour differs from its pure colour. For example, in the above figure, when white is added in the blue, the colour’s intensity decreases. Similarly, when black is added to the blue the saturation of blue increases (Johansson, 2014). Shade is the darker version of blue while tint is the lighter version of blue.

5.0.         CATEGORIES OF COLOUR

5.1.          Warm colour

 

Figure 11 : Warm colour are divided into red, orange and yellow.

   Warm colours are any colour that are intense, realistic and adventurous. Additionally, warm colours are likely to lead in space and could be powerful. Warm colours consist of red, yellow, orange and any variation of these three colours, example includes, fire, volcanoes, sunsets and sunrise and fall leaves. Those colours are basically very dynamic, active, positive and desirous. (Chapman, 2010)

   Generally, red and yellow are primary colours, while orange falling in the middle is a secondary colour. This shows that all the colours are naturally warm colours. They aren’t mixed with any cool colours. The usage of warm colour in designs portrays strength, prosperity, and excitement.

5.2.          Cool colors

        Figure 12 : Cool colours include green, blue and purple.

   Cool colours are those that give a sense of peace and relaxed feeling. Cool colours involve green, blue, purple and the variation of those three colours. The examples are the colour of water, of sky and of night. Generally they tend to be very cooling, appeasing and peaceful.

   Blue is categorized as primary colour while green and purple are secondary colours. Surprisingly, purple is the mixture of blue and red while green is produced from the combination of yellow and blue. Green have some characteristic of yellow and same goes too red, where it have the characteristics of red. Relatively, the use of cool colours in design delivers a feeling of cool, somehow reserved and professionalism. (Chapman, 2010)

5.3.          Neutrals

Figure 13 : Black, White, brown and grey are examples of neutral colours.

   Neutral colours are frequently used as a background colour because they tend to be very natural and less prominent. Generally, they are mixed with darker shade colours. For instance, brighter red accent is used against a black backdrop to create an elegant and stylish look. Also, they can be applied individually with creative designs, for example, white and grey can be a good combination to create something simple, lovely and down-to-earth architecture. They are usually affected by the colours enclosing them. For example, the picture in the figure below shows how the natural black colour is much more affected by the yellow colours. The impressive look of the nature below is balanced by combining natural colour and warm colour. 

Figure 14 : The combination of warm(yellow) and natural(black) colour creates an amazing look.

                                                                       

5.4.          Primary colours

Generally, primary colours are colours that can’t be produced by combining any other colour. Examples of primary colours are red, blue and yellow.

5.5.          Secondary colours

Secondary colours are produced by the combination of two primary colours.

Examples of secondary colours are purple, orange and green. Purple is resulted from the mixture of red and blue, whereas green is produced by mixing yellow and blue. Likewise, orange is the mixture of red and yellow.

5.6.          Tertiary colours

Tertiary colour is the combination of primary colours and its adjacent secondary colour.

The naming system for tertiary colour is by combining the primary and secondary name, the primary name should be placed first to show its role as a dominant one. Yellow-orange, red-purple, blue-green are the few examples of tertiary colours.

Figure 15 : Colours are categorized into primary, secondary and tertiary groups.

6.0.         MEANING OF COLOURS

6.1.    Red                             

Figure 16.0 : Red as a primary colour.

  Red symbolizes hot. Consequently, red is linked with fire, terrorism and battle. Alternatively, red also represent love, affection and joy. Although, red can be linked with anger and violence, it also related to importance. For instance, awards ceremony and celebrity show uses red carpet. (Chapman, 2010). Besides that, the meaning of red differs depending on the specific country. For example, in China, red symbolizes good fortune, success, growth and joy. Unfortunately, in South Africa, red indicates mourning.

   Apart from that, red is a strong accent colour in design. Red could have a striking and overpowering effect if it is applied too much especially in its natural form. Red colour will be appropriate when strength and passion are to be illustrated. Additionally, red could be very flexible and functional depending on its contrast, as brighter red are powerful, dynamic and lively while darker red are more energetic, classic and fancy.

Examples :

Figure 16.1: The prominent  brighter red accents against the black and white images, hence giving a dynamic, luxurious and elegant feeling to the use.

6.2.    Orange     

Figure 17.0: Orange as a secondary colour.

   Orange offers vibration and energy.it is often related to earth and autumn when it is in muted form. Orange symbolize alteration and motion due to its correlation with changing seasons. Orange can also be linked to a fruit which represented by the name itself. Also, orange colour can be signified to health, spirit and stamina.

   Orange attracts attention and concentration in designs, though it is not as strong as red. Light orange is accepted to be more companionable, affectionate, tempting and welcoming.

        Examples :

Figure 17.1: Dark orange against the lime green in this site creates a balanced and vibrating feeling.

6.3.  Yellow                                  

Figure 18.0: Yellow act as a primary colour.

   Yellow is usually assumed the most shining and activating among the warm colours.

It is related to peace-of-mind, delight and sunshine. Also, yellow is often considered as aspiration, because some countries tend to fly yellow ribbons and flags when their loved family members are at war. Alternatively, yellow can also be linked to dishonesty, cowardice, and hazard, although it is not as powerful as red. The meaning of yellow varies from countries. In Malaysia, yellow is a symbol of majesty, while in Japan yellow symbolizes determination. In Egypt, yellow is a symbol for mourning whereas in India it is a representative for merchants.

  In the aspect of design, bright yellow contributes to joy, cheery and lively emotion.

Generally, softer yellows are used for babies and young children besides pink and blue as soft yellow seem to be merry and rosy. A sense of peace, harmonious, and pleasure can be obtained in light yellows. Besides that, dark yellows and gold-hued yellows contributes to an ancient look and they can be used in layout which requires permanence.

Examples : 

Figure 18.1: The mixture of the ancient yellow backdrop with the bright sunflower creates a delightful and traditional feeling to the site.

6.4.         Green

 

Figure 19.0 : Green as a secondary colour.

   Green is a reasonable and practical colour as it is often assumed as a down-to earth colour. Green also symbolizes new onset and development besides signifying regeneration and wealth. On the other hand, green has a negative side, where it personify jealousy and absence of knowledge. In a nutshell, green almost has the same characteristics as blue and it also includes some of the yellow’s strength.

   Relatively, in design, green could have a balanced and harmony implication. Green is suitable for layout that is correlated to prosperity, recurrence, security and personality. Brighter green has an activating and lively effect, whereas olive greens tend to express the nature of the world. Meanwhile, dark green are the most balanced and signify abundance.

                 Examples :

                  Figure 19.1: Olive-toned green colour is applied in this site to deliver a natural and environment   based look that is equivalent for its content.

6.5. Blue

                                Figure 20.0 : Blue as a primary colour.

   Blue is used to personify patience and duty. Light blues are stimulating and neighbourly whereas dark blues symbolizes unity, divine and holy implication in some culture and tradition.

   Types of shade and hue affects the definition of blue. This is because a definite shade of blue contributes a massive force on the patter and composition of a design. In design, light blues create a flexible and idealistic situation. Bright blue are activating and rejuvenating. Aside that, dark blue are appropriate for corporate sides which needs courage and accuracy.

Examples :

Figure 20.1: The luminous blue used in this site contributes a casual and harmonious  feeling.

6.6.          Purple

Figure 21.0: Purple act as a secondary colour.

Purple normally symbolizes supremacy. It is a result from the mixture of red and blue, besides sharing the characteristics of both. Purple is often correlated with inspiration and fantasy. Purple signify sadness for widows in Thailand.

Specifically, dark purples are linked with revenue ad authority, while lighter purple are assumed as charming and passionate. On the other hand, dark purples illustrates indulgence and prosperity in design. Meanwhile, lighter purple are comfy and are elegant and pleasant.

                   Examples :

                Figure 21.1: The dark purple shade layer is applied to arouse a supreme legacy, which creates a suitable backdrop for the ‘Asprey’ luxury goods brand.

6.7.          Black 

Figure 22.0 : Black as a neutral colour.

   Black is the powerful neutral colour compared to white and grey. Relatively, lack is linked with evil, death, mystery, wicked and ugly on the negative term whereas it is related to potential, power, purity and formality on the positive side. For instance, in horror movie, a suspense scene is often directed with a black background to create an anxiety feeling. Also, black symbolizes mourning in many Western countries. For example, Islam’s traditional colour for mourning is black.

As for design, black is frequently applied in typography as it is more revealing and neutral compared to other colours. Black helps to channel a sensibility of refinement, thriller, and classic in a design. Black could be either stylish or conservative, classical or individualistic, relying upon the colour it is matched with.

Examples :

Figure 22.1 : The combination of black accents, sparkling colours, such as orange, yellow, green and an extreme dark brown backdrop creates an uptight atmosphere to the overall design.

6.8.         White 

Figure 23.0: White as a neutral colour.

  White is contemporary with black in the colour spectrum. While is similar with black, in a term, it can be matched with any colour. White is commonly related to pureness, sanitation and morality. In West, white is ordinarily used by bride on their wedding day. White colour has also became a formal attire for certain professionals, like doctor, nurse and dentist. This is because such professions requires cleanliness and pure emotion. Also, white is frequently described as goodness and that’s the reason angels tend to be portrayed in white.

   In the aspect of design, white is categorized as a neutral colour for its special appearance that allows other colour in the design to have a higher saturation and voice. Besides that, white also assist in transmitting neatness and modesty. In designs, white conveys either winter or summer, leaning on the other design aims and colours encompassing it.

                  Examples :

 Figure 23.1 : Combination of white and grey expresses a delicate and elegant emotion to this  design.

6.9.          Grey 

Figure 24.0 : Grey colour as a neutral colour

   Greys are categorized as a neutral colour, it is commonly considered on the frosty end of the colour spectrum. Grey often represent temperamental and despondent emotion. Grey can also be a refined colour besides being a more established and traditional colour.  Light grey is more likely to be paired with white whereas dark grey is mostly matched with black to create a good contrast although grey may sometimes be mixed with blue or brown. Generally, greys are applied in associate composition which incorporates formality and rectitude.

Examples :

Figure 24.1: Light grey typography against a dark grey accent creates a modern and elegant look.

6.10.     Brown

Figure 25.0: Brown as a neutral colour.

                      Basically, brown is a natural colour. Brown symbolizes trustworthiness and honesty, though the colour can be very dull at times. Also, brown gives a warm feeling and it is usually used in wood textures. Dark brown can be a good typography for white backdrop in designs while light brown is selected to be the background colour for other dark colour typography.

                  Examples :

Figure 25.1: The tertiary colour, orange-brownish of this site gives a reliability and classic look.

7.0.         CONCLUSION

   In the nutshell, the background research on colours have helped the author to gain some valuable knowledge and experience. The author has decided to choose green, white, light yellow, black, gold and dark brown shade colours for the next Milo re-packaging assignment. Green is a secondary colour while light yellow is a primary colour. Meanwhile, black and white is a natural colour.

   Green is the core colour of Milo, thus it can’t be changed to any other colour, or else this might confuse the consumers. I personally think that the core idea of Milo has been set to green as they symbolizes regeneration, growth, prosperity and signify abundance. Similarly, Milo drinks offer nourishment, refreshment, energy and provide good metabolism. The author has decided to remain the typography “MILO”’s colour to be against the white backdrop. Both white and brown are neutral colours. Therefore they creates vibrant look when green is made as the background colour. The white colour symbolizes the pure and natural colour of milk while the brown colour signify the colour of chocolate malt. After discussing with the other authors, the author has included light yellow and black in the re-packaging design. Black comes with a small image, which is to be blurred while the yellow has a low brightness. This is to ensure the green to be the dominant one. Analogous colours are applied here, when the green plays a dominant role. Green and yellow are adjacent to each other in the colour spectrum, and they are suitable to be set against a white or black accent.

   Additionally, the author has decided to make few changes to the dark brown shades in other area by applying tint and shades. The combination of white and dark brown representing the tint is going to increase the value of brown to produce gold colour. The gold colour symbolizes the colour of mature barley. Besides that, cool colour is much likely to be preferred by the author as it gives a cool and refreshing feeling, likewise Milo’s objective.

   The appropriate colours chosen by the author for assignment 2 will produce an energetic and powerful look for the MILO to represent the theme of MILO-‘Your Day with Milo’.

8.0.         REFERENCES

1)      Johansson, D.

The Physics of Color - the Color Wheel and Color Spectrum. In-text: (Johansson, 2014)

Bibliography: Johansson, D. 2014. The Physics of Color - the Color Wheel and Color Spectrum. [online] Available at: http://www.colorsontheweb.com/colorinformation.asp  [Accessed: 25 Feb 2014].

2)      Tigercolor.com.

Basic color schemes: Color Theory Introduction. In-text: (Tigercolor.com, 2014)

Bibliography: Tigercolor.com. 2014. Basic color schemes: Color Theory Introduction. [online] Available at: http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm  [Accessed: 25 Feb 2014].

3)      Theory, H.

How to master colour theory | Graphic design | Creative Bloq. In-text: (Theory, 2013)

Bibliography: Theory, H. 2013. How to master colour theory | Graphic design | Creative Bloq. [online] Available at: http://www.creativebloq.com/colour/colour-theory-11121290  [Accessed: 26 Feb 2014].

4)      Chapman, C.

Color Theory for Designers, Part 1: The Meaning of Color | Smashing Magazine. In-text: (Chapman, 2010)

Bibliography: Chapman, C. 2010. Color Theory for Designers, Part 1: The Meaning of Color | Smashing Magazine. [online] Available at: http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/  [Accessed: 26 Feb 2014

5)      Johansson, D.

Color Terms - Hue, Value, Tint, Shade, Saturation - Colors on the Web. In-text: (Johansson, 2014)

Bibliography: Johansson, D. 2014. Color Terms - Hue, Value, Tint, Shade, Saturation - Colors on the Web. [online] Available at: http://www.colorsontheweb.com/colorterms.asp  [Accessed: 26 Feb 2014].

6)      Colorcube.com.

Glossary of Color Terms. In-text: (Colorcube.com, 2014)

Bibliography: Colorcube.com. 2014. Glossary of Color Terms. [online] Available at: http://www.colorcube.com/articles/theory/glossary.htm  [Accessed: 26 Feb 2014].