Color Background. What is Color? Aspect of vision Physical reaction of the eye and the automatic...
-
Upload
georgia-simon -
Category
Documents
-
view
215 -
download
0
Transcript of Color Background. What is Color? Aspect of vision Physical reaction of the eye and the automatic...
Color
Background
What is Color?
Aspect of vision
Physical reaction of the eye and the automatic interpretive response of the brain to wavelength characteristics of light
Color is light - different wavelengths are seen as different colors
What is Color?
Color is what we perceive as a result of different wavelengths of light.
E.g., Sounds with long wavelengths = low noise.
Light with long wavelength displays different colors than light with short wavelengths.
Source: Bennett, J. (2005). Design Fundamentals for New Media. Thomson Delmar Learning: New York.
Long
Short
What is Color?
Gamut: refers to the entire spectrum of colors available for use in a specific medium.
The entire visual spectrum.
White triangle –colors that can be produced by a monitor.
Black area – colors that can be produced using the CYMK color system for printing
Source: Bennett, J. (2005). Design Fundamentals for New Media. Thomson Delmar Learning: New York.
MonitorCYMK - print
Computer monitor
Monitor made up of Red, Green and Blue dots. See them as homogenous color. RGB Color
EXAMPLE: If red and green dots are at 100%, while blue dots not lit, we see yellow color.
Dots can have value from 0 to 255.
Total number of possible colors is 256*256*256 = 16,777,216.
RGB Colors
Color represented by three numbers: 0, 0, 255 First number represents red Second represents green Third represents the blue.
Pure blue color is 0, 0, 255.
Colors | Terms
Hue - the edges of the square Saturation – where color is placed between grey
middle and the colored edge Value (i.e., brightness or luminance) the intensity
of the color and is the third attribute.
http://www.colorotate.org/
Colors
Contrasting colors (complements) are diametrically opposite on the color circle.
Color complements
Red, Yellow, Blue primary colors Colors opposite primary are complements
Green complement Red Purple complement Yellow Orange complement Blue
After Image will be Green
Brain absorbs color and tries to balance total absorption of Red with its complement, Orange
Source: http://poynterextra.org/cp/colorproject/color.html
After Image will be Orange
After Image will be Purple
Need a model that relates subjective sensation of color to measurable phenomena
Color & Science
Color Models1. An artist’s color wheel: red, yellow, and blue
(RYB)
2. Additive color: red, green, blue (RGB)
3. Subtractive color: cyan, magenta, yellow, and black (CMYK)
4. Hue, saturation, and brightness (HSB)
A color wheel
Varying saturation, with brightness held constant
Varying brightness, with saturation held constant
Four Color-Harmony Schemes
Monochromatic: colors of same or similar hue, differing in brightness and/or saturation
Complementary: colors approximately opposite each other on a color wheel
Analogous: colors adjacent to each other, from any segment of a color wheel
Triadic: three colors approximately equally spaced around a color wheel
http://kuler.adobe.com/#create/fromacolor
Monochromatic color harmony:
All blue All orange
colors of same hue, differing in brightness and/or saturation
H16,S92,B38
H16,S84,B100
H16,S18,B100
Monochromatic color harmony:
Monochromatic example
Complementary
Two opposite colors with any brightness or saturation
Complementary: various blues, with red-orange highlights
http://designwashere.com/complementary-colors-in-web-design/
Complementary
Analogous
Two or more colors with hues close together.
Analogous
Analogous: red-orange through yellow-green
Triadic:
Any three colors spaced equally around CW.
Triadic: red, yellow, blue
Triadic: red, yellow, blue
240, 74, 80
55, 42, 100
351, 63, 83
240, 59, 57
55, 91, 91
HSB values
Sites | Color
http://websitetips.com/colortools/sitepro/
http://colormixers.com/mixers/cmr/
http://colorschemedesigner.com/
http://learn.colorotate.org/learn-more.html
http://www.devwebpro.com/25-popular-color-scheme-and-palette-generators/
http://www.allwebdesignresources.com/webdesignblogs/graphics/webdesigncolorcombinationsguide/
Specifying Color
HexadecimalHexadecimal
Color
Often for Web documents, colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).
The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF)
Color
Hexadecimal value: FF0000Hexadecimal value: FF0000
FF 00 00FF 00 00
Red
GreenBlue
0123456789ABCDEF
Hexadecimal based-16
Red value = 10 Hex value = 0a
Red value = 11 Hex value = 0b
Blue value = 16 Hex value = 10
Blue value = 26 Hex value = 1a
Green value = 31 Hex value = 1fGreen value = 32 Hex value = 20
101112131415161718191A1B1C1D1E1F - 31
F0F1F2F3F4F5F6F7F8F9FAFBFCFDFE - 254FF - 255
0 1 2 3 4 5 6 7 8 9 A B C D E F
000102030405060708090A0B0C0D0E0F
RGB Values: 0 – 255
Hexadecimal: 00 - FF
Starts With 0 1 2 3 4 5 6 7 8 9 A B C D E F
RGBVal
HEX
RGB
0 00 16 10 3220 48
30 64
40 80
50 96
60 112
70 128
80 144
90 160
A0 176
B0 192
C0 208
D0 224
E0 240
F0
1 01 17 11 3321 49 1 65 1 81 1 97 1 113 1 129 1 145 1 161 1 177 1 193 1 209 1 225 1 241 1
2 02 18 12 3422 50 2 66 2 82 2 98 2 114 2 130 2 146 2 162 2 178 2 194 2 210 2 226 2 242 2
3 03 19 13 3523 51 3 67 3 83 3 99 3 115 3 131 3 147 3 163 3 179 3 195 3 211 3 227 3 243 3
4 04 20 14 3624 52 4 68 4 84 4 100 4 116 4 132 4 148 4 164 4 180 4 196 4 212 4 228 4 244 4
5 05 21 15 3725 53 5 69 5 85 5 101 5 117 5 133 5 149 5 165 5 181 5 197 5 213 5 229 5 245 5
6 06 22 16 3826 54 6 70 6 86 6 102 6 118 6 134 6 150 6 166 6 182 6 198 6 214 6 230 6 246 6
7 07 23 17 3927 55 7 71 7 87 7 103 7 119 7 135 7 151 7 167 7 183 7 199 7 215 7 231 7 247 7
8 08 24 18 4028 56 8 72 8 88 8 104 8 120 8 136 8 152 8 168 8 184 8 200 8 216 8 232 8 248 8
9 09 25 19 4129 57 9 73 9 89 9 105 9 121 9 137 9 153 9 169 9 185 9 201 9 217 9 233 9 249 9
100A 26
1A 42
2A 58 A 74 A 90 A 106 A 122 A 138 A 154 A 170 A 186 A 202 A 218 A 234 A 250 A
110B 27
1B 43
2B 59 B 75 B 91 B 107 B 123 B 139 B 155 B 171 B 187 B 203 B 219 B 235 B 251 B
120C 28
1C 44
2C 60 C 76 C 92 C 108 C 124 C 140 C 156 C 172 C 188 C 204 C 220 C 236 C 252 C
130D 29
1D 45
2D 61 D 77 D 93 D 109 D 125 D 141 D 157 D 173 D 189 D 205 D 221 D 237 D 253 D
140E 30
1E 46
2E 62 E 78 E 94 E 110 E 126 E 142 E 158 E 174 E 190 E 206 E 222 E 238 E 254 E
15 0F 31 1F 472F 63 F 79 F 95 F 111 F 127 F 143 F 159 F 175 F 191 F 207 F 223 F 239 F 255 F
Web site
http://poynterextra.org/cp/colorproject/color.html