COLORS AND

DESIGN IN
V I S UA L
C O M M U N I C AT I O N
Module- 3
FYBAMMC- Visual theories
Syllabus to cover
1. Color theory
2. Psychological implications of color
3. Colors and visual pleasure

4. Elements of Design
 What is color theory?
Colour theory is the collection of rules and guidelines which designers use to communicate with
users through appealing colour schemes in visual interfaces. To pick the best colours every time,
designers use a colour wheel and refer to extensive collected knowledge about human optical ability,
psychology, culture and more.
Colour is in the Beholders’ Eyes
Sir Isaac Newton established colour theory when he invented the colour wheel in 1666. Newton
understood colours as human perceptions—not absolute qualities—of wavelengths of light. By
systematically categorizing colours, he defined three groups:
1.Primary (red, blue, yellow)
2.Secondary (mixes of primary colours)
3.Tertiary (or intermediate – mixes of primary and secondary colours)
Following Newton’s findings, the study of colour advanced to cover the properties of colour
in its two forms—i.e., print/paint and screen/light—and in a variety of fields, from art to
astronomy. A colour’s properties are:
•Hue – How it appears (e.g., “is green”).
•Chroma – How pure it is: i.e., if it has shades (black added), tints (white added) or tones
(grey added).
•Lighting – How pale or saturated it appears.

In user experience UX design you need a firm grasp of colour theory to craft harmonious,
meaningful designs for your users.
Newton’s Colour Wheel.
 Use a Colour Scheme and Colour Temperature for
Design Harmony

In screen design, designers use the additive colour model, where

red, green and blue are the primary colours.
Just as you need to strategically place images and other elements
in visual design, your colour choices likewise should optimize your
users’ experience in attractive interfaces that have high usability.
When starting your design process, you can consider using any of
these main colour schemes:
 Color schemes
•Monochromatic – Take one hue and create other elements from different shades
and tints of it.
•Analogous – Use three colours located beside one another on the colour wheel
(e.g., orange, yellow-orange and yellow to show sunlight). A variant is to mix
white with these to form a “high-key” analogous colour scheme (e.g., flames).
•Complementary – Use “opposite colour” pairs—e.g., blue/yellow—to maximize
contrast.
•Split-Complementary (or Compound Harmony) – Add colours from either side
of your complementary colour pair to soften contrast.
•Triadic – Take three colours which are equally distant on the colour wheel
(i.e., 120° apart: e.g., red/blue/yellow). These colours may not be vibrant, but
the scheme can be as it maintains harmony and high contrast. It’s easier to
make visually appealing designs with this than with a complementary scheme.
•Tetradic – Take four colours that are two sets of complementary pairs (e.g.,
orange/yellow/blue/violet) and choose one dominant colour. This allows rich,
interesting designs. However, watch the balance between warm and cool
colours.
•Square – A variant of tetradic; you find four colours evenly spaced on the
colour wheel (i.e., 90° apart). Unlike tetradic, square schemes can work well if
you use all four colorus evenly.
 Cultural Differences
One area where designers need to be particularly careful in their work is in considering cultural
differences in color meaning. For example, in most western cultures, white is associated with
innocence and black is associated with death and mourning. But in other cultures, particularly
China, Japan, Korea, and other Asian countries, white is associated with death and mourning, and
even bad luck.
It’s important to consider where the users of a product are coming from. If the majority of users for
a particular site are coming from Indonesia, for example, then using green would be a bad idea.
But if they’re coming from the Middle East, then green is associated with luck, wealth, and fertility,
which might be exactly the kind of message desired.
Taking time to research the exact cultural meanings of colors before committing to a color palette is
an important step in the UX design process and one that can’t be overlooked. Not just because of
cultural differences, but also because of the significant effects color can have on user behavior.
cultures such as India and Africa with bright colourful art and clothing, and
Scandinavian design recalls more neutral tones. British customer base may prefer
neutrals in their own home and wardrobe. In the States, orange tends to be associated
with inexpensive fast food. Colour consultants advised a hot dog chain to incorporate
a little orange into its branding.
In a similar way, a lavatory cleaner changed its packaging from a pale blue and
green to a white font on a dark background to imply strength and cleanliness.
https://www.youtube.com/watch?v=fpyc3i3NDIM
https://www.youtube.com/watch?v=VBQPLHhfaKQ
https://www.youtube.com/watch?v=Y_LaqDi1PFM
Through UX research, you can fine-tune colour
choices to resonate best with specific users. Your
users will encounter your design with their own
expectations of what a design in a certain
industry should look like. That’s why you must
also design to meet your market’s expectations
geographically.
For example, blue—an industry standard for
banking in the West—also has positive associations
in other cultures. However, some colours can evoke
contradictory feelings from certain nationalities
(e.g., red: good fortune in China, mourning in
South Africa, danger/sexiness in the USA). Overall,
you should use useability testing to confirm your
colour choices.
Use Colour Theory to Match
What Your Users Want to See
Your colours must reflect your design’s
goal and brand’s personality. You should
also apply colour theory to optimize a
positive psychological impact on users.
So, you should carefully determine how
the colour temperature(i.e., your use of
warm, neutral and cool colours) reflects your
message. For example, you can make a
neutral colour such as grey warm or cool
depending on factors such as your
organization’s character and the industry.
The right contrast is vital to catching
users’ attention in the first place.
The vibrancy you choose for your
design is likewise crucial to provoking
desired emotional responses from users.
How they react to colour choices
depends on factors such as gender,
experience, age and culture. In all cases,
you should design for accessibility –
e.g., regarding red-green colour
blindness.
Limit the total number of colours
Achieving harmony in colour combinations is one of the main colour theory
principles. When you create a new scheme, it might be tempting to add dozens
of colours to it. But it’s better to avoid that temptation. Why? Because it’s
really hard to achieve a visual balance when you use too many colours. You
can also easily overwhelm your users.
So how do you avoid this? Keep your colour scheme simple, with a maximum
of two or three colours. Some designers think that two or three colours will
limit their creativity, but that’s not true. It’s possible to create interesting
visual combinations by playing with shades and tints of those colours. Simple
schemes also work best for your user.
https://adage.com/article/special-report-creativity-top-5/best-cannes-lions-202
1-winning-campaigns-ads-commercials/2346766
Decide when and how to use
vibrant and soft colours
Most colours will fall into one of two categories:
vibrant or soft. Depending on the nature of your
project, you can rely more on the first or second
group.
Vibrant colours are colours that stand out from the
background and pulse with energy. These colours are
great for creating an energetic vibe and are a good
choice for companies that want to present themselves
in a non-traditional manner.
Soft colours, on the other hand, blend in with the
design and help convey a sense of calm that helps
users feel at ease.
Never use colour alone to communicate the meaning. Use multiple visual
cues to communicate essential states in your product. For example, when you
show an error message, don’t use red alongside text that says “Required fields
are in red.” Instead, add a visible sign (such as an asterisk) and say,
“Required fields are in red and marked with an *.”
Avoid low contrast text. Placing two colours with low-value contrast next to
each other can make your copy very difficult to read. The Web content
accessibility guidance (WCAG) recommend that the background-to-text
contrast ratio is at least 4.5:1. Keep this in mind that when you design text as
well as functional elements, such as buttons.
Low-contrast text can be difficult to read, leading to a poor user experience
CMYK and RGB.
Digital designers and artists though, learn two additional color models in order to work on
screens and send content to print: CMYK and RGB.
•The color model for printed material is called CMYK
•The color model for digital material is called RGB
The CMYK Color Model
CMYK stands for Cyan, Magenta, Yellow and Key (Black).
The CMYK color model visualizes how colors are mixed together with pigments. These
include the inks used for printing any type of marketing material, like flyers, brochures,
merchandising, T-shirts, magazines, etc.
The way color is created with the CMYK model is called subtractive because the light
wavelengths are subtracted as the colors mix.
When Cyan, Magenta and Yellow are mixed together, they create a very dark color, also
known as an imperfect black. That is why the color model is called CMYK—K stands for
“key”, or black.
 The RGB Color Model

RGB stands for Red, Green and Blue.

The RGB color wheel visualizes how colors overlap on screens. The primary colors in RGB are
not pigments, but colored light.
When the colored lights overlap in different intensities, they form all the other colors. This is the
color space that designers use for all digital design, including websites, landing pages, social
media visuals and more.
The way color is created in the RGB model is called additive. This means that color is not
overlaid over another to create a new color.
The RGB model starts with black and the colors appear as light shines on it. When all three color
lights overlap, we see the “additive” white.
Color psychology
Colors and emotions are intricately linked in ways that digital designers are only beginning
to understand and take advantage of, which makes sense when you consider that color in
design (particularly newspapers and magazines) has really only become widespread in the
last half-century or so.
And yet, the psychological impact of color on user behavior is significant. Something as
simple as changing the color of a button can increase desired behavior by double, even
triple-digit percentages. Overlooking this vital component of user experience design is a
huge mistake and one that’s easily avoided with a little education and research.
What Is Color Psychology?
There has been little rigorous scientific study on the psychological effects of color. Yet
color psychology is an important focus of branding and other design disciplines. Most
studies on the effects of color have been done for practical reasons and primarily consist of
anecdotal evidence and case studies from individual companies and designers.
Ask designers, however, if they consider the psychological effects of color on human
behavior and the vast majority of them will affirm that they do. Overlooking color
psychology is a quick way to ensure poor user experience and reduce the conversion rate
of a website or app.
Why Color Affects Emotion
Why colors affect the way people feel isn’t straightforward. There are a number of elements
that can influence the way a person feels when exposed to a certain color. One important
factor is the personal association with a color. If a person’s favorite stuffed animal as a child
was blue, for example, then they may have a preference for blue throughout their life. Or, at
the opposite end of the spectrum, if they were hit by a blue car as a child, they might have a
strong negative emotional reaction to the color blue.
However, because of universal human experiences, it’s possible to predict how
the majority of people will respond to a given color. For example, green is often associated
with nature and growth because most people have witnessed plants growing. Blue is
almost universally calming because it’s associated with things like the sky and water.
Other effects are cultural. Purple, for example, is
still associated with luxury due to the fact that
purple dye was prohibitively expensive and rare
in many ancient cultures, and therefore only used
by royalty. It’s not a natural association, per se,
but it was a significant part of the cultural sprit
for long enough that it’s become a part of the
human psyche.
Purple continued to be associated with royalty
well into the 18th century, as evidenced by this
portrait of Russia’s Catherine the Great.
How Color Affects Consumer Behavior?
Color can affect performance, as already mentioned, but it can also affect overall behavior
among users. Countless case studies have been done comparing the effectiveness of different
color choices on things like calls to action.
HubSpot ran a case study on the effect of switching a button color from green to red on
Performable’s website and got some very conclusive results. A designer’s gut reaction might
be that green would perform better, as it’s associated with “go” while red is associated with
“stop” and might make people pause before clicking. But the results said the opposite: the red
button outperformed the green by 21%. In other case studies, green significantly outperforms
yellow or orange, though.
Logo design is another area where color choice is incredibly important. Brands pay
specialists thousands (and sometimes millions) of dollars to find exactly the right hue for
their brand, one that evokes the correct feelings and actions from their customers while
also standing out just the right amount from competitors in their industry (and the “right”
amount is often dependent on the specific industry)
https://visme.co/blog/color-psychology-in-marketing-the-ultimate-guide/
Fake at Science Gallery
uses a hot pink and
bright purple color
palette to create a
memorable impression.
Act Normal’s bright pink
background is visually
appealing and memorable,
incorporating the passion
of bright red without
being aggressive.
The key takeaway here is that the color used in a design does have a significant effect on user
behavior but the context in which the color is used is a major factor in this. Buttons, for example,
should stand out from the surrounding design elements without clashing with them (one area where
using a complementary color is a great idea, such as using a red button when much of the design
includes green).
Think about the brands you come into contact with every day and how color plays a role in their
visual identity. Coca-Cola is red. Cadbury is purple. Apple is white. Brands like Google play use
multiple colors and drive along any highway to glimpse those golden arches.
Coke’s recognizable red came about for practical reasons. According to the brand, "from the mid-
1990s, we began painting our barrels red so that tax agents could distinguish them from alcohol
during transport”. At that time, alcohol was taxed but soft drinks were not.
But it was a good move for other reasons too since we now know red can be a trigger for impulse
buys.
Rumour has it Cadbury’s regal purple, aka Pantone 2865c, was
chosen as a tribute to Queen Victoria. More than 100 years old,
Cadbury first attempted to trademark the color back in 2004,
however, this started a chocolate war with Nestle, who argued it
wasn’t distinctive enough to own. In 2008, Cadbury secured its
trademark, proving iconic colors are worth fighting for.
Steve Jobs chose white for two reasons. Passionate about design,
Jobs knew white is the color of purity, and so was in line with his
vision of beautifully-designed products. The second reason was
because of the competition. At that time, the dominant shade used
by computer manufacturers was gray.
Interesting story: Google chose red, blue, and yellow because they
are the primary colors, but they added green to show they don’t
always follow the rules. This childlike palette makes technology
seem less intimidating—appropriate for a company that prides
itself on making things really easy to use.
Principles of design
https://www.onlinedesignteacher.com/2015/11/design-elements_91.html
https://visme.co/blog/elements-principles-good-design/
Good Housekeeping,
one of the most iconic
American magazines,
started using color
around 100 years ago.
 Color Meanings
Every color is associated with different emotions. The use of color
in design can affect the emotions and moods of the people
viewing those color palettes. Using colors wisely can improve
user experience and increase desired behaviors (including
conversion rates) in significant ways.
Warm Colors
Warm colors include shades of red, orange, and yellow. In
general, these colors are energetic and active, with relatively
positive connotations.
Red: Red is associated with passion, love, and lust. It can also be associated with warnings
and danger, or even with anger (hence the term “seeing red”). Red can have a physiological
impact on people, too, including raising respiration and heart rate.
Orange: Orange is energetic and positive. It’s association with autumn leaves and seasonal
transitions can also make people think of change when they see it. Orange is also
associated with warnings, though less strongly than red.
Yellow: Yellow is considered the happiest hue in the color spectrum and is closely
associated with sunshine and with hope. It can also be linked with caution and cowardice,
though.
 Cool Colors
Cool colors include shades of blue, green, and purple. Generally speaking, cool colors are more calm
and relaxed than warm colors, though specific hues can have different properties.
Blue: Blue is calming and also represents honesty and loyalty (hence its popularity in so many corporate
branding color schemes). Blue can be associated with sadness and loss, depending on context. It’s also
linked to peace and even spirituality.
Green: Green can represent new beginnings and growth, as well as nature. It has some of the energizing
properties of yellow, while also carrying over some of blue’s calming effects. Green is associated with
affluence, money, and stability, particularly in darker shades.
Purple: Purple has long been associated with luxury and royalty, but also with mystery and the occult.
Lighter purples, such as lavender, are more romantic and associated with spring.
 Neutrals
Neutral colors often take on characteristics of the other colors in a palette and can be used to reinforce those
influences. The basic neutrals include black, white, gray, brown, and beige.
Black: Black is elegant and sophisticated, but can also be sad and representative of death and mourning.
White: White is pure and innocent, and often linked to cleanliness. Although in some cultures it can also be
associated with death.
Gray: Gray can be seen as sophisticated and powerful, but can also come across as boring if used the wrong way.
It’s one of the most flexible neutrals, as it can be seen as warm or cool, traditional or modern.
Brown: Brown is solid and dependable, and can be associated with nature depending on the context in which it is
used.
Beige: Beige can be warm or cool depending on the colors used around it. It’s generally conservative and can
take on the warmth of brown or the coolness of white. It takes on the meaning of the colors around it and often
fades into the background, adding little psychological influence on its own.
Thank you!