PBA Front-End Programming Colors – Theory and Practice

PBA Front-End Programming

Colors – Theory and Practice

Colors, theory & practice

• Why are colors important…?


• Vision is (usually) the ”strongest” human sense – primary source of information

• Humans are good at distinguishing colors (~10 million hues)

• Colors and feelings are closely related• On a website, colors is the first thing we

notice – first impression is important!


• What are colors actually?

• Physically: Electro-magnetic radiation in a narrow wavelength interval

• Actual colors exist only in our brains…


• Primary colors:– Yellow– Blue– Red


• Secondary colors:– Green– Orange– Violet


• Tertiary colors:– Yellow-orange– Red-orange– Red-violet– Blue-violet– Blue-green– Yellow-green

• Forming the Color Wheel


• Complementary colors: Colors opposite each other on the color wheel


• Analogous colors: Colors next to each other on the color wheel


• Warm colors

• Cool (cold) colors


• Tint – adding white to a pure color


• Shade – adding black to a pure color


• Tone – adding grey to a pure color


• 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…?)


• 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, about

what the human eye/brain can differentiate• www.colorpicker.com• https://kuler.adobe.com (Flash)

http://www.colorpicker.com/

https://kuler.adobe.com/


• 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


• 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…


• These are (almost) complementary 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!


• 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



grey text



grey text• …And even in reverse, maybe…


• 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


• Fact: Colors invoke feelings!• Why…?• Which feelings?• Depends on– Culture– Personality– Mood– …?








• 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…

http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm


• 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




• The obvious colors might also be ”taken” by somebody or some-thing you do not want to be associated with…


• 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

(only two or three colors)• Decide what kind of color scheme you will

apply


• 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


(taken from www.tigercolor.com )

http://www.tigercolor.com/


















Documents

PBA Front-End Programming Colors – Theory and Practice