Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
colormixers PowerPoint Presentation
Download Presentation
colormixers

colormixers

173 Views Download Presentation
Download Presentation

colormixers

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. colormixers.com

  2. Physics

  3. Physics of Light • Electromagnetic Spectrum • Visible light is a small part • 400 nm • 700 nm

  4. Physics of Light • Black = no light • White = equal amounts of each • 3 Primary Colors • Red, Green Blue • Humans don’t see all colors equally

  5. Physics of Light • Most is Green (middle) • little Red • little Blue • HIGH amounts of Luminance / Brightness / Gray

  6. Is it really brown?

  7. Humans • Humans interpret colors • White is “loosely” interpreted • Physiology applies, as A.I. research is showing, our perception of colors of an object isn’t absolute • Current Claim: you can see ≈ 1-2 million colors

  8. Mock Banding • Seeing something that is NOT there • Humans look for contrast too much • Below you should see extra shades near the edges of high contrast below • Anti-aliasing is used to counter this

  9. Color Models • RGB - additive model (computers) • YUV - goofy additive model (tv,jpg) • RYB - subtractive model (paint) • HSB - subtractive model (paint / graphic artists) • CMYK - subtractive model (print)

  10. Additive Models • The Light model • Adding colors produces lighter colors • Add all colors = white • Add no colors = black • Opposite of paint/print

  11. RGB • Corresponds with the light physics • Red Green Blue Light • Computers, digital devices • 3 Bytes: 0-255 or 00-FF (hex) • Monitors can’t reproduce • 16.7 million possible colors

  12. #000000 = Black#FFFFFF = White #FF0000 #FF00FF #FFFF00 #0000FF #00FF00 #00FFFF

  13. YUV • Additive but limited in range • Models human perception • Y=Luminance: brightness • U: Extracted Blue, tied to Y • V: Extracted Red, tied to Y • Less colors than RBG (less gamut)

  14. result Y U V

  15. YCbCr / YCC / YPbPr • Similar to YUV - JPEG, MPEG, cameras • Y = Luminance (brightness) most important • Cb & Cr = are Blue & Red • Difference is in how the 2 color components are calculated

  16. Chroma subsampling • U/V (Cb/Cr) • Cut down quality • These are lesser noticed colors anyhow

  17. Subtractive Models • Reflection of the light; the inverse • Paint / Print • The color you see is the reflected light, the other colors are absorbed! • “Subtractive” because it subtracts light

  18. RYB • Red Yellow Blue • Painting / Art School • Psychological & Traditional • Add all colors you get black • Take away all color you get white • Not typically used on computers

  19. CMY / CMYK • Cyan Magenta Yellow Black • Similar to RYB • Standard printing ink colors • K (black) because its hard & costly to mix all inks • Less colors possible than RGB (gamut)

  20. HSB / HSL / HSV • Hue Saturation • Brightness / Lightness / Value • Traditional paint-based description • Hue= color; degrees around a wheel • Saturation= 0-100% (how much color) • Brightness= 0-100%

  21. HSB / HSL / HSV • Popular model • Pick a Hue • Pick Saturation • Pick Brightness / Lightness / “Value”

  22. HSB / HSL / HSV • Verbal descriptions fit best • Has as many colors as RGB does • requires fractional percent • often missing needed precision • Circular arrangement makes picking schemes easier (so they say)

  23. HUE Saturation Brightness

  24. Other Models • There are MANY subtractive color models for art • Long history with many opinions, techniques, styles, models etc. • Few use additive color model • Some exist solely for design and have no basis in physics or ink mixing!

  25. Color Schemes • Lots of factors influence wether a color scheme is “good” = no absolute rules • Makes use the Traditional Art Color wheel • Primary colors on the wheel are RYB

  26. Primary Colors • Red • Yellow • Blue

  27. Secondary Colors • Mixed primary colors (RYB) • Orange • Green • Purple • Thought of as “weaker” colors

  28. Tertiary Colors • Yellow-Green • Yellow-Orange • Red-Orange • Red-Violet • Blue-Violet • Blue-Green

  29. Art 12 Color Wheel • Conceptual foundation • HUE Based • Brightness & Saturation are “add-ons”

  30. Visual Contrast • Contrast of “Value” (Brightness) • Contrast of Hue (Which Color) • Contrast of Temperature • Contrast of Proportion • Contrast of Saturation • Complementary Contrast • Simultaneous Contrast

  31. Contrast of “Value” • Humans see light / dark contrast more than any color and we seek the edges • Quickest way to confuse a user is to lack contrast (similar for everything)

  32. Contrast of Hue • Flags and Symbols use these • Strong Hue (color) changes (not shades) • Makes it look more busy • Undermines cohesiveness of the whole

  33. Contrast of Temperature • Warm & Cool • The difference between them creates a contrast • Psychological, metaphorical • The mind groups these colors and makes them opposite - and notices the transitions (contrast)

  34. Contrast Proportion • Hues are given a relative value • Red and Green can be used in similar amounts (space covered) • Blue is ⅔ and Orange is ⅓ • Formal way of saying don’t use too much of one color vs another.

  35. Contrast of Saturation • Humans also will linger on high colored areas • Logos and Flags also use this • A few films used the extreme of this

  36. Complementary Contrast • Placing opposing hues near each other • Each makes the other look more intense - psychological • “balance” in our field of vision • Can cause retinal fatigue

  37. Simultaneous Contrast • A color is altered by the surroundings! (see Ted talk) • Hue, Brightness, Saturation, Temperature are all impacted • Dark/Bright backgrounds can make a color seem lighter/darker • Saturation is also relative