Color Theory and Design

Principle
Chapter-2

1 Information Communication Technology

What is color theory?
• Color theory is a set of guidelines used to create visually appealing color
combinations.
• Why is it important?
• Helps in creating a harmonious design that enhances user experience.

2 Information Communication Technology

Color Models
• Color models allow creation of various colors by combining basic colors.
• Colors actually are the light waves that reaches the eyes of human.
• Therefore, they work by either adding or subtracting the light to produce
various kind of colors.
• There are 2 basic color models:
• RGB Model
• CMYK Model

3 Information Communication Technology

RGB Model
• RGB stands for Red, Green, and Blue.
• It works by adding and combining the three main color to
form various colors.
• Each color have values from 0-255; 0 meaning there is
absence of this color and 255 meaning the color is at its
maximum intensity.
• RGB is an additive color model.
• The addictive color model works by adding colored light on
to a place where there is no light at all (black surface).

4 Information Communication Technology

CMYK Model
• CMYK stands for Cyan, Magenta, Yellow, and Key (Black).
• Unlike RGB CMYK works by subtracting colors from the
white light.
• Values of CMYK are in %; meaning if the values are at
100%, all the colors are subtracted and color is black.
• If all the values are 0%, no light is subtracted and color is
white.
• CMYK is a subtractive model.
• Subtractive color model works by removing color from
white light to form different kind of colors.

5 Information Communication Technology

Color Wheel
• The color wheel is a visual representation of the color spectrum and how
different colors mix to form new colors.
• Primary colors of the color wheels are red, blue and yellow.
• Secondary colors are combination of primary colors.
• Tertiary colors are combination of primary and secondary colors.
• The color wheel merely illustrates the various ways in which colors can be
created; it is not a color model.

6 Information Communication Technology

Color Wheel

7 Information Communication Technology

Warm and Cool Colors
• Colors can be categorized in 2 types; warm and cool.
• They can be identified by drawing an imaginary line from yellow and yellow-
green dividing color wheel in half.
• Warm colors are the reds, yellows and oranges.
• Warm colors are used when we want to portray something that is action
packed and full of energy. E.g. sports, exercising and eating.
• Cool colors are the blues, greens and violet.
• Cool colors are used when we want to portray peacefulness and calmness. E.g.
studying, gardening or reading.

8 Information Communication Technology

Cool and Warm colors

9 Information Communication Technology

Color Schemes
• Color schemes are the reason for studying color wheels.
• It illustrates how to use the colors on color wheel to make the designs and
colors look nice.

10 Information Communication Technology

Complementary colors
• Colors that are on the opposite sides of the color wheel.
• Even though they have very different natures, they work well together.
• Using them together makes the desired message to be given stand out.
• E.g. blue and orange.

11 Information Communication Technology

Analogous Colors
• Analogous Colors are the colors that are next to one another in the color
wheel.
• Being the similar colors, they really work well with one another and are usually
fool-proof.

12 Information Communication Technology

Triadic Colors
• Triadic Colors are the three colors that are evenly spaced on the color wheel.
• The combination is really hard to pull off and find the balance in colors but it
gives the design a very exotic look.

13 Information Communication Technology

Design Principles
• Design principles are guidelines that help to create visually appealing and
effective designs.
• They are used to organize and arrange elements in a way that enhances user
experience.
• There are 7 design principles:
• Emphasis
• Balance
• Contrast
• Pattern
• Proportion
• Movement
• White Space

14 Information Communication Technology

Emphasis
• Emphasis is the part of the design that draws attention of the user.
• It highlights the most important part.
• You need to have an idea of what part of the design is important and make
sure that part is popping out in design.
• It can be achieved by using color, size or contrast to draw user’s attention.

15 Information Communication Technology

Balance
• Having balance means having a symmetric designs.
• The color and the elements should not feel heavy on one side.

16 Information Communication Technology

Contrast
• Similar to emphasis but it makes foreground elements of the design contrast
with background to make the elements work more harmoniously.
• It also allows the user to see the difference between the elements in the
design.

17 Information Communication Technology

Pattern
• Pattern is the repetition of visual elements, such as shapes or colors, in a
design.
• Human eyes are naturally drawn to patterns and repetitions even though
having uniform style is boring.
• It is good to have consistent colors and font styles in the design.

18 Information Communication Technology

Proportion
• Proportion refers to how weight(size) is distributed across the whole design.
• It ensures that there is no elements that dominates or feel too small in
comparison to others.

19 Information Communication Technology

Movement
• Movement guides the viewer’s eye through the design.
• It’s the path that leads viewers from one element to another
• The eyes of the viewer should not be stuck on one part of the design.
• Usually, the eye movement should be from the most important part of the
design, the highlight, to the least important.
• F and Z movement patterns are common to implement this principle.

20 Information Communication Technology

Movement Patterns
F Pattern Z Pattern

21 Information Communication Technology

White Space
• White space (or negative space) is the empty area around elements in a
design.
• It is important as it prevents the design from looking crowded.
• The design should have proper white space between the elements of the
design.
• This will help with the emphasis and the design also.

22 Information Communication Technology

Any Questions?

23 Information Communication Technology