Download presentation
Presentation is loading. Please wait.
Published byBrianna Richardson Modified over 9 years ago
1
PBA Front-End Programming Colors – Theory and Practice
2
Colors, theory & practice Why are colors important…?
3
Colors, theory & practice 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!
4
Colors, theory & practice What are colors actually? Physically: Electro- magnetic radiation in a narrow wavelength interval Actual colors exist only in our brains…
5
Colors, theory & practice Primary colors: – Yellow – Blue – Red
6
Colors, theory & practice Secondary colors: – Green – Orange – Violet
7
Colors, theory & practice Tertiary colors: – Yellow-orange – Red-orange – Red-violet – Blue-violet – Blue-green – Yellow-green Forming the Color Wheel
8
Colors, theory & practice Complementary colors: Colors opposite each other on the color wheel
9
Colors, theory & practice Analogous colors: Colors next to each other on the color wheel
10
Colors, theory & practice Warm colors Cool (cold) colors
11
Colors, theory & practice Tint – adding white to a pure color
12
Colors, theory & practice Shade – adding black to a pure color
13
Colors, theory & practice Tone – adding grey to a pure color
14
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…?)
15
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, about what the human eye/brain can differentiate www.colorpicker.com https://kuler.adobe.com (Flash) https://kuler.adobe.com
16
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
17
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…
18
Colors, theory & practice 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!
19
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
20
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
21
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…
22
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? YesNo
23
Colors, theory & practice Fact: Colors invoke feelings! Why…? Which feelings? Depends on – Culture – Personality – Mood – …?
24
Colors, theory & practice
30
You can find more color symbolisms at: http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm You can probably find other interpretations elsewhere as well…
31
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
32
Colors, theory & practice
34
The obvious colors might also be ”taken” by somebody or some- thing you do not want to be associated with…
35
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 (only two or three colors) Decide what kind of color scheme you will apply
36
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
37
Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com
38
Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com
39
Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com
40
Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com
41
Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com
42
Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com
43
Colors, theory & practice
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.