COLOR BASICS Cantcolor Open this jpg Read the

  • Slides: 23
Download presentation
COLOR BASICS

COLOR BASICS

Cantcolor ■ Open this jpg ■ Read the actual color name, so red for

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.

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.

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

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 ■

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 1 0 0 1 1 0

Measuring Color – 24 bit RGB color ■ Back to RGB – 24 bit

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 (0000 in binary) none of that color ■ If a value is 255 (1111 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

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

Hex Decimal 0 0 1 1 2 2 3 3 4 4 5 5

Hex Decimal 0 0 1 1 2 2 3 3 4 4 5 5 6 6 ■ One hexadecimal character represents 16 possible states 7 7 8 8 ■ Usually 2 characters 9 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) ■ 00=0, FF=255

Measuring Color – Hex Conversion ■ Hex values usually consist of 2 Hex characters

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 # ■

Measuring Color – Hex Colors ■ Hex color numbers usually start with # ■ Usually 2 characters for each red, green, blue ■ #FF 0000 = Red ■ #00 FF 00 = Green ■ #0000 FF = 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

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,

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 ■

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

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

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

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

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

Shades ■ Monochromatic ■ Most calming

Shades ■ Monochromatic ■ Most calming

Use your color ■ Once you have a color identified, Can find the color

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

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,

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-colorig. jpg? t=1474905933766 ■ http: //burnettsboards. com/wp-content/uploads/2013/06/color-meanings

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