Colours and their meanings

Color meanings - 

Every one of us have his favorite colour and colours carry lots of meanings with them. Yes , colours do effects our lives for both youngsters and adults. 

Example - 

If you had to give an option for your 5-Year old daughter to choose between a pink bag vs a blue one she would probably go for the pink version as it is more 'girlish'

As for us adults , if we were to buy a car we would be very careful and think what suits us most and what colour we imagine us driving, Why not Pink? "Too 'girlish'" . Why not Yellow ? 'It's Ugly!' . So yes, colours do have control over such things in our lives!

Here is an example of companies and businesses that use colours at their advantage - 

Lister below are few meanings of the colours - 

Red

       - Romantic

       - Commanding

       - Hot

       - Alert 

       - Fun

Orange

             - Burning

             - Cozy

             - helpful

             - active

             - inspiring

Yellow

             - Curious 

             - Coward

             - ill

             - bright

Green 

           - Lucky

           - Patient

           - Relaxed

           - balanced 

Blue 

         - Technical

         - free

         - protective

         - cold

         - peaceful

Violet 

           - Fantastic

           - Royal

           - Luxurious

           - Intelligent

Contrast

Contrast  - 

When choosing colours one should be careful and think twice on what colours to choose and make sure that it fits it's purpose. If you have for example text and want it to be visible without any problems to be read , one should apply high contrast such as Black and White. If you choose bad contrast for your text , this will eventually hurt the readers eyes and make tiring them!

Bad Contrast

Best choice of contrast to use with text. (Black and white)

Websites such as 'Snook.ca' will give you an example on how the text will be displayed with the colours that one choose so to get an idea on how these will eventually look

Black background with White text

High Contrast - 

High contrast colours are those that on the colour wheel are complimentary to each other such as -

Purple and yellow
Green and Red
Orange and Blue


The image below is an example to show how colours should and should not be applied.

Pixel Values

Pixel Values - 

The pixel value is a stored value that records the amount of brightness that the pixel is emitting and what colour it should be. If one is working with 8 bit , the amount of colours can be that of 255. If the pixel is set at 0 it will display as black while if it is set to 255 it will display as white.

Every image on the screen is made up of pixels and when all this are set to their correct pixel values the image will form and displayed as it should.

http://homepages.inf.ed.ac.uk/rbf/HIPR2/value.htm

ICC Profiles

ICC Profiles - 

When photographers take photo's and sell them to their client's , they will want to make sure that the photo is displayed the same as they view it on their system.

ICC stands for International colour consortium. The company that started all this.

A simple example of what ICC is capable off -

When you rent a DVD, on either way of the box there are stated the name of the movie , actors and a summary of the film.

ICC Profiles works very similar to this explanation , they will know how an image is going to look on the screen they are viewed and will tell the user what the darkest and lightest tone and what colours the file is capable off. The amount of range of colours and also the distribution and relationship that there is in each of the tones and colours.


There are two types of ICC profiles , Input and outpute profiles.

An example of how it works in the image below -

https://webcube-general.s3.amazonaws.com/eizo/media/contentassets/2014/10/27/01_gra.gif
http://www.color.org/index.xalter
http://www.digital-photography-workflow-basics.com/color-management-overview.html
http://www.digital-photography-workflow-basics.com/icc-profile.html

Hue , Saturation

Hues - 

Hues are basically the Primary and secondary colours (Rainbow colours)that one have on the colour wheel , such as Red, Green , blue etc..  Secondary hues are the colours that we create by mixing the primary hues.

Hues are measured in degrees , from 0 to 359 degrees.

Saturation - 

If an image has low saturation it will be as if it is washed - out  whilst on the other hand , if the image has high saturation the colours will be more vibrant and pure.


An example in the image below shows the last image with washed out colours , which means low saturation settings are set (-50)whilst the middle image has higher saturation settings (+50) and is making the colours more clearer and vibrant. The first image is the original image.

Colour depth

Colour depth - 

Colour depth is referring to the number of bits that a pixel represents in a monitor to display a colour. The higher the bits/pixel the better the image will be displayed and this will also increase the variety of colours.

The early monitors that were invented only supported 1-bit colours and these where in black and white(Monochrome). Example  - The Apple Macintosh and Atari ST.

Apple Macintosh

Our home monitors nowadays supports 32 bit colour which can vary between 16.7million colours. The higher the bits the more memory one requires tho every computer nowadays comes with a video card that supports high bit colours.

24 bit and 32 bit can support up to 16,777,215. The 32bit has an alpha channel that makes it better since it can support up to 4,294,967,296. The alpha channel will help the colours create more gradients,transparencies and shadows .


One can clearly see that the third box has more quality than the others as the pixels are producing more colours than the others.

Comparison 

Raster VS Vector

Raster VS Vector -

Raster images are based on PIXELS. A pixel is one of many that is used to create an image.

An example of pixels is the image below.
3 pixels by 6 pixels.  A pixel is the smallest thing that one can expect in a display monitor.

PPI stands for pixels per inch and one can calculate the pixels by counting the pixels in each inch and this will represent the resolution.

Raster images are also known as Bitmap images.

Since it is made of pixels , once zoomed one will be decreasing the image quality and will reveal the pixels and make them visible.


A perfect example of this is the image below -

A perfect image when in it's proper resolution, but when zoomed the image quality is ruined.












Vector - 
Vector images are not based on pixels!

Vector images are geometrical shapes that are created by a mathematical equation. Vector images can be stretched without loosing the image quality. A good example of this is for example when someone is writing in Microsoft word at size 12 and one increase it to size 100, the letters are bigger and will still remain crystal clear. This is because the fonts are vector type and when they are increased in size a mathematical equation is worked out in order to maintain the same quality(good quality) of the image.


What program to use ?

One should also consider the programs to use when designing an image/logo.  If you are going to work with vector images , Illustrator must be used whilst Photoshop is used to create raster images. One can work with illustrator and then import the work to Photoshop to add extra texture to the image/logo.

Vector VS Bitmap

During class we were given a task to recreate a character from space invaders with sticky notes. Space invaders characters are created from pixels(Raster) 1 pixel represents one sticky note that we had to stick on the wall. First we counted the pixels to know how many sticky notes we will be using and ended with the final result - 

RGB and CMYK

RGB and CMYK -


RGB stands for -

RED,
GREEN and
Blue.

This is the standard format for all black monitors . web images , projections and most digital photography.

 In order to achieve the black colour all of the 3 colours should be set to 0(no light emitting) settings so they wont emit any lightning at all(black monitor).

In order to obtain a white image one should add more light to them, and in order to do this one should set the three colours settings to 255.

The total colours that one can obtain with RGB is 16,777,216 !



CMYK -

CMYK stands for -

        Cyan
        Magenta
       Yellow and
Black.

CMYK is used for printing and since printer paper is white , one should add more ink to obtain the black colour. Percentage is used to set the settings for CMYK. To print in white , obviously all settings must be set at 0% and this will use no ink at all.

To obtain the black colour there is more than one option. One can simply set the Cyan,Magenta and yellow to 0 % and the black to 100% and this will use only the black ink. This is mostly used to print crystal clear text. The other option is to use all other three colours - Cyan,Magenta and yellow and set them at 100% to obtain the black colour from these three , while the black is set to 0%. In this case the black colour is 'FAKE' as it is produced from the three colours. This is not suggested tho because it will use a lot of ink and will take time for the ink to dry.

CMYK can only produce around 60% to 70% of the colours that one can make in RGB.


When working with RGB and one is about to print one should always convert it to CMYK so to confirm the colours for printing as these will defer from what one is seeing on screen to on paper.


The image below is an example of an image designed in RGB and converted to CMYK and another design that is designed in CMYK.

Pantones

Pantones -

Pantone is known around the world as the standard colour language for designers and for large industries.  Lawrenece Herbert was the founder of the PANTONE MATCHING SYSTEM 1962 that solved the problems related to colour matching. The company's main goal at that time was to create colour guides at the highest detail as possible.

Example - Having a red colour in detailed print on a flip book with a vast range from light red to dark red and all of them are coded.

The Pantone colour chart.



Businesses like SIGMA paints uses Pantones to match their paint colours.

Sigma Paint Pantones.

The image below is an example of the format that Pantone use to identify the colours.
The settings to obtain the colour for both RGB and CMYK are shown and the colour code for web designers to use for their websites. The C after the number stands for Coated paper(GLOSS). U stands for Uncoated paper and M stands for Matte

Screen VS Print

Screen vs Print - 

Before the designer starts designing what the client requested ,he/she must check how it will be used when the final product is ready. Is the product going to be Displayed on screen,  advert on a magazine, Billboard , type of audience etc.. Designing for print is totally different from designing a graphic design to be displayed on the web.

Print designs can be used in -

Magazines
Posters
Product Packaging (Pizza boxes, Drinking cans, Snack packets, Shopping bags etc..)
Business Cards
Logos (Brands, letters)
Books

Magazine Design

Business Cards

Screen designs -

Animations
In game posters
HTML websites
Game Animation

Web Design

Bioshock In-Game poster

The main difference between these two is that the final version of the product will end up physical for the print version whilst on the other hand it will be only a digital version that can be viewed on various types of displays.


Web designs are usually interactive whilst print designs are just a piece of paper.

Since print is not entertaining as screen designs , one should put more effort to make the viewer enjoy better the design. When working with print designs sometimes it get's complex due to lack of work area. Example - One page advert. The designer should put extra effort to make the viewer stay longer on that page with minimum work area so to make sure that the message on the advert get's delivered.


On the other hand , web designs are more open and have a great work area for one to play with. The more creative the designs are the better it will be as you will be getting the audience attention and attracting them to browse deeply the website.

  - - - Having the website user friendly , adding animation , sound and the most important thing , interactivity will increase the audience attention and the website liking's.


Print - 

When dealing with print formats one can work with a small size that of a business card or as large as a billboard.
An advantage of print designs is that the designer will know where his work is going to be displayed from the very beginning and that it will look the same to whoever sees it.
Print designs are generally measured in meter , millimeters or Inches.


Screen - 

When creating a design to be displayed on screen the designer must make sure that it will look good on all types of monitors and mobile system.
Screen designs can vary a lot in their colour due to every screen having different colour settings and resolution .
A website with a constant design change is neat to have but it is much more difficult for users to get used to every time the design change. It is suggested that one should have only one navigation design without changing it in order to keep the count ratio high.

Color Harmonies

Colour Harmonies.

Complimentary Colours - 

The complementary colours are those opposite to the chosen colour. Complimentary colours are suggested to be used as the highlight colour, also both colours create the strongest contrast between them.

Complimentary colours are not suggested to be used for text.

Example - Red and Green

Analogous - 

Analogous colors are normally found in nature and these colours are quite relaxing and eye pleasing. When using Analogous colour scheme one should have the proper amount of contrast. Analogous colours are the colours that are next to each other on the colour wheel.

Example - Lime , Green ,  aquamarine

Triad - 

Triadic colours are equally spaced on the colour wheel and one should pick the colours carefully. Let one colour command and the others to accent,

Example  - Violet (3 Colours space), Orange( 3 Colours Space) , Green (3 Colours Space)

Equally spaced in order to have Triadic colours.

Split-Complementary - 

Split Complementary is perfect for beginners as it is difficult to mess up. This colour scheme is almost the same as the Complementary but instead of choosing the opposite colour one should choose the adjecent ones. This differs from Complementary scheme as the colours have less tension to them.

Example - 

Green 

(Complementary colour is RED)

Adjacent colours - 

Red-Orange and Red Violet

Rectangle (tetradic)  - 

The rectangle uses it's four points to determine the colours. The two points that are next to each are the pair colours. One should take good care to the balance related to warm and cool colours in their designs.

Example - 

Red complementary pair with Orange.

Green complementary pair with Green.

Square - 

This uses the same theory as the Rectangle with it's four points. Good attention to the to the balance related to warm and cool colours should also be taken care of.

Colour Wheel

Colour Wheel - 


A colour wheel is the most convenient way to help you understand/choose the colours that one is looking for!
The colour wheel is designed to help the user to see the mixture of colours on how to obtain the secondary and tertiary colours.

Colours make a great impact in our life's and a simple colour can explain and reveal bunch of stuff about us. A simple red can be associated with lots of things such as Political parties, Religion etc..

Primary colours - 

The primary colours are RED, Yellow and Blue. These colors cannot be created by any form of mixture. All other colors are created from these 3 primary colors by mixing the proper colors together.

Secondary colours - 

Secondary colours are created by mixing the primary colours together. In order to obtain the orange colour one should mix the Red and Yellow together. To obtain Green colour - Yellow and Blue and Blue and Red to obtain Violet colour.

Tertiary colors - 

Tertiary colours are created by mixing the primary colour with the secondary. 

Red and Orange - Vermillion.

Orange and Yellow - Amber.

Yellow and Green - Chartreuse.

Green and Blue - Aquamarine.

Blue and Violet - Indigo.

Violet and Red- Violet red.

Tints and Shades

In order to add tint to a colour , one should apply white colour till it reaches the correct tint requirements.

Shades is vice versa that of Tint. One should apply black(Dark value) colour to the colour chosen.

White and black are not actually colours. 

 Cool - 

Cool colours are cool because they are related to nature, such as the sky and water.

Cool colours are used in our homes to paint small rooms in order to make them look more spacious as cool colours give the impression of a bigger room. 

 Warm -   

Warm colours on the other hand gives the impression of hot summer days. Warm colours intend to make things look closer than normal and people paint their rooms in warm colours to make them feel cozier.