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 • but its inappropriate use can severely reduce the performance of the systems we build
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
Color: how it gets to our eyes • It is determined by light source, surface properties (what light is absorbed & reflected) and the sensor.
Color Components • How we describe / measure color • There is not just one way • Three Main ways • Red Green Blue – used in displays, computers, TVs, phones, electronics (this is closest to how we see) • Cyan(blue-green) Magenta(red-blue) Yellow – used in print / paintings • Hue, Saturation, Intensity – used by artists, theoretical
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
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
Typically used for projected/ emitted light like TV / computers RGB Is Additive CMY Is Subtractive Typically used for reflected light like in printers
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
Lightness Saturation Color Components (cont.) from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
Color Components (cont.) • Hue, Saturation, Value model (HSV) from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
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)
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
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
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
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.
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 #FFFFFF white #FF0000 red#00FF00 green #0000FF blue #CCCCCC grey
Web Color Palette • A collection of 216 colors • Display the most similar on the Mac and PCplatforms • Hex values: 00, 33, 66, 99, CC, FF • Color Chart http://webdevfoundations.net/color
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: http://www.vischeck.com/vischeck/vischeckURL.php
Color in (X)HTML In attributes of tags i.e. bgcolor of <body> tag <body bgcolor=“#FFCCFF”> Others – use in CSS for styling many elements text, areas, etc. We will go over these as we learn them.