際際滷

際際滷Share a Scribd company logo

Color for web and print

Download as PPT, PDF
Elaine Rettger
Elaine Rettger

Taught as a one hour course at Scottsdale Community College in a web design and CSS class, spring 2010

1 of 20
Downloaded 14 times
Color for Web and Print 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Color originates from sunlight. All the colors of the spectrum are present in white light (sunlight). An object will reflect a particular wavelength of light and absorb all other wavelengths. Our eyes see the reflected wavelength. How we see color
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Additive color involves light emitted from a source or illuminant. Additive color mixing begins with black and ends with white; as more color is added, the result is lighter and tends to white. Additive color (light) uses the colors red, green and blue to produce all other colors . Color and light emitting media
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Computer monitors, LED and LCD displays, televisions, cell phones and a wide variety of electronic media devices use pixels to display color. The pixels (red, green, blue) do not overlap but rather sit side-by-side. When a green color appears, only the green pixels light up. When a cyan color appears, both green and blue pixels light up. When white appears all the pixels light up. Because the pixels on our displays are so small and close together our eyes blend them together, having a similar effect as additive light. How color is created on a color display
Pixel is a computer word formed from PICture ELement, because a pixel is the smallest element of the digital image. The colors in pixels are really just RGB data values. If you enlarge an image in photoshop or another photo editing program, you will see that the image gets very rough or pixilated. Each of these little pixels has an RGB numeric value. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 What is a pixel?
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 A digital image is made up of individual pixels. Each pixel has its own RGB numeric value.
What is hexadecimal? 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Computers store information in single ones and zeros. Each one (1) and zero has a single value called a bit. By counting in base 16 (hexadecimal) we can pack more values into a single space. Hex means six (6) Dec means ten (10) Hexadecimal means sixteen (16)
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Hex Decimal 0 = 0 1 = 1 2 = 2 3 = 3 4 = 4 5 = 5 6 = 6 7 = 7 8 = 8 9 = 9 A = 10 B = 11 C = 12 D = 13 E = 14 F = 15 For example: Decimal 0 is equal to 0 in hex. Decimal 5 is equal to 5 in hex. Decimal 10 is equal to A in hex. Decimal 15 is equal to F in hex. Decimal 16 is equal to 10 in hex. Decimal 17 is equal to 11 in hex. Decimal 255 is equal to FF in hex. Hexadecimal numerology and decimal equivalents
How does hexadecimal relate to color? 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Scientist found that the human eye can only distinguish between 256 shades of a primary color. 16 x 16 = 256 so all shades of a specific color can be expressed with just two hexadecimal digits. 256 = FF in hexadecimal coding. In theory the eye can see more than 16 million colors. For each Red, Green and Blue cone in the eye there are 256 possible shades of each color; 256 (Red) x 256 (Blue) x 256 (Green) = 16,777,216 possible colors
Early color monitors could only display 256 colors. Certain colors were reserved for the operating system to used in toolbars, menus, etc. Each operating system, Windows and Macintosh, would reserve between 16 and 20 different colors. It allows exactly six shades each of red, green, and blue (6x6x6 = 216). Only 216 of the basic 256 would display without dithering. Dithering is a method of using more than one color to create another color that is not available. Dithered colors usually look grainy or speckled. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 What is web safe color?
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Sample of an image dithered using 216 web safe colors Original image Image dithered using 216 web safe colors
Color-coding for web color 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 CSS colors codes for web and displays are made up of 3 sets of hex numbers , one for Red , one for Green , and one for Blue . The code is always written in the same exact order Red , Green , Blue . Each color has two channels or a pair of hexadecimal color so that each color has the potential for 256 values (0-255). Thus the double code for each color. Red Green Blue FF CC 66 =
Color-coding for primary web colors 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 To produce pure colors, leave two colors at 0, and set the value for the third (desired color). If all values are set to 0, the screen will be black. If all values are set to the maximum (hex FF, decimal 255) the screen will be white. Remember, black is the absence of all color and white is the presence of all color.
Web safe color values 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Web-safe colors are expressed in percentages of 20%, 51 for decimal, and 33 in hex. decimal hex percentage 0 00 0 51 33 20 102 66 40 153 99 60 204 CC 80 255 FF 100 Remember 6 x 6 x 6 = 216 Web safe colors will always use the same number for both values of a color channel and use only 0, 3, 6, 9, C and F in coding. This makes it easy to write and identify web safe colors.
Sample of web safe colors and non-web safe colors 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502
Common patterns and shorthand for coding 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 For each RGB value both numbers or letters are the same. The web safe colors only use 0, 3, 6, 9, C and F. Shorthand hex notation uses a 3-character color for a hex triplet when each channel is identical RRGGBB. .dark-yellow {color:#ffcc00;} can be written as .dark-yellow {color:#fc0;} Shorthand produces smaller file sizes, smaller style sheets and faster loading pages
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Color for print Cyan , Magenta , Yellow and Black ( CMYK ) are the colors space used in the world of ink and paper, and it is sometimes called a subtractive color process. Subtractive color mixing means that one begins with white and ends with black; as one adds color, the result gets darker and tends to black. Cyan, magenta and yellow inks are combined to create thousands of other colors. These inks are mixed to specifications that are followed throughout the print industry so there is no variance from one commercial printer to another.
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Side-by-side comparison of the primary colors used in print and web When two of the three RGB colors are mixed at the strongest intensity the result will be a secondary color. A secondary color is formed by the sum of two primary colors of equal intensity: cyan is green+blue , magenta is red+blue , and yellow is red+green .
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Sample of RGB (web) colors converted to CMYK (print) colors RGB Colors Converted to CMYK values
07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 References Itten, Johannes. The Elements of Color. Pages 15, 21, 30. Van Nostrand Reinhold Company. New York. Lem, Dean Phillip. Graphics Master 3 . Page 19. Dean Lem Associates, Inc. Los Angeles. Pantone Color Suite for the Internet. Pages 5, 13-16. Pantone Inc. Bruno, Michael H. Pocket Pal: A Graphic Arts Production Handbook (16th ed.). International Paper. Memphis. http://www.2createawebsite.com

More Related Content

Color for web and print

  • 1. Color for Web and Print 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502
  • 2. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Color originates from sunlight. All the colors of the spectrum are present in white light (sunlight). An object will reflect a particular wavelength of light and absorb all other wavelengths. Our eyes see the reflected wavelength. How we see color
  • 3. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Additive color involves light emitted from a source or illuminant. Additive color mixing begins with black and ends with white; as more color is added, the result is lighter and tends to white. Additive color (light) uses the colors red, green and blue to produce all other colors . Color and light emitting media
  • 4. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Computer monitors, LED and LCD displays, televisions, cell phones and a wide variety of electronic media devices use pixels to display color. The pixels (red, green, blue) do not overlap but rather sit side-by-side. When a green color appears, only the green pixels light up. When a cyan color appears, both green and blue pixels light up. When white appears all the pixels light up. Because the pixels on our displays are so small and close together our eyes blend them together, having a similar effect as additive light. How color is created on a color display
  • 5. Pixel is a computer word formed from PICture ELement, because a pixel is the smallest element of the digital image. The colors in pixels are really just RGB data values. If you enlarge an image in photoshop or another photo editing program, you will see that the image gets very rough or pixilated. Each of these little pixels has an RGB numeric value. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 What is a pixel?
  • 6. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 A digital image is made up of individual pixels. Each pixel has its own RGB numeric value.
  • 7. What is hexadecimal? 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Computers store information in single ones and zeros. Each one (1) and zero has a single value called a bit. By counting in base 16 (hexadecimal) we can pack more values into a single space. Hex means six (6) Dec means ten (10) Hexadecimal means sixteen (16)
  • 8. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Hex Decimal 0 = 0 1 = 1 2 = 2 3 = 3 4 = 4 5 = 5 6 = 6 7 = 7 8 = 8 9 = 9 A = 10 B = 11 C = 12 D = 13 E = 14 F = 15 For example: Decimal 0 is equal to 0 in hex. Decimal 5 is equal to 5 in hex. Decimal 10 is equal to A in hex. Decimal 15 is equal to F in hex. Decimal 16 is equal to 10 in hex. Decimal 17 is equal to 11 in hex. Decimal 255 is equal to FF in hex. Hexadecimal numerology and decimal equivalents
  • 9. How does hexadecimal relate to color? 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Scientist found that the human eye can only distinguish between 256 shades of a primary color. 16 x 16 = 256 so all shades of a specific color can be expressed with just two hexadecimal digits. 256 = FF in hexadecimal coding. In theory the eye can see more than 16 million colors. For each Red, Green and Blue cone in the eye there are 256 possible shades of each color; 256 (Red) x 256 (Blue) x 256 (Green) = 16,777,216 possible colors
  • 10. Early color monitors could only display 256 colors. Certain colors were reserved for the operating system to used in toolbars, menus, etc. Each operating system, Windows and Macintosh, would reserve between 16 and 20 different colors. It allows exactly six shades each of red, green, and blue (6x6x6 = 216). Only 216 of the basic 256 would display without dithering. Dithering is a method of using more than one color to create another color that is not available. Dithered colors usually look grainy or speckled. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 What is web safe color?
  • 11. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Sample of an image dithered using 216 web safe colors Original image Image dithered using 216 web safe colors
  • 12. Color-coding for web color 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 CSS colors codes for web and displays are made up of 3 sets of hex numbers , one for Red , one for Green , and one for Blue . The code is always written in the same exact order Red , Green , Blue . Each color has two channels or a pair of hexadecimal color so that each color has the potential for 256 values (0-255). Thus the double code for each color. Red Green Blue FF CC 66 =
  • 13. Color-coding for primary web colors 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 To produce pure colors, leave two colors at 0, and set the value for the third (desired color). If all values are set to 0, the screen will be black. If all values are set to the maximum (hex FF, decimal 255) the screen will be white. Remember, black is the absence of all color and white is the presence of all color.
  • 14. Web safe color values 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Web-safe colors are expressed in percentages of 20%, 51 for decimal, and 33 in hex. decimal hex percentage 0 00 0 51 33 20 102 66 40 153 99 60 204 CC 80 255 FF 100 Remember 6 x 6 x 6 = 216 Web safe colors will always use the same number for both values of a color channel and use only 0, 3, 6, 9, C and F in coding. This makes it easy to write and identify web safe colors.
  • 15. Sample of web safe colors and non-web safe colors 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502
  • 16. Common patterns and shorthand for coding 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 For each RGB value both numbers or letters are the same. The web safe colors only use 0, 3, 6, 9, C and F. Shorthand hex notation uses a 3-character color for a hex triplet when each channel is identical RRGGBB. .dark-yellow {color:#ffcc00;} can be written as .dark-yellow {color:#fc0;} Shorthand produces smaller file sizes, smaller style sheets and faster loading pages
  • 17. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Color for print Cyan , Magenta , Yellow and Black ( CMYK ) are the colors space used in the world of ink and paper, and it is sometimes called a subtractive color process. Subtractive color mixing means that one begins with white and ends with black; as one adds color, the result gets darker and tends to black. Cyan, magenta and yellow inks are combined to create thousands of other colors. These inks are mixed to specifications that are followed throughout the print industry so there is no variance from one commercial printer to another.
  • 18. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Side-by-side comparison of the primary colors used in print and web When two of the three RGB colors are mixed at the strongest intensity the result will be a secondary color. A secondary color is formed by the sum of two primary colors of equal intensity: cyan is green+blue , magenta is red+blue , and yellow is red+green .
  • 19. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 Sample of RGB (web) colors converted to CMYK (print) colors RGB Colors Converted to CMYK values
  • 20. 07/12/10 Color for Web and Print Elaine Rettger ASU EDT 502 References Itten, Johannes. The Elements of Color. Pages 15, 21, 30. Van Nostrand Reinhold Company. New York. Lem, Dean Phillip. Graphics Master 3 . Page 19. Dean Lem Associates, Inc. Los Angeles. Pantone Color Suite for the Internet. Pages 5, 13-16. Pantone Inc. Bruno, Michael H. Pocket Pal: A Graphic Arts Production Handbook (16th ed.). International Paper. Memphis. http://www.2createawebsite.com