PBA Front-End Programming
Colors – Theory and Practice
Colors, theory & practice
• Why are colors important…?
Colors, theory & practice
• Vision is (usually) the ”strongest” human
sense – primary source of information
• Humans are good at spotting differences in
colors (~10 million hues)
• Colors and feelings are closely related
• On a website, colors is the first thing we
notice – first impression is important!
Colors, theory & practice
• What are colors
actually?
• Physically: Electromagnetic radiation in a
narrow wavelength
interval
• Actual colors exist only
in our brains…
Colors, theory & practice
• Primary colors:
– Yellow
– Blue
– Red
Colors, theory & practice
• Secondary colors:
– Green
– Orange
– Violet
Colors, theory & practice
• Tertiary colors:
– Yellow-orange
– Red-orange
– Red-violet
– Blue-violet
– Blue-green
– Yellow-green
Colors, theory & practice
• Complimentary
colors: Colors
opposite each
other on the
color wheel
Colors, theory & practice
• Analogous colors:
Colors next to
each other on the
color wheel
Colors, theory & practice
• Warm colors
• Cool colors
Colors, theory & practice
• Tint – adding white to a pure color
Colors, theory & practice
• Shade – adding black to a pure color
Colors, theory & practice
• Tone – adding grey to a pure color
Colors, theory & practice
• How do we define a color in quantitative
terms (using numbers)
• We use color models
• Most widespread color model in the context
of computers is RGB
• Additive color model, uses Red, Green and
Blue as additive primary colors (why not
Yellow instead of Green…?)
Colors, theory & practice
•
•
•
•
•
Typical representation in RGB is to use 24 bits
24 bits = 3 bytes
One byte for each component color
Approx 16.7 millions hues possible
Approx what the human eye/brain can
differentiate
• www.colorpicker.com
Colors, theory & practice
• How are colors relevant with
regards to Web Design?
• Usability: Good color choices
make the website easier to
use (to read, to navigate,…)
• Convey emotions: Colors are
strongly associated with
human emotions
Colors, theory & practice
• How does color affect usability
• Text: If a website is text-rich, colors should
”support” the user in reading text
• Avoid choices that make it hard to read the
text; the user will tire and go away…
Colors, theory & practice
• These are (almost) complimentary colors…
• You could then assume that they would
produce high contrast…
• ..and make the text easy to read…
• …but it doesn’t look like it!
Colors, theory & practice
• Black and white is often a good choice for text
• Can appear somewhat ”harsh” on the eye
• Can be softened with e.g. beige background,
grey text
Colors, theory & practice
• Black and white is often a good choice for text
• Can appear somewhat ”harsh” on the eye
• Can be softened with e.g. beige background,
grey text
Colors, theory & practice
• Black and white is often a good choice for text
• Can appear somewhat ”harsh” on the eye
• Can be softened with e.g. beige background,
grey text
• …And even in reverse, maybe…
Colors, theory & practice
• Also, colors should not surprise the user
• On a website, I expect that this is a link
• ”Wrong” colors may also confuse a user who
must make a choice:
Do you really wish to delete your user profile?
Yes
No
Colors, theory & practice
•
•
•
•
Fact: Colors invoke feelings!
Why…?
Which feelings?
Depends on
– Culture
– Personality
– Mood
– …?
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
• You can find more color symbolisms at:
http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm
• You can probably find other interpretations
elsewhere as well…
Colors, theory & practice
• Now I have to design a website, including
choosing colors…how do I start?
• In many situations, the colors for the website
may be predetermined
• Visual corporate identity
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
• The obvious colors
might also be
”taken” by
somebody or
something you do
not want to be
associated with…
Colors, theory & practice
• If choice of colors is ”free”…
• …start by finding adjectives that match the
theme of your website
• Find base color(s) that match those adjectives
(not more than three colors)
• Decide what kind of color scheme you will
apply
Colors, theory & practice
• Color scheme – a palette of
colors to apply to your wesbite
• Given the base color(s), find
additional colors to apply
• A number of standard color
harmonies exist for generating
color schemes
Colors, theory & practice
(taken from www.tigercolor.com )
Colors, theory & practice
(taken from www.tigercolor.com )
Colors, theory & practice
(taken from www.tigercolor.com )
Colors, theory & practice
(taken from www.tigercolor.com )
Colors, theory & practice
(taken from www.tigercolor.com )
Colors, theory & practice
(taken from www.tigercolor.com )
Colors, theory & practice
Colors, theory & practice