Color and Computers

How computers talk about color and what it means for designers.

Transcript

1. Color and Computers Bryce Kerley Design Miami March 4, 2013 Monday, March 4, 13
2. Color and Computers •Describing Colors •What the heck is gamut? •Colors and Image Formats •Colors and HTML Monday, March 4, 13
3. Who am I? Consulting Engineer Burrito Enthusiast Basho Technologies bryce@basho.com @bonzoesc Monday, March 4, 13
4. Preemptive Pedantry Colors are a human concept ascribing sense and emotions to physics Monday, March 4, 13 This means that primary colors aren’t the same primary colors as grade school, for example.
5. Describing Colors Numbers Monday, March 4, 13
6. Additive vs. Subtractive •Light sources make color by adding multiple wavelengths •Red, Green, Blue (RGB) Monday, March 4, 13
7. Additive vs. Subtractive •Light reflectors (paper, ink, cars, leaves) make color by subtracting wavelengths •Cyan, Magenta Yellow Monday, March 4, 13
8. Addition vs. Subtraction White = Red + Green + Blue Light Green = Some Red + All Green + Some Blue Monday, March 4, 13 We’ll leave how color LCDs work to after-presentation chat.
9. Addition vs. Subtraction Green Leaves = White Sunlight - Everything But Green Black Railing = White Sunlight - Everything Monday, March 4, 13 It’s in the plant’s benefit to absorb as much light as possible. They skimp on the green part of the spectrum for some evolutionary reasons
10. RGB vs. CMY Diagrams from Wikipedia Monday, March 4, 13
11. CMY vs. CMYK Color printers have blacK ink because you mostly print black Usually looks nicer than C+M+Y because of precision and gamut Monday, March 4, 13
12. RGB vs. CMY vs. HSL RGB: Mixing light CMY: Subtracting light HSL: Perception Monday, March 4, 13
13. HSL Diagram from Wikipedia Monday, March 4, 13
14. HSL 0°, 100%, 25% - saturated dark red “I want green” 105°, 100%, 25% - saturated dark green “I like that green but I want less green” 105°, 50%, 25% - greyish dark green Monday, March 4, 13
15. HSL vs. HSB vs. HSV Slightly Different Make a computer convert http://colorizer.org/ Monday, March 4, 13
16. Color Spaces RGB CMY CMYK HSL HSV LAB CIE YUV YCbCr YPbPr Y’UV xvYCC Monday, March 4, 13 Most of these you won’t ever care about
17. What The Heck Is Gamut? Not every display method can reproduce every color Monday, March 4, 13
18. Gamut iPhone 1, 3G, 3GS: 18-bit color iPhone 4, 4S, 5: 24-bit color iMac (27” Late 2009): 24-bit color Brother HL-2170W: 1-bit color Monday, March 4, 13 I have a black-and-white laser printer
19. Gamut and Bits More bits = better than Conversions can lose gamut Monday, March 4, 13 Some 24-bit HSV colors not representable in 24-bit RGB Some 24-bit RGB colors not representable in 24-bit HSV
20. Gamut and Conversion Monday, March 4, 13 Don’t do it by hand.
21. Gamut and Calibration Depends on ambient light Depends on time of day Depends on season Monday, March 4, 13
22. Calibration and the Web Old smartphones 14” CRTs The cheapest 15” LCD An iPhone in direct sunlight Monday, March 4, 13
23. Calibration and the Web Don’t Bother Monday, March 4, 13
24. Image Formats GIF: Limited Colors Monday, March 4, 13
25. Image Formats JPEG: Artifacts Monday, March 4, 13
26. Image Formats PNG: File Size Monday, March 4, 13
27. Colors and HTML Don’t Monday, March 4, 13
28. Colors and CSS #F0F - 12-bit RGB, four bits/character #FF00FF - 24-bit RGB, four bits/character rgb(255, 0, 255) - 24-bit RGB, decimals hsl(300, 100%, 50%) - degrees and percents Monday, March 4, 13
29. Alpha 0% transparent 100% opaque Monday, March 4, 13
30. Alpha vs. Opacity Alpha modifies the color Opacity modifies the element Monday, March 4, 13
31. Colors and CSS rgba(255, 0, 255, 0.82) RGBA, decimals hsla(0, 0%, 100%, 0.82) HSL, degrees and percents Monday, March 4, 13
32. Color and Computers •Describing Colors •What the heck is gamut? •Colors and Image Formats •Colors and CSS Monday, March 4, 13
33. Links Why are leaves green? http://bit.ly/green- leaves http://en.wikipedia.org/wiki/ List_of_color_spaces_and_their_uses http://colorizer.org/ Playing around http://jsfiddle.net/st8jP/ Monday, March 4, 13