Color Basics

Cantcolor Open this jpg Read the actual color name, so red for the last one say “Green”

Color Models - CMYK Cyan, Magenta, Yellow, Black Used in print production. Print uses reflected (subtractive) light model Ink masks (absorbs) light that would usually be reflected from a white background… you are “subtracting” brightness Start with white, and as you add inks, you build towards black Cyan, Magenta, Yellow used in different amounts – theoretically, maximum equal amounts of these inks produce black Not cost effective, so black ink is used to achieve black

Color Models - RGB Red, Green, Blue Used in screen (i.e. web) production. Screen uses emitted (additive) light model CRT (box tvs/monitors) had phosphors – substance that glowed when stimulated with an electron gun LCD accepts energy in one form (electric current) and emits various colors Start with black (no light emitted) then add various Red, Green, Blue – maximum equal amounts of each give white

Measuring Color – Bits first We talk about many colors in terms of Bits We measure how much Red, Green, and Blue a color has A bit is smallest unit of computer storage. It is a one or a zero – or something else (a reflective or non-reflective surface on a CD) that represents one of two states So, one bit = 2 possible values – 0 or 1 Two bits = 4 possible values – 00, 01, 10, 11 8 bits = 256 possible colors

Measuring Color – Powers of 2 Binary works in powers of 2 If there is a 1 in a given column, add that number to running total, if it’s a 0, don’t add The chart below helps translate the binary number 10010110 128+0+0+16+0+4+2+0 10010110 Binary = 150 128 64 32 16 8 4 2 1

Measuring Color – 24 bit RGB color Back to RGB – 24 bit color 8 bits for red, 8 for green, 8 for blue If a value is 0 (00000000 in binary) none of that color If a value is 255 (11111111 in binary) max of that value Max red shown here 0 note the RGB value

Measuring Color – 24 bit CMYK color Now CMYK Values of 0 to 100 for each component If a value is 0 none of that color If a value is 100 max of that value Max red shown here – combination of 100 Magenta and Yellow

Measuring Color – Hex Hexadecimal is another form of a number 1 2 3 4 5 6 7 8 9 A 10 B 11 C 12 D 13 E 14 F 15 Measuring Color – Hex Hexadecimal is another form of a number Unlunk decimal (10 “digits”, 0-9), hex uses 16 “digits”, 0-9 and A-F) One hexadecimal character represents 16 possible states Usually 2 characters 00=0, FF=255

Measuring Color – Hex Conversion Hex values usually consist of 2 Hex characters To convert from hex to decimal, take first number, multiply it by 16, then add second number Convert 32 in Hex to decimal 3*16=48 + 2 = 50 Convert AB In hex to Decimal 10 * 16 = 160 + 11 = 171

Measuring Color – Hex Colors Hex color numbers usually start with # Usually 2 characters for each red, green, blue #FF0000 = Red #00FF00 = Green #0000FF = Blue #000000 = Black #FFFFFF = White Any equal amount RGB– i.e. #333333 – will be a shade of gray…

Color Schemes – The Color Wheel Tool for combining colors to find a pleasing arrangement Helps you pick opposing colors to make a “color harmony” There are warm (red, yellow, orange) – energetic And cool (blue, green, purple) –soothing, calm White, Gray, Black – neutral

Adobe colors Go to color.adobe.com A color will be labeled, basic, your main color .. The colors 2 to the left, 2 to the right rae

Complementary colors Exciting, Vibrant, Dynamic Colors opposite each other on wheel Colors almost “fight” to cancel each other out if used in equal weight Note the rule Consider one color dominant, the other for highlights, instead of equal weight Avoid use for lots of text, great for logos

Analogous Harmonious, Pleasing Colors near each other on color wheel May require tweaking of contrast, for dominant color Nice components of an image, they blend

Monochromatic Soothing, Sedate, Clean Variations of a single color May require tweaking of contrast, for dominant color – it won’t “pop”

Triad Harmonious, good contrast Three equidistant spikes on color wheel Not as jarring as complementary, good possible choice for infographics/logos Consider one dominant, other two accent

Compound Two colors adjacent, two colors opposite Good contrast, less eye strain then complementary Not as jarring as complementary

Shades Monochromatic Most calming

Use your color Once you have a color identified, Can find the color value… Then reproduce that color exactly in the color panel If using Adobe CC at home, you could login to your account on the Adobe color site, save your color theme, then import the entire theme into Illustrator… But this is impractical in lab

Save your color Then, from the swatches panel, can add (save) the color Swatches panel, can add (save) the color – drag it down Note you can find a complimentary color from the panel menu

Message of color Red evokes excitement, youthfulness, and boldness Orange evokes friendliness, cheerfulness, and confidence Yellow optimism, clarity, and warmth Green evokes peace, growth, and health Blue evokes trust, dependability, and strength Purple evokes creativity, imagination, and prudence Gray evokes balance, neutrality, and calmness Not an exact science (for us) – but lots of research goes into use of color to influence!

Infographic Reading https://blog.hubspot.com/hs-fs/hub/53/file-1661939313-jpg/psychology-of-color- ig.jpg?t=1474905933766 http://burnettsboards.com/wp-content/uploads/2013/06/color-meanings1.jpg http://i.imgur.com/TjQYSMY.jpg http://coschedule.com/blog/color-psychology-marketing/#combos