TODAY Computer components Binary numbers Text representation Color representation ( THE CS 115: COMPUTING FOR SOCIO-TECHNO WEB REPRESENTATION OF TEXT, NUMBERS AND CODE STANDARD COLORS All standards-compliant browsers should handle these color names These color names can be used with the CSS properties of color and background-color: RGB COLOR The human retina has three kinds of color-sensitive photoreceptors that were traditionally called red, green and blue cones Visible colors can be created by adding different amounts of the three primary colors, red, green and blue Color monitors display colors by adding different amounts of red, green and blue light RGB color components are usually defined on a scale from 0 to 255 For other colors, it s safest to use a numerical representation Over 16 million colors can be represented this way!
EXPLORE RGB COLOR 1) What shades are created when all three primary colors are equal? COLOR IN CSS Specifying turquoise using rgb in CSS: 2) Look at the following colors: red, yellow (=red+green), green, aqua (=green+blue), blue, fuchsia(=red+blue) How can you make a color brighter or darker? 3) Create the following colors: Steel Blue Deep Pink Khaki FROM BINARY TO HEXADECIMAL Hexadecimal Notation R G B decimal 0-255 0-255 0-255 hexadecimal 00-FF 00-FF 00-FF Numbers in the range 0-255 are represented in base 16, using two digits that each have 16 values, drawn from 0..9, A..F decimal hexadecimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 0 1 2 3 4 5 6 7 8 9 A B C D E F Converting decimal to hexadecimal: (1) Left digit: divide by 16, convert quotient to 0..9,A..F (2) Right digit: convert remainder to 0..9,A..F Example: 201 10 à C9 16 (1) 201/16 = 12 10 à C 16 (2) remainder is 9 10 à 9 16 Converting hexadecimal to decimal: (1) Convert left digit to 0..15, multiply by 16 (2) Convert right digit to 0..15, add to (1) Example: A7 16 à 167 10 (1) A 16 is 10 10, 10*16 = 160 (2) 7 16 = 7 10 à 160+7 = 167
Hexadecimal Colors CONVERTING NUMBERS In pairs: try the following conversions (you can use a calculator): R G B decimal 0-255 0-255 0-255 hexadecimal 00-FF 00-FF 00-FF Decimal 7 26 255 Hexadecimal 240 100 Using hexadecimal colors in CSS: blockquote { color: #9400D3; background-color: #E6E6FA; } HOW ARE IMAGES REPRESENTED IN A COMPUTER?
B&W IMAGE REPRESENTATION An image is represented as a 2D array of pixels Its dimensions: say, w pixels wide by h pixels high DIGITAL IMAGES Images are often represented in a computer as a 2-dimensional (2D) array of pixels. Each pixel is a small square on the screen Resolution: How many pixels a screen can represent Each pixel has a color associated with it If the color can be either black or white, then one needs only 1 bit per pixel 1 = black; 0 = white Size of a B&W image: w * h * 1 bits = (w * h)/8 B A 640 x 480 BW image takes 38,400 B = 37.5 KB (1KB = 1024 B) 38 pixels high 44 pixels wide BIT DEPTH Since each color value is a number between 0 and 255 and we use 8 bits to represent such a number, we use 8+8+8=24 bits to fully represent all RGB colors How many different colors do we represent? 2 24 = Are they enough? Size of a true-color image: w * h * 24 bits = (w * h*24)/8 B A 640 x 480 color image takes 921,600 B = 900 KB! The number of bits used in an image is called the bit-depth For true-color, bit-depth is 24 But we can represent images using fewer colors (e.g., with smaller bit depth) 1 4 8 24 COMPRESSION FORMATS 24 bits (bit-depth) are enough to represent up to 16 million different colors A particular photograph, even though it may be very colorful, it may not need all 24 bits to be represented because it will likely not use all of them JPG is a compression format that allows the image to be stored using far fewer than 24 bits/pixel When we save an image as jpg we actually compress it. As a result, the quality of the image will degrade so that the compression image may lose some of its quality
INDEXED COLOR INDEXED COLOR 0 1 0 1 0 1 2 3 2 1 0 3 0 3 0 1 2 3 2 1 0 1 0 1 0 image image contents index color 0 1 2 3 color palette index color 00 #0000FF 01 #00FF00 10 #FFFF00 11 #00FFFF 2 bits per pixel 24 bits per color How large is a file that stores a 300x500 pixel indexed color image with 4 colors, and its color palette? (1) 300x500 pixels, with 2 bits per pixel (why?) 300 x 500 x 2 = 300,000 bits (2) 4 colors, with 24 bits per color 4 x 24 = 96 bits à ~37.5kB (compared to the 450kB uncompressed file!) INDEXED COLOR How large is a file that stores a 300x500 pixel indexed color image with 16 colors, and its color palette? (1) What is the number of bits used to store the image pixels? (2) What is the number of bits used to store the color palette? Total file size (in bytes): bits per pixel is also called the bit depth bit depth must be large enough to store all of the colors bit-depth max colors 1 2 2 4 3 8 4 16 5 32 6 64 7 128 8 256 LIMITED PALETTE IMAGE REPRESENTATION If we use a computer application (e.g., fireworks) to create a drawing, we likely are going to use far fewer than 16 million colors GIF is a image format that uses only 256 colors (it determines the best 256 colors for the image) A gif image uses only 1byte/pixel, plus the table to remember which particular 256 colors it uses (its palette )
GIF Indexed Color The GIF file format is an indexed color format that allows 256 colors (out of a possible 16 million colors!) Computing the file size for a GIF image, in bytes: (1) number of bytes to store the image pixels: (width * height * bit-depth) / 8 (2) number of bytes to store the color palette: num_colors * 3 (3) total number of bytes * : (width * height * bit-depth) / 8 + 3 * num_colors (4) divide by 1,000 or 1,000,000 to convert to kilobytes or megabytes * There s also a small amount of fixed overhead for storing file type, dimensions, etc.