Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Color and Computers
Search
Bryce "BonzoESC" Kerley
March 05, 2013
Programming
0
220
Color and Computers
How computers talk about color and what it means for designers.
Bryce "BonzoESC" Kerley
March 05, 2013
Tweet
Share
More Decks by Bryce "BonzoESC" Kerley
See All by Bryce "BonzoESC" Kerley
Ruby in 2020
bryce
1
110
Rails and the Internet of Things
bryce
1
70
It's Not Ruby, But…
bryce
0
49
Ruby 2.5: What's New and What's Cool
bryce
0
63
docker for rubyists
bryce
0
110
Would You Like To Make A Game?
bryce
0
54
WebSockets and ActionCable
bryce
0
84
How I Learned to Stop Worrying and Like RSpec
bryce
0
77
How Do Computers Even Work?
bryce
1
190
Other Decks in Programming
See All in Programming
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
900
Model Pollution
hschwentner
1
180
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
510
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
720
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
680
iOSDC.pdf
chronos2500
2
630
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
930
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
2.1k
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
imaizume
0
170
Advance Your Career with Open Source
ivargrimstad
0
130
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2k
Featured
See All Featured
Scaling GitHub
holman
463
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Experiences People Love
moore
142
24k
Thoughts on Productivity
jonyablonski
70
4.8k
The Invisible Side of Design
smashingmag
301
51k
GitHub's CSS Performance
jonrohan
1032
460k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
How to Ace a Technical Interview
jacobian
280
23k
A Tale of Four Properties
chriscoyier
160
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Transcript
Color and Computers Bryce Kerley Design Miami March 4, 2013
Monday, March 4, 13
Color and Computers •Describing Colors •What the heck is gamut?
•Colors and Image Formats •Colors and HTML Monday, March 4, 13
Who am I? Consulting Engineer Burrito Enthusiast Basho Technologies
[email protected]
@bonzoesc Monday, March 4, 13
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.
Describing Colors Numbers Monday, March 4, 13
Additive vs. Subtractive •Light sources make color by adding multiple
wavelengths •Red, Green, Blue (RGB) Monday, March 4, 13
Additive vs. Subtractive •Light reflectors (paper, ink, cars, leaves) make
color by subtracting wavelengths •Cyan, Magenta Yellow Monday, March 4, 13
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.
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
RGB vs. CMY Diagrams from Wikipedia Monday, March 4, 13
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
RGB vs. CMY vs. HSL RGB: Mixing light CMY: Subtracting
light HSL: Perception Monday, March 4, 13
HSL Diagram from Wikipedia Monday, March 4, 13
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
HSL vs. HSB vs. HSV Slightly Different Make a computer
convert http://colorizer.org/ Monday, March 4, 13
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
What The Heck Is Gamut? Not every display method can
reproduce every color Monday, March 4, 13
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
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
Gamut and Conversion Monday, March 4, 13 Don’t do it
by hand.
Gamut and Calibration Depends on ambient light Depends on time
of day Depends on season Monday, March 4, 13
Calibration and the Web Old smartphones 14” CRTs The cheapest
15” LCD An iPhone in direct sunlight Monday, March 4, 13
Calibration and the Web Don’t Bother Monday, March 4, 13
Image Formats GIF: Limited Colors Monday, March 4, 13
Image Formats JPEG: Artifacts Monday, March 4, 13
Image Formats PNG: File Size Monday, March 4, 13
Colors and HTML Don’t Monday, March 4, 13
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
Alpha 0% transparent 100% opaque Monday, March 4, 13
Alpha vs. Opacity Alpha modifies the color Opacity modifies the
element Monday, March 4, 13
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
Color and Computers •Describing Colors •What the heck is gamut?
•Colors and Image Formats •Colors and CSS Monday, March 4, 13
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