ITP 140 Mobile App Technologies Colors
Colors in Photoshop RGB Mode CMYK Mode L*a*b Mode HSB Color Model 2
RGB Mode Based on the RGB color model Called an additive color model because adding all the colors together produces white which reflects all light back to the eye RGB colors are created by setting red, green and blue to values between 0-255 When all three values are 0, black is produced. When all three values are 255, is produced. 3
Color RGB Color Model Red Green Blue (0, 0, 0) is black (255, 255, 255) is (255, 0, 0) is red (0, 255, 0) is green (0, 0, 255) is blue (255, 255, 0) is yellow (0, 255, 255) is cyan (255, 0, 255) is magenta 4
CMYK Mode Base colors are (C), (M), (Y) and black (K is used to distinguish it from B for blue) Theoretically, C, M, and Y combined should produce pure black Called a subtractive color model In reality, pure black is not produced with this combination of inks so black is included White is produced when all values are set to 0% Used in images that will be output to a print medium using ink 5
L*a*b Mode Based on the human perception of color Designed to be device-independent Consistent color viewed on a monitor screen or printed 3 color components L (lightness component) is the brightness value and ranges from 0 to 100 a component (green-red axis) ranges from +127 to -128 b component (blue-yellow axis) and ranges from +127 to -128 Used internally by Photoshop in converting from one color mode to another 6
HSB Color Model A color model, not a color mode Provides an intuitive way to mix and adjust colors HSB stands for Hue, Saturation, and Brightness A hue is a shade of color such as orange, blue, purple Saturation determines the strength of the hue Brightness is the lightness/darkness of a color 7
What's the #? The value after the # is a hexadecimal number 8
Decimal Our numbering system is decimal Dec means 10 Example a decathlon has 10 events The unique 10 digits that make up the decimal numbering system are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 We say that decimal is base 10 9
Example of Decimal 231 = 200 30 1 = 2 * 100 3 * 10 1 * 1 = 2 * 10 2 3 * 10 1 1 * 10 0 10
Binary Computers use magnetic memory (or transistors) for storing information Smallest capacity for storage is a single magnetic charge, either positive or negative Positive charge means a 1 Negative charge means a 0 The 2 digits that we use for binary are 0s & 1s The digits in a binary number are called bits (short for binary digit) Binary is base 2 Binary 1000 0100 0010 0001 Exponent 2 3 2 2 2 1 2 0 Decimal 8 4 2 1 11
Example of Binary 1010 = 1 * 2 3 = 0 * 2 2 1 * 2 1 0 * 2 0 1 * 8 0 * 4 1 * 2 0 * 1 = 8 0 2 0 = 10 12
Binary (4 bit) to Decimal Binary à Decimal 0000 0+0+0+0 0 0001 0+0+0+1 1 0010 0+0+2+0 2 0011 0+0+2+1 3 0100 0+4+0+0 4 0101 0+4+0+1 5 0110 0+4+2+0 6 0111 0+4+2+1 7 Binary à Decimal 1000 8+0+0+0 8 1001 8+0+0+1 9 1010 8+0+2+0 10 1011 8+0+2+1 11 1100 8+4+0+0 12 1101 8+4+0+1 13 1110 8+4+2+1 14 1111 8+4+2+0 15 With 4 bits, we get the values of 0 15 If the binary number ends with a 1, it is odd 13
Binary (8 bit) to Decimal Binary à Decimal 00000000 0 + 0 + 0 + 0 + 0 + 0 + 0 + 0 0 00001111 0 + 0 + 0 + 0 + 8 + 4 + 2 + 1 15 00010000 0 + 0 + 0 + 16 + 0 + 0 + 0 + 0 16 00011111 0 + 0 + 0 + 16 + 8 + 4 + 2 + 1 31 00100000 0 + 0 + 32 + 0 + 0 + 0 + 0 + 0 32 00111111 0 + 0 + 32 + 16 + 8 + 4 + 2 + 1 63 01000000 0 + 64 + 0 + 0 + 0 + 0 + 0 + 0 64 01111111 0 + 64 + 32 + 16 + 8 + 4 + 2 + 1 127 10000000 128 + 0 + 0 + 0 + 0 + 0 + 0 + 0 128 11111111 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 255 14
Bits & Bytes With 8 bits (binary digits), we get the decimal values of 0 255 8 bits = 1 byte Remember the RGB color mode Each color has a value from 0 to 255 We use 8 bits (or 1 byte) for each color 8 x 3 (3 colors) = 24 bits to store color 15
Reverse of Binary to Digital Decimal to Binary 25 10 = 16 + 8 + 0 + 0 + 1 = 2 4 + 2 3 + 0 + 0 + 2 0 = 1 1 0 0 1 2 16
Repeat Division Decimal to Binary 25 / 2 = 12 + remainder of 1 (LSB) 12 / 2 = 6 + remainder of 0 6 / 2 = 3 + remainder of 0 3 / 2 = 1 + remainder of 1 1 / 2 = 0 + remainder of 1 (MSB) 25 10 = 1 1 0 0 1 2 LSB = Least Significant Bit MSB = Most Significant Bit Algorithm of Repeat Division 17
Geek Joke 18
Hexadecimal We often represent computer data in hexadecimal hex = 6 and dec = 10 hexadecimal = 6 + 10 = 16 It is base 16 The unique 16 digits are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f 0 9 and a f (or A F) Every 4 bits is a single hex digit Since 4 bits can represent numbers from 0 to 15 19
Bin (4 bit) à Dec & Hex Binary B à D Decimal Hex 0000 0+0+0+0 0 0 1010 8+0+2+0 10 A 1011 8+0+2+1 11 B 1100 8+4+0+0 12 C 1101 8+4+0+1 13 D 1110 8+4+2+0 14 E 1111 8+4+2+1 15 F 20
Bin (8 bit) à Hex & Dec Binary B à H Hex B à D Dec 0001 0000 0+0+0+1 0+0+0+0 10 0+ 0+ 0+16+0+0+0+0 16 0001 1111 0+0+0+1 8+4+2+1 1F 0+ 0+ 0+16+8+4+2+1 31 0010 0000 0+0+2+0 0+0+0+0 20 0+ 0+32+ 0+0+0+0+0 32 0011 1111 0+0+2+1 8+4+2+1 3F 0+ 0+32+16+8+4+2+1 63 0100 0000 0+4+0+0 0+0+0+0 40 0+64+ 0+ 0+0+0+0+0 64 0101 1010 0+4+0+1 8+0+2+0 5A 0+64+ 0+16+8+0+2+0 90 0111 1111 0+4+2+1 8+8+2+1 7F 0+64+32+16+8+4+2+1 127 1000 0000 8+0+0+0 0+0+0+0 80 128+ 0+ 0+ 0+0+0+0+0 128 1100 0010 8+4+0+0 0+0+2+0 C2 128+64+ 0+ 0+0+0+2+0 194 1111 1111 8+4+2+1 8+4+2+1 FF 128+64+32+16+8+4+2+1 255 21
Bits, Bytes & Hex Combine 8 bits, and we have a byte 4 bits is a single hex digit Examples: 0000 binary = 0 hex, 1111 binary = F hex 8 bits = 2 hex digits Easy to represent a byte in hexadecimal Examples: 56 10 = 00111000 2 = 38 16 255 10 = 11111111 2 = FF 16 22
Computer Graphics Traditionally, computers use a combination of 3 colors (red, green, blue) to represent the color of every pixel on the screen Every pixel has an intensity equal to one byte for every color called the RGB color Pixel = smallest unit for representing an image on a computer dots on the screen Smallest intensity for a color in a pixel is 0000 0000 (8 bits) Largest intensity for a color in a pixel is 1111 1111 (8 bits) Black = #000000 #FFFFFF Everything with colors on a computer can be done with math! To lighten a color, simply add to the intensity, to darken simply decrease the intensity 23