Understanding Color – Youtube video

~I only summarized what was mentioned in the video and do not own anything here~

~All images here are screenshots of the video~



  • Don’t overdo it – lots of bright saturated color looks incredibly fake and leave no time for the eye to rest, hence irritating when view for sometime.



  • Guide viewers by using bright saturated color sparingly  a line of bright red along the back guide the direction of camels



  • Use it to tell a story – animated flim used alot of bright saturated color for a sense of animation



  • Affects mood – brightness and saturation  = happy, dull and desaturated = sadness



  • Draws attention to something – highly saturated point is used for viewer to anchor




Color Harmony


  • only one colour
  • Best for single subject
  • atmospheric




  • easy on the eye
  • peaceful, comfortable mood
  • seen alot in nature




  • best for cartoon/ surreal
  • hard to pull off




  • very popular
  • naturally pleasing on eye
  • use one color predominantly – the weaker colour



Split complementary

  • More creative freedom
  • Feels lively/ joyous



Tetratic (Double Complementary)

  • best used for foreground/background – a set at foreground/ a set at background
  • hard to pull off
  • never 25% for each



Color Research

Black – HEX:#000000 RGB:0, 0, 0 CMYK 0, 0, 0, 100

Sophistication, glamour, security, emotional safety, efficiency, substance

Oppression, coldness, menace, heaviness.


White –  HEX:#FFFFFF RGB: 255, 255, 255 CMYK 0, 0, 0, 0

Hygiene, sterility, clarity, purity, cleanness, simplicity, sophistication, efficiency

Sterility, coldness, barriers, unfriendliness, elitism


Red – HEX:#FF0000 RGB: 255, 0, 0 CMYK: 0, 100 , 100, 0

Physical courage, strength, warmth, energy, basic survival

Defiance, aggression, visual impact, strain


Blue – HEX:#0000FF RGB: 0, 0, 225 CMYK 100, 100, 0, 0

Intelligence, communication, trust, efficiency, serenity, duty

Coldness, aloofness, lack of emotion, unfriendliness


Green – HEX:#00FF00 RGB:0, 255, 0 CMYK: 100, 0, 100, 0

Harmony, balance, refreshment, universal love, rest, restoration, reassurance, environmental awareness

Boredom, stagnation, blandness, enervation.


Yellow – HEX:#FFFF00 RGB:255, 255, 0 CMYK: 0, 0, 100, 0

Optimism, confidence, self-esteem, extraversion, emotional strength, friendliness

Irrationality, fear, emotional fragility, depression, anxiety, suicide


Cyan – HEX:#00FFFF RGB 0, 255, 255 CMYK 100, 0, 0, 0

nature and the natural world, tranquility, good luck, health, and jealousy.fertility

Boredom, stagnation, blandness, enervation.


Magenta – HEX:#FF00FF RGB:255, 0, 255 CMYK:0, 100, 0, 0

harmony and emotional balance, passion, transformation, uplifting, cheerfulness, happiness, contentment

depression and despair, arrogance and bossiness, anxious and intolerant


Pink – HEX:#FF0066 RGB:255, 0, 102 CMYK: 0, 100, 60, 0

Physical tranquillity, nurture, warmth, femininity, love, sexuality

Inhibition, emotional claustrophobia, emasculation, physical weakness.


Orange – HEX:#FF9900 RGB:255, 153, 0 CMYK:0, 40, 100, 0 

Physical comfort, food, warmth, security, sensuality, passion, abundance, fun
Deprivation, frustration, frivolity, immaturity

Gray – HEX:#808080 RGB:128, 128, 128 CMYK: 52, 43, 43, 8

Psychological neutrality

Lack of confidence, dampness, depression, hibernation, lack of energy.


Teal –  HEX:#008080 RGB:0, 128, 128 CMYK: 86, 31, 49, 8

emotional balance and stability, alleviating feelings of loneliness, cool, calm and collected

secrecy and confusion, lacking communication skills, being unreliable and deceptive


Lime – HEX:#BFFF00 RGB:191, 255, 0 CMYK: 30, 0, 100, 0

Harmony, balance, refreshment, universal love, rest, restoration, reassurance, environmental awareness

Boredom, stagnation, blandness, enervation.


Maroon – HEX:#800000 RGB:128, 0, 0 CMYK: 29, 100, 100, 38

Seriousness, warmth, Nature, earthiness, reliability, support.

Lack of humour, heaviness, lack of sophistication.


Violet – HEX:#8000FF RGB:127, 15, 255, CMYK: 50, 94, 0, 0

Spiritual awareness, containment, vision, luxury, authenticity, truth, quality

Introversion, decadence, suppression, inferiority

Principles of design


When all elements are in agreement, a design is considered unified. No individual part is viewed as more important than the whole design.

  • Perspective: sense of distance between elements.
  • Similarity: ability to seem repeatable with other elements.
  • Continuation: the sense of having a line or pattern extend.
  • Repetition: elements being copied or mimicked numerous times.
  • Rhythm: is achieved when recurring position, size, color, and use of a graphic element has a focal point interruption.
  • Altering the basic theme achieves unity and helps keep interest.unityd99797ed2b52c3cee5e891d6cc17e2ce



It is a state of equalized tension and equilibrium, which may not always be calm.

  • Symmetry
  • Asymmetrical balance produces an informal balance that is attention attracting and dynamic.
  • Radial balance is arranged around a central element. The elements placed in a radial balance seem to ‘radiate’ out from a central point in a circular fashion.
  • Overall is a mosaic form of balance which normally arises from too many elements being put on a page. Due to the lack of hierarchy and contrast, this form of balance can look noisy but sometimes quiet.BALANCESymmetrical example in real life:
  • cap1

The left and right of the architecture is mirrored with the central plane which made the building symmetrical.

  • Asymmetrical example in art:
  • g hockney acrylic



contains elements that lead the reader through each element in order of its significance.

Images should be expressed starting from most important to the least important.

Example of hierarchy in art:


The Proportion and placing enthroned Madonna and Child make it the most important subject, followed by those wearing red, and lastly to those in the background.

Example of hierarchy in typography:vh_3

The most importation information to be read first with the biggest font, and at the top,

Secondly most in sequence information second and medium font and lastly the information that should be read last having the smallest font and placing at the bottom.




relative size of elements against each other can attract attention to a focal point.

When elements are designed larger than life, scale is being used to show drama.


Example of scale in photography:


The scale of the finger is way larger than the figurine, its is automatically processed by the brain that it is a small figurine instead of it is a giant hand.

Examples of Proportion in Sculpture:


The proportion of the arm is way larger than it should be for that small head, it attract attention due to the abnormality of the disproportion.




created by contrasting size, positioning, color, style, or shape.

The focal point should dominate the design with scale and contrast without sacrificing the unity of the whole.

Examples of dominance/emphasis in Photography:


A single bright blue raspberry stands out from a crowd of red raspberry, it draws attention to the blue raspberry making the other red raspberry to become the background.



Similarity and contrast

Planning a consistent and similar design is an important aspect of a designer’s work to make their focal point visible

Too much similarity is boring but without similarity important elements will not exist and an image without contrast is uneventful so the key is to find the balance between similarity and contrast.


Example of Similarity in graphic design:


The pattern is repeated, however the colour of a single stickman is different with other to show contrast.

Example of Contrast in Painting:


The flower is being emphasis by having a contrast with the black background which makes it stand out.