CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Design Concepts: Module A: The Science of Color.

CSCI N241:CSCI N241: Fundamentals of Web DesignFundamentals of Web Design

Copyright ©2004 Department of Computer & Information Science

Design Concepts:Design Concepts:Module A: The Science of Module A: The Science of ColorColor

N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science

Goals

• Understand the origin of natural Understand the origin of natural colorcolor

• Understand the Additive Color ModelUnderstand the Additive Color Model• Understand the Subtractive Color Understand the Subtractive Color

ModelModel• Understand how to represent colors Understand how to represent colors

using hexadecimal valuesusing hexadecimal values


The Electromagnetic Spectrum

• Measure of photons, traveling at the Measure of photons, traveling at the speed of light, carrying some type of speed of light, carrying some type of energyenergy

• Measured in terms of wavelength and Measured in terms of wavelength and frequencyfrequency


The Electromagnetic Spectrum

Image source: http://imagers.gsfc.nasa.gov/ems/waves3.html


Visible Light

• Occurs in a small part of the EM Occurs in a small part of the EM spectrum, near the middlespectrum, near the middle

• Wavelengths are 400nm to 700nm Wavelengths are 400nm to 700nm longlong

Image is from http://imagers.gsfc.nasa.gov/ems/visible.html


Visible Light

Image Source: http://imagers.gsfc.nasa.gov/ems/visible.html


Additive Color Model

• Used by computersUsed by computers

• When light energy is added, a color When light energy is added, a color appears brighterappears brighter

• Different visible light wavelengths can Different visible light wavelengths can be combined to create new colorsbe combined to create new colors

Image courtesy of Pat Ellison


Additive Color Model



Subtractive Color Model

• Used in the print mediaUsed in the print media

• When more color is added, a color When more color is added, a color appears darkerappears darker

• Ink or paint can be thought of a filter Ink or paint can be thought of a filter that filters out all colors except the that filters out all colors except the color being perceived, which is color being perceived, which is reflectedreflected



Subtractive Color Model



Primary Colors

• Technically, pure primary colors are Technically, pure primary colors are spectral colors which cannot be spectral colors which cannot be mixed from other colorsmixed from other colors

• A small number of colors can be A small number of colors can be mixed to create new colorsmixed to create new colors


Primary Colors

• The The Additive Color ModelAdditive Color Model uses Red, uses Red, Green and Blue (RGB) as Green and Blue (RGB) as Additive Additive PrimariesPrimaries

• The The Subtractive Color Model Subtractive Color Model uses uses Cyan, Magenta, Yellow and Black Cyan, Magenta, Yellow and Black (CYMK) as (CYMK) as Subtractive PrimariesSubtractive Primaries


Some Color Terms

• HueHue – A specific location on the – A specific location on the visible spectrumvisible spectrum

• SaturationSaturation – Specifies the amount – Specifies the amount (intensity) of a color(intensity) of a color


Some Color Terms

• Value (Brightness)Value (Brightness) – Specifies the – Specifies the darkness/lightness of a color. Adding darkness/lightness of a color. Adding WHITE to a color produces a WHITE to a color produces a TINTTINT. . Adding BLACK to a color produces a Adding BLACK to a color produces a SHADESHADE..


The Color Wheel

• A common way to map color is to use A common way to map color is to use the Color Wheelthe Color Wheel

• All hues are depicted as an angle on All hues are depicted as an angle on the wheel (0° represents the wheel (0° represents RED RED and and 360° represents 360° represents VIOLETVIOLET))


The Color Wheel

• Saturation is represented as a Saturation is represented as a percentagepercentage

• Value is represented as a percentageValue is represented as a percentage• REDRED, , YELLOW YELLOW and and BLUEBLUE are the are the

color wheels primary colorscolor wheels primary colors


Representing a Color



Color as a Numeric Constant

• Digital Color is normally represented as a Digital Color is normally represented as a numeric constant in triplet format, numeric constant in triplet format, representing RGB valuesrepresenting RGB values

• In many graphic programs RGB values are In many graphic programs RGB values are represented as a percentage (0%-100%) represented as a percentage (0%-100%) or as an integer (0-255)or as an integer (0-255)

• On the web, color triplets are often On the web, color triplets are often represented using hexadecimal numbersrepresented using hexadecimal numbers


Common Hex Values

RGBRGB 00 5151 102102 153153 204204 255255

PERCPERC 0%0% 20%20% 40%40% 60%60% 80%80% 100%100%

HEXHEX 0000 3333 6666 9999 CCCC FFFF


Common Hex Colors

• RED (Hex: #ff0000)RED (Hex: #ff0000)

• GREEN (Hex: #00ff00)GREEN (Hex: #00ff00)

• BLUE (Hex: #0000ff)BLUE (Hex: #0000ff)

• WHITE (Hex: #ffffff)WHITE (Hex: #ffffff)

• BLACK (Hex: #000000)BLACK (Hex: #000000)


Common Hex Colors

• MAGENTA (Hex: #ff00ff)MAGENTA (Hex: #ff00ff)

• CYAN (Hex: #00ff00)CYAN (Hex: #00ff00)

• YELLOW (Hex: #ff0000)YELLOW (Hex: #ff0000)

• GRAY (Hex: #808080)GRAY (Hex: #808080)


Questions?

CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Design Concepts: Module A: The Science of Color.

Documents

science of color slide

additive color modelunderstand

csci n241

frequency slide

g slide

speed of light

nm long image

brighterwhen light energy