Upload
nomlanga-fitzgerald
View
90
Download
0
Embed Size (px)
DESCRIPTION
Color and Color for the Web. First, discuss idea of color (some overlap with lecture on HVS) Second, discuss color in web pages. Why Study Color?. Color can be a powerful tool to convey information and emotion improve user interfaces - PowerPoint PPT Presentation
Citation preview
Color and Color for the WebColor and Color for the Web
First, discuss idea of color First, discuss idea of color (some overlap (some overlap with lecture on HVS)with lecture on HVS)
Second, discuss color in web pagesSecond, discuss color in web pages
11
22
Color can be a powerful tool to
convey information and emotion
improve user interfacesbut its inappropriate use can severely reduce the performance of the systems we build
Why Study Color?Why Study Color?
33
Visible SpectrumVisible Spectrum
44
Color Perception via Cones in Color Perception via Cones in EyeEye
““Photopigments” used to sense colorPhotopigments” used to sense color 3 types: 3 types: blueblue, , greengreen, “, “redred” (really ” (really
yellowyellow))• each sensitive to different band of each sensitive to different band of
spectrum spectrum • ratio of neural activity of the 3 ratio of neural activity of the 3 color color
other colors are perceived by combining other colors are perceived by combining stimulationstimulation
55
Color: how it gets to our eyesColor: how it gets to our eyes It is determined by light source, surface It is determined by light source, surface
properties (what light is absorbed & properties (what light is absorbed & reflected) and the sensor.reflected) and the sensor.
Color ComponentsColor Components
How we describe / measure colorHow we describe / measure color There is not just one wayThere is not just one way Three Main ways Three Main ways
1.1. Red Green Blue – used in displays, Red Green Blue – used in displays, computers, TVs, phones, electronics computers, TVs, phones, electronics (this (this is closest to how we see)is closest to how we see)
2.2. Cyan(blue-green) Magenta(red-blue) Yellow Cyan(blue-green) Magenta(red-blue) Yellow – used in print / paintings– used in print / paintings
3.3. Hue, Saturation, Intensity – used by artists, Hue, Saturation, Intensity – used by artists, theoreticaltheoretical
66
77
RGB ModelRGB Model
Based on human visual Based on human visual system cones.system cones.
Additive model. Additive model.
An image consists of 3 An image consists of 3 BANDS: Red (R), Green (G), BANDS: Red (R), Green (G), Blue (B)Blue (B)
White = full Red + full White = full Red + full Green + full BlueGreen + full Blue
Black = no Red + no Green Black = no Red + no Green + no Blue+ no Blue
88
CMY ModelCMY Model
Cyan-Magenta-Yellow is a Cyan-Magenta-Yellow is a subtractive subtractive model which is good to model absorption model which is good to model absorption of colors.of colors.
Appropriate for paper printing. Appropriate for paper printing. Subtractive model Subtractive model
Black = full Cyan + full Magenta + full Black = full Cyan + full Magenta + full YellowYellow
White = no Cyan + no Magenta + no White = no Cyan + no Magenta + no YellowYellow
99
RGB Is RGB Is AdditiveAdditive
CMY Is CMY Is SubtractiveSubtractive
Typically used for projected/emitted light like TV / computers
Typically used for reflected lightlike in printers
1010
Color Components – HLS (or Color Components – HLS (or HIS/HIS) theoryHIS/HIS) theory
HueHue• property of the wavelengths of light (i.e., “color”)property of the wavelengths of light (i.e., “color”)
Lightness (or value)Lightness (or value)• how much light appears to be reflected from a surfacehow much light appears to be reflected from a surface• some hues are inherently lighter or darkersome hues are inherently lighter or darker
SaturationSaturation• purity of the huepurity of the hue
e.g., red is more saturated than pinke.g., red is more saturated than pink• color is mixture of pure hue & achromatic colorcolor is mixture of pure hue & achromatic color
portion of pure hue is the degree of saturationportion of pure hue is the degree of saturation
1111
Color Components (cont.)Color Components (cont.)
LightnessLightness SaturationSaturation
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
1212
Color Components (cont.)Color Components (cont.)
Hue, Saturation, Value model (HSV)Hue, Saturation, Value model (HSV)
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
1313
Color Guidelines Color Guidelines for Ease of for Ease of UseUse
Avoid simultaneous display of highly Avoid simultaneous display of highly saturated, spectrally extreme colorssaturated, spectrally extreme colors• e.g., no cyans/blues at the same time as e.g., no cyans/blues at the same time as
reds, why?reds, why? refocusing!refocusing!
• desaturated combinations are better desaturated combinations are better pastelspastels
Opponent colors go well togetherOpponent colors go well together• (red & green) or (yellow & blue) (red & green) or (yellow & blue)
Color Guidelines for functional Color Guidelines for functional designdesign
Beauty is in eye of beholder – so for Beauty is in eye of beholder – so for art you decide.art you decide.
For function and usability – For function and usability – constraining how you use color can constraining how you use color can make or break an interfacemake or break an interface
1414
1515
Color Guidelines (cont.)Color Guidelines (cont.)
Size of detectable changes in color variesSize of detectable changes in color varies• hard to detect changes in reds, purples, & greenshard to detect changes in reds, purples, & greens• easier to detect changes in yellows & blue-greenseasier to detect changes in yellows & blue-greens
Older users need higher brightness levels to Older users need higher brightness levels to distinguish colorsdistinguish colors
Hard to focus on edges created by color alone Hard to focus on edges created by color alone ??• use both brightness & color differencesuse both brightness & color differences
1616
Color Guidelines (cont.)Color Guidelines (cont.)
Avoid red & green in the periphery - why?Avoid red & green in the periphery - why?• lack of RG cones there -- yellows & blues work in lack of RG cones there -- yellows & blues work in
peripheryperiphery Avoid pure blue for text, lines, & small shapesAvoid pure blue for text, lines, & small shapes
• blue makes a fine background colorblue makes a fine background color• avoid adjacent colors that differ only in blue avoid adjacent colors that differ only in blue
Avoid single-color distinctionsAvoid single-color distinctions• mixtures of colors should differ in 2 or 3 colorsmixtures of colors should differ in 2 or 3 colors
e.g., 2 colors shouldn’t differ only by amount of rede.g., 2 colors shouldn’t differ only by amount of red
• helps color-deficient observershelps color-deficient observers
Color in Web PagesColor in Web Pages
1717
Using Color on Web PagesUsing Color on Web Pages Computer monitors display color as Computer monitors display color as
intensities of red, green, and blue intensities of red, green, and blue lightlight
RGB ColorRGB Color The values of red, green, and blue The values of red, green, and blue
vary from 0 to 255.vary from 0 to 255. Hexadecimal numbers (base 16) Hexadecimal numbers (base 16)
represent these color values.represent these color values.
1818
Hexadecimal Hexadecimal Color ValuesColor Values
# is used to indicate a hexadecimal # is used to indicate a hexadecimal valuevalue
Hex value pairs range from 00 to FFHex value pairs range from 00 to FF Three hex value pairs describe an RGB Three hex value pairs describe an RGB
colorcolor
#000000 black#000000 black #FFFFFF white#FFFFFF white#FF0000 red#FF0000 red #00FF00 green#00FF00 green#0000FF blue#0000FF blue #CCCCCC grey#CCCCCC grey
1919
Web Color PaletteWeb Color Palette
A collection of 216 colorsA collection of 216 colors
Display the most Display the most similar similar on the Mac and PCon the Mac and PCplatformsplatforms
Hex values: Hex values: 00, 33, 66, 99, CC, FF00, 33, 66, 99, CC, FF
Color Chart Color Chart http://webdevfoundations.net/colorhttp://webdevfoundations.net/color
2020
Making Color ChoicesMaking Color Choices
How to choose a color scheme?How to choose a color scheme?• MonochromaticMonochromatic
http://meyerweb.com/eric/tools/color-blendhttp://meyerweb.com/eric/tools/color-blend
• Choose from a photograph or other imageChoose from a photograph or other image http://www.colr.orghttp://www.colr.org
• Begin with a favorite colorBegin with a favorite color Use one of the sites below to choose other colorsUse one of the sites below to choose other colors
• http://colorsontheweb.com/colorwizard.asphttp://colorsontheweb.com/colorwizard.asp• http://kuler.Adobe.comhttp://kuler.Adobe.com• http://colorschemedesigner.com/ http://colorschemedesigner.com/
Accessibility & ColorAccessibility & Color
Everyone is not able to see or distinguish Everyone is not able to see or distinguish between colorsbetween colors
Information must be conveyed even if color Information must be conveyed even if color cannot be viewedcannot be viewed
According to Vischeck According to Vischeck http://www.vischeck.com/vischeckhttp://www.vischeck.com/vischeck
• 1 out of 20 people experience some type of color 1 out of 20 people experience some type of color deficiencydeficiency
• Color choice can be crucialColor choice can be crucial• Avoid using red, green, brown, gray, or purple next to Avoid using red, green, brown, gray, or purple next to
each othereach other
• White, White, black, and shades of blue and yellow are black, and shades of blue and yellow are easier to differentiate.easier to differentiate.
Simulation: Simulation: http://www.vischeck.com/vischeck/vischeckURL.phphttp://www.vischeck.com/vischeck/vischeckURL.php
Color in (X)HTMLColor in (X)HTML
In attributes of tagsIn attributes of tags
i.e. bgcolor of <body> tag <body i.e. bgcolor of <body> tag <body bgcolor=“#FFCCFF”>bgcolor=“#FFCCFF”>
Others – use in CSS for styling many Others – use in CSS for styling many elements text, areas, etc.elements text, areas, etc.
We will go over these as we learn them.We will go over these as we learn them.2323