Transcript Color
Color and Color for the Web First, discuss idea of color (some overlap with lecture on HVS) Second, discuss color in web pages 1 Why Study Color? Color can be a powerful tool to convey information and emotion improve user interfaces but its inappropriate use can severely reduce the performance of the systems we build 2 Visible Spectrum 3 Color Perception via Cones in Eye “Photopigments” used to sense color 3 types: blue, green, “red” (really yellow) • each sensitive to different band of spectrum • ratio of neural activity of the 3 color other colors are perceived by combining stimulation 4 Color: how it gets to our eyes It is determined by light source, surface properties (what light is absorbed & reflected) and the sensor. 5 Color Components How we describe / measure color There is not just one way Three Main ways 1. Red Green Blue – used in displays, computers, TVs, phones, electronics (this is closest to how we see) 2. Cyan(blue-green) Magenta(red-blue) Yellow – used in print / paintings 3. Hue, Saturation, Intensity – used by artists, theoretical 6 RGB Model Based on human visual system cones. Additive model. An image consists of 3 BANDS: Red (R), Green (G), Blue (B) White = full Red + full Green + full Blue Black = no Red + no Green + no Blue 7 CMY Model Cyan-Magenta-Yellow is a subtractive model which is good to model absorption of colors. Appropriate for paper printing. Subtractive model Black = full Cyan + full Magenta + full Yellow White = no Cyan + no Magenta + no Yellow 8 Typically used for projected/ emitted light like TV / computers RGB Is Additive CMY Is Subtractive Typically used for reflected light like in printers 9 Color Components – HLS (or HIS/HIS) theory Hue • property of the wavelengths of light (i.e., “color”) Lightness (or value) • how much light appears to be reflected from a surface • some hues are inherently lighter or darker Saturation • purity of the hue e.g., red is more saturated than pink • color is mixture of pure hue & achromatic color portion of pure hue is the degree of saturation 10 Color Components (cont.) Lightness Saturation from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation. 11 Color Components (cont.) Hue, Saturation, Value model (HSV) from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation. 12 Color Guidelines for Ease of Use Avoid simultaneous display of highly saturated, spectrally extreme colors • e.g., no cyans/blues at the same time as reds, why? refocusing! • desaturated combinations are better pastels Opponent colors go well together • (red & green) or (yellow & blue) 13 Color Guidelines for functional design Beauty is in eye of beholder – so for art you decide. For function and usability – constraining how you use color can make or break an interface 14 Color Guidelines (cont.) Size of detectable changes in color varies • hard to detect changes in reds, purples, & greens • easier to detect changes in yellows & blue-greens Older users need higher brightness levels to distinguish colors Hard to focus on edges created by color alone ? • use both brightness & color differences 15 Color Guidelines (cont.) Avoid red & green in the periphery - why? • lack of RG cones there -- yellows & blues work in periphery Avoid pure blue for text, lines, & small shapes • blue makes a fine background color • avoid adjacent colors that differ only in blue Avoid single-color distinctions • mixtures of colors should differ in 2 or 3 colors e.g., 2 colors shouldn’t differ only by amount of red • helps color-deficient observers 16 Color in Web Pages 17 Using Color on Web Pages Computer monitors display color as intensities of red, green, and blue light RGB Color The values of red, green, and blue vary from 0 to 255. Hexadecimal numbers (base 16) represent these color values. 18 Hexadecimal Color Values # is used to indicate a hexadecimal value Hex value pairs range from 00 to FF Three hex value pairs describe an RGB color #000000 black #FF0000 red #0000FF blue #FFFFFF white #00FF00 green #CCCCCC grey 19 Web Color Palette A collection of 216 colors Display the most similar on the Mac and PC platforms Hex values: 00, 33, 66, 99, CC, FF Color Chart http://webdevfoundations.net/color 20 Making Color Choices How to choose a color scheme? • Monochromatic http://meyerweb.com/eric/tools/color-blend • Choose from a photograph or other image http://www.colr.org • Begin with a favorite color Use one of the sites below to choose other colors • http://colorsontheweb.com/colorwizard.asp • http://kuler.Adobe.com • http://colorschemedesigner.com/ Accessibility & Color Everyone is not able to see or distinguish between colors Information must be conveyed even if color cannot be viewed According to Vischeck http://www.vischeck.com/vischeck • 1 out of 20 people experience some type of color deficiency • Color choice can be crucial • Avoid using red, green, brown, gray, or purple next to each other • White, black, and shades of blue and yellow are easier to differentiate. Simulation: Color in (X)HTML In attributes of tags i.e. bgcolor of <body> tag bgcolor=“#FFCCFF”> <body Others – use in CSS for styling many elements text, areas, etc. We will go over these as we learn them. 23