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