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