Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga...
Transcript of Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga...
![Page 1: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/1.jpg)
Color and PerceptionColor and Perception
CS635 Spring 2010
Daniel G AliagaDaniel G. AliagaDepartment of Computer Science
Purdue University
![Page 2: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/2.jpg)
Elements of Color PerceptionElements of Color PerceptionElements of Color PerceptionElements of Color Perception
2
![Page 3: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/3.jpg)
Elements of ColorElements of ColorElements of ColorElements of Color
• Physics: y– Illumination
• Electromagnetic spectra; approx. 350 – 720 nm
R fl ti– Reflection• Material properties (i.e., reflectance, transparency) • Surface geometry and micro geometry (i.e., polished versus matte
b h d)versus brushed)
• Perception– Physiology and neurophysiologyPhysiology and neurophysiology– Perceptual psychology
3
![Page 4: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/4.jpg)
Physiology of the EyePhysiology of the Eye
• The eye:
• The retinaThe retina– 100 M Rods
• B&WB&W
– 5 M Cones• ColorColor
4
![Page 5: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/5.jpg)
Physiology of the RetinaPhysiology of the Retina
• The center of the retina is a densely packed region called the fovearegion called the fovea. – Cones much denser here than the periphery
5
![Page 6: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/6.jpg)
Types of ConesTypes of Cones
• Three types of cones:L or R most sensitive to red light (610 nm)– L or R, most sensitive to red light (610 nm)
– M or G, most sensitive to green light (560 nm)
– S or B, most sensitive to blue light (430 nm), g ( )
– Color blindness results from missing cone type(s)
6
![Page 7: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/7.jpg)
Color Color BlindnessBlindnessNormal
Protan (L-cone) “red insensitivity”
Deutan (M-cone) “green insensitivity”
Tritan (S-cone) “B=G and Y=violet”
![Page 8: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/8.jpg)
Opponent Color TheoryOpponent Color TheoryOpponent Color TheoryOpponent Color Theory• Humans encode colors by differencesHumans encode colors by differences
• E.g R‐G, and B‐Y Differences
![Page 9: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/9.jpg)
Perception: MetamersPerception: Metamers• A given perceptual sensation of color derives from the stimulus of all three cone types
• Identical perceptions of color can thus be caused by very different spectra
9
![Page 10: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/10.jpg)
Perception: Other GotchasPerception: Other Gotchas• Color perception is also difficult because:
– It varies from person to person (thus need p p (“standard observers”)
– It is affected by adaptationy p
– It is affected by surrounding color
– There is Mach‐bandingg
10
![Page 11: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/11.jpg)
Summary of Human Color PerceptionSummary of Human Color PerceptionSummary of Human Color PerceptionSummary of Human Color Perception
• Subjectively, the human eye seems to perceive colorSubjectively, the human eye seems to perceive color by three conceptual dimensions: – hue,
– brightness, and
– saturation.
• This suggests a 3D color space.
• Hardware reproduction of color cannot match human perception perfectly.
11
![Page 12: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/12.jpg)
Color SpacesColor Spaces• Three types of cones suggests color is a 3D quantity. How
to define 3D color space?p
• Idea: shine given wavelength (λ) on a screen, and mix three other wavelengths (R,G,B) on same screen. Have
dj t i t it f RGB til l id ti luser adjust intensity of RGB until colors are identical:
• How closely does this correspond to a color CRT?
• Problem:• Problem: • sometimes need to “subtract” R
to match λ
12
![Page 13: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/13.jpg)
CIE Color SpaceCIE Color Space
• The CIE (Commission Internationale d’Eclairage) came up with three hypothetical lights X, Y, and Z with these spectra:
A i t l• Approximately:X ~ RY GY ~ GZ ~ B
• Idea: any wavelength λ can be matched perceptually by positive combinations of X,Y,Z
13
p p y y p , ,
![Page 14: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/14.jpg)
CIE Color SpaceCIE Color Space1931
CIE Color SpaceCIE Color Space
14
![Page 15: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/15.jpg)
CIE Color SpaceCIE Color Space1931
CIE Color SpaceCIE Color Space
15
![Page 16: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/16.jpg)
CIE Color SpaceCIE Color Space
• The gamut of all colors perceivable is thus a three dimensional shape in X YZ:three‐dimensional shape in X,Y,Z:
For simplicity, we often project to the 2D plane X+Y+Z=1, e.g.:
X = X / (X+Y+Z)Y = Y / (X+Y+Z)Z 1 X Y
16
Z = 1 - X - Y
![Page 17: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/17.jpg)
Device Color GamutsDevice Color GamutsDevice Color GamutsDevice Color Gamuts
• X Y and Z are hypothetical light sources; noX, Y, and Z are hypothetical light sources; no real device can produce the entire gamut of perceivable colorperceivable color
• Example: CRT monitor
17
![Page 18: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/18.jpg)
Device Color GamutsDevice Color GamutsDevice Color GamutsDevice Color Gamuts
• The RGB color cube sits within CIE color spaceThe RGB color cube sits within CIE color space something like:
18
![Page 19: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/19.jpg)
Device Color GamutsDevice Color GamutsDevice Color GamutsDevice Color Gamuts
• We can use the CIE chromaticity diagram toWe can use the CIE chromaticity diagram to compare the gamuts of various devices:
• Note for example• Note, for example, that a color printercannot reproducecannot reproduceall shades availableon a color monitoron a color monitor
19
![Page 20: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/20.jpg)
Converting Within Color SpaceConverting Within Color SpaceConverting Within Color SpaceConverting Within Color Space
• Simple matrix operation:Simple matrix operation:
⎥⎤
⎢⎡⎥⎤
⎢⎡
⎥⎤
⎢⎡
GR
YYYXXX
GR BGR
''
⎥⎥⎥
⎦⎢⎢⎢
⎣⎥⎥⎥
⎦⎢⎢⎢
⎣
=⎥⎥⎥
⎦⎢⎢⎢
⎣ BG
ZZZYYY
BG
BGR
BGR
''
• The transformation C2 = M‐12 M1 C1 yields RGB
it 2 th t i i l t t i RGBon monitor 2 that is equivalent to a given RGB on monitor 1A l t h f di t t
20
• Analogous to change of coordinate system.
![Page 21: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/21.jpg)
RGB Color SpaceRGB Color SpaceRGB Color SpaceRGB Color Space
![Page 22: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/22.jpg)
RGB Color SpaceRGB Color SpaceRGB Color SpaceRGB Color Space
• Convenient colors (screen phosphors)Convenient colors (screen phosphors)
• Decent coverage of the human color
C il i d i h 0 2• Customarily quantized in the range 0…255
• Full color = 3 bytes/pixel
• Not a particularly good basis for human interaction– Non‐intuitive
– Non‐orthogonal (perceptually)Non orthogonal (perceptually)
![Page 23: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/23.jpg)
RGB Color SpaceRGB Color SpaceRGB Color SpaceRGB Color Space
• The RBG colors can be arranged in a cube, in a spaceThe RBG colors can be arranged in a cube, in a space with the dimensions R, G, and B. The colors at the vertices of the RGB cube are then:
Color R G Bblack 0 0 0white 255 255 255red 255 0 0green 0 255 0green 0 255 0blue 0 0 255cyan 0 255 255
23
magenta 255 0 255yellow 255 255 0
![Page 24: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/24.jpg)
RGB Cube PropertiesRGB Cube PropertiesRGB Cube PropertiesRGB Cube Properties
• The main diagonal from black to white contains the ggray scale.
• If a specific color is given as (R,G,B) and k is a number ll h h (k k k ) h lsmaller than 1, then (kR, kG, kB) has approximately
the same hue and is dimmer. So, we can model color intensity byintensity by– (kR, kG, kB), k < 1– Note that the brightness of (R,G,B) is not g ( , , )exceeded
24
![Page 25: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/25.jpg)
HSV/HSL Color SpaceHSV/HSL Color SpaceHSV/HSL Color SpaceHSV/HSL Color Space
![Page 26: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/26.jpg)
HSV/HSL Color SpaceHSV/HSL Color SpaceHSV/HSL Color SpaceHSV/HSL Color Space
• Intensity/ValueIntensity/Value– total amount of energy
• Saturation• Saturation– degree to which color is one wavelength
• Hue– dominant wavelength
![Page 27: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/27.jpg)
HSVHSVHSVHSV
• Max = max(R, G, B)Max max(R, G, B)• Min = min(R, G, B)• S = (max – min)/max• S = (max – min)/max• If R==Max → h = (G‐B)/(max‐min)If G M → h 2+(B R)/( i )• If G==Max → h = 2+(B‐R)/(max‐min)
• If B==Max → h = 4 + (R‐G)/(max‐min)• If h<0 → H = h/6 + 1• If h>0 → H = h/6
![Page 28: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/28.jpg)
HSV User InteractionHSV User InteractionHSV User InteractionHSV User Interaction
![Page 29: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/29.jpg)
HSLHSLHSLHSL
if G>B if G<Bif G>B, if G<B
if G=B
![Page 30: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/30.jpg)
YIQ Color SpaceYIQ Color SpaceQ pQ p
• YIQ is the color model used for color TV in the USYIQ is the color model used for color TV in the US– Y is luminance; I & Q are color
– Note: Y is the same as CIE’s Y – Result: backwards compatibility with B/W TV!
30
![Page 31: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/31.jpg)
Converting Between Color SpacesConverting Between Color Spacesg pg p
• Converting between color models can also beConverting between color models can also be expressed as such a matrix transform, e.g.:
⎤⎡⎤⎡⎤⎡ RY 110590300
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡−−=
⎥⎥⎥
⎦
⎤
⎢⎢⎢
⎣
⎡
BGR
QIY
31052021032.028.060.0
11.059.030.0
⎥⎦⎢⎣⎥⎦⎢⎣ −⎥⎦⎢⎣ BQ 31.052.021.0
31
![Page 32: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/32.jpg)
Gamma CorrectionGamma CorrectionGamma CorrectionGamma Correction
• We generally assume color brightness is linearWe generally assume color brightness is linear
• But most display devices are inherently nonlinear– brightness(voltage) ≠ 2×brightness(voltage/2): γVI =brightness(voltage) 2 brightness(voltage/2):
• Common solution: gamma correction– Post‐transformation on RGB values to map them to linear
sVI =
prange on display device:
γ1
sc VV =– Can have separate γ for R, G, B– γ is usually in range 1.8 to 2.2
32
![Page 33: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/33.jpg)
Gamma CorrectionGamma CorrectionGamma CorrectionGamma Correction
• Camera• (gamma encoding)
Display
• Overall
• Display• (gamma expansion)
33
![Page 34: Color and Perception - Purdue University · Color and Perception CS635 Spring 2010 Daniel G. Aliaga ... HSV/HSL Color Space. HSV/HSL Color Space • Intensity/Value – total amount](https://reader030.fdocuments.us/reader030/viewer/2022041101/5eda5164b3745412b5712330/html5/thumbnails/34.jpg)
Gamma CorrectionGamma CorrectionGamma CorrectionGamma Correction
• Camera• (gamma encoding)
Display
• Overall
• Display• (gamma expansion)
34