Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Published byLeila Rayes Modified over 9 years ago

Similar presentations

Presentation on theme: "CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Design Concepts: Module A: The Science of Color."— Presentation transcript:

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

2 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Goals Understand the origin of natural colorUnderstand the origin of natural color Understand the Additive Color ModelUnderstand the Additive Color Model Understand the Subtractive Color ModelUnderstand the Subtractive Color Model Understand how to represent colors using hexadecimal valuesUnderstand how to represent colors using hexadecimal values

3 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Electromagnetic Spectrum Measure of photons, traveling at the speed of light, carrying some type of energyMeasure of photons, traveling at the speed of light, carrying some type of energy Measured in terms of wavelength and frequencyMeasured in terms of wavelength and frequency

4 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Electromagnetic Spectrum Image source: http://imagers.gsfc.nasa.gov/ems/waves3.htmlhttp://imagers.gsfc.nasa.gov/ems/waves3.html

5 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Visible Light Occurs in a small part of the EM spectrum, near the middleOccurs in a small part of the EM spectrum, near the middle Wavelengths are 400nm to 700nm longWavelengths are 400nm to 700nm long Image is from http://imagers.gsfc.nasa.gov/ems/visible.htmlhttp://imagers.gsfc.nasa.gov/ems/visible.html

6 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Visible Light Image Source: http://imagers.gsfc.nasa.gov/ems/visible.htmlhttp://imagers.gsfc.nasa.gov/ems/visible.html

7 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Additive Color Model Used by computersUsed by computers When light energy is added, a color appears brighterWhen light energy is added, a color appears brighter Different visible light wavelengths can be combined to create new colorsDifferent visible light wavelengths can be combined to create new colors Image courtesy of Pat Ellison

8 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Additive Color Model Image courtesy of Pat Ellison

9 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Subtractive Color Model Used in the print mediaUsed in the print media When more color is added, a color appears darkerWhen more color is added, a color appears darker Ink or paint can be thought of a filter that filters out all colors except the color being perceived, which is reflectedInk or paint can be thought of a filter that filters out all colors except the color being perceived, which is reflected Image courtesy of Pat Ellison

10 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Subtractive Color Model Image courtesy of Pat Ellison

11 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Primary Colors Technically, pure primary colors are spectral colors which cannot be mixed from other colorsTechnically, pure primary colors are spectral colors which cannot be mixed from other colors A small number of colors can be mixed to create new colorsA small number of colors can be mixed to create new colors

12 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Primary Colors The Additive Color Model uses Red, Green and Blue (RGB) as Additive PrimariesThe Additive Color Model uses Red, Green and Blue (RGB) as Additive Primaries The Subtractive Color Model uses Cyan, Magenta, Yellow and Black (CYMK) as Subtractive PrimariesThe Subtractive Color Model uses Cyan, Magenta, Yellow and Black (CYMK) as Subtractive Primaries

13 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Some Color Terms Hue – A specific location on the visible spectrumHue – A specific location on the visible spectrum Saturation – Specifies the amount (intensity) of a colorSaturation – Specifies the amount (intensity) of a color

14 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Some Color Terms Value (Brightness) – Specifies the darkness/lightness of a color. Adding WHITE to a color produces a TINT. Adding BLACK to a color produces a SHADE.Value (Brightness) – Specifies the darkness/lightness of a color. Adding WHITE to a color produces a TINT. Adding BLACK to a color produces a SHADE.

15 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Color Wheel A common way to map color is to use the Color WheelA common way to map color is to use the Color Wheel All hues are depicted as an angle on the wheel (0° represents RED and 360° represents VIOLET)All hues are depicted as an angle on the wheel (0° represents RED and 360° represents VIOLET)

16 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Color Wheel Saturation is represented as a percentageSaturation is represented as a percentage Value is represented as a percentageValue is represented as a percentage RED, YELLOW and BLUE are the color wheels primary colorsRED, YELLOW and BLUE are the color wheels primary colors

17 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Representing a Color Image courtesy of Pat Ellison

18 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Color as a Numeric Constant Digital Color is normally represented as a numeric constant in triplet format, representing RGB valuesDigital Color is normally represented as a numeric constant in triplet format, representing RGB values In many graphic programs RGB values are represented as a percentage (0%-100%) or as an integer (0-255)In many graphic programs RGB values are represented as a percentage (0%-100%) or as an integer (0-255) On the web, color triplets are often represented using hexadecimal numbersOn the web, color triplets are often represented using hexadecimal numbers

19 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Common Hex Values RGB051102153204255 PERC0%20%40%60%80%100% HEX00336699CCFF

20 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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)

21 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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)

22 N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Questions?

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

Similar presentations

P H Y S I C S Chapter 8: Light and Optics Section 8A: Light and Refraction.

P H Y S I C S Chapter 8: Light and Optics Section 8A: Light and Refraction.
Fundamentals of Digital Imaging

Fundamentals of Digital Imaging
School of Computing Science Simon Fraser University

School of Computing Science Simon Fraser University
Multi-media Graphics JOUR 205 Color Models & Color Space 5 ways of specifying colors.

Multi-media Graphics JOUR 205 Color Models & Color Space 5 ways of specifying colors.
Color.

Color.
1 Perception. 2 “The consciousness or awareness of objects or other data through the medium of the senses.”

1 Perception. 2 “The consciousness or awareness of objects or other data through the medium of the senses.”
Basic properties of color: hue, value, and saturation.

Basic properties of color: hue, value, and saturation.
Color: The result of the spectrum of visible light reflecting off of an object. Ultraviolet Infrared.

Color: The result of the spectrum of visible light reflecting off of an object. Ultraviolet Infrared.
C O L O R S PRINT VS MULTIMEDIA. Main Difference Print –Primary Colors CMYK Cyan, Magenta, Yellow, Black - Subtractive Color system –Add together = black.

C O L O R S PRINT VS MULTIMEDIA. Main Difference Print –Primary Colors CMYK Cyan, Magenta, Yellow, Black - Subtractive Color system –Add together = black.
Product Design Sketching Chromatic Theories. Color Spectrum The range of colors seen by human eye is the “visible color spectrum”

Product Design Sketching Chromatic Theories. Color Spectrum The range of colors seen by human eye is the “visible color spectrum”
1 91.427 Computer Graphics I, Fall 2008 Image Formation.

Computer Graphics I, Fall 2008 Image Formation.
Color Background. What is Color? Aspect of vision Physical reaction of the eye and the automatic interpretive response of the brain to wavelength characteristics.

Color Background. What is Color? Aspect of vision Physical reaction of the eye and the automatic interpretive response of the brain to wavelength characteristics.
CMYK vs. RGB Design. Primary colors The colors that make up the base for every other color created. Depending on whether you are looking at it from science,

CMYK vs. RGB Design. Primary colors The colors that make up the base for every other color created. Depending on whether you are looking at it from science,
Color Definitions Graphic Design. There are tens of thousands of colors at designers’ disposal, and almost infinite ways of combining them.

Color Definitions Graphic Design. There are tens of thousands of colors at designers’ disposal, and almost infinite ways of combining them.
Color. -Visual light -An integral part of the sculpture -Creates desired effect -Distinguish items -Strengthen interest.

Color. -Visual light -An integral part of the sculpture -Creates desired effect -Distinguish items -Strengthen interest.
Color Management. How does the color work?  Spectrum Spectrum is a contiguous band of wavelengths, which is emitted, reflected or transmitted by different.

Color Management. How does the color work?  Spectrum Spectrum is a contiguous band of wavelengths, which is emitted, reflected or transmitted by different.
Unit 2 Lecture 1 Colour. Basic Colour Wheel In paint pigments, pure Yellow, pure Red, and pure Blue are the only hues that can't be created by mixing.

Unit 2 Lecture 1 Colour. Basic Colour Wheel In paint pigments, pure Yellow, pure Red, and pure Blue are the only hues that can't be created by mixing.
Colours and Computer Jimmy Lam The Hong Kong Polytechnic University.

Colours and Computer Jimmy Lam The Hong Kong Polytechnic University.
Color Sources:

Color Sources:
Colour Wheel How to mix the colours you want!. Additive color refers to the mixing of colors of light. This example shows how the light from red, green.

Colour Wheel How to mix the colours you want!. Additive color refers to the mixing of colors of light. This example shows how the light from red, green.

Similar presentations

Ads by Google