Color and Computers - Speaker Deck

Slide 1

Slide 1 text

Color and Computers Bryce Kerley Design Miami March 4, 2013 Monday, March 4, 13

Slide 2

Slide 2 text

Color and Computers •Describing Colors •What the heck is gamut? •Colors and Image Formats •Colors and HTML Monday, March 4, 13

Slide 3

Slide 3 text

Who am I? Consulting Engineer Burrito Enthusiast Basho Technologies [email protected] @bonzoesc Monday, March 4, 13

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Describing Colors Numbers Monday, March 4, 13

Slide 6

Slide 6 text

Additive vs. Subtractive •Light sources make color by adding multiple wavelengths •Red, Green, Blue (RGB) Monday, March 4, 13

Slide 7

Slide 7 text

Additive vs. Subtractive •Light reﬂectors (paper, ink, cars, leaves) make color by subtracting wavelengths •Cyan, Magenta Yellow Monday, March 4, 13

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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 beneﬁt to absorb as much light as possible. They skimp on the green part of the spectrum for some evolutionary reasons

Slide 10

Slide 10 text

RGB vs. CMY Diagrams from Wikipedia Monday, March 4, 13

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

RGB vs. CMY vs. HSL RGB: Mixing light CMY: Subtracting light HSL: Perception Monday, March 4, 13

Slide 13

Slide 13 text

HSL Diagram from Wikipedia Monday, March 4, 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

HSL vs. HSB vs. HSV Slightly Different Make a computer convert http://colorizer.org/ Monday, March 4, 13

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

What The Heck Is Gamut? Not every display method can reproduce every color Monday, March 4, 13

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Gamut and Conversion Monday, March 4, 13 Don’t do it by hand.

Slide 21

Slide 21 text

Gamut and Calibration Depends on ambient light Depends on time of day Depends on season Monday, March 4, 13

Slide 22

Slide 22 text

Calibration and the Web Old smartphones 14” CRTs The cheapest 15” LCD An iPhone in direct sunlight Monday, March 4, 13

Slide 23

Slide 23 text

Calibration and the Web Don’t Bother Monday, March 4, 13

Slide 24

Slide 24 text

Image Formats GIF: Limited Colors Monday, March 4, 13

Slide 25

Slide 25 text

Image Formats JPEG: Artifacts Monday, March 4, 13

Slide 26

Slide 26 text

Image Formats PNG: File Size Monday, March 4, 13

Slide 27

Slide 27 text

Colors and HTML Don’t Monday, March 4, 13

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Alpha 0% transparent 100% opaque Monday, March 4, 13

Slide 30

Slide 30 text

Alpha vs. Opacity Alpha modiﬁes the color Opacity modiﬁes the element Monday, March 4, 13

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Color and Computers •Describing Colors •What the heck is gamut? •Colors and Image Formats •Colors and CSS Monday, March 4, 13

Slide 33

Slide 33 text

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://jsﬁddle.net/st8jP/ Monday, March 4, 13