Color and Perception - Purdue University · Color and Perception CS535 Fall 2010 Daniel G. Aliaga...

Post on 31-May-2020

2 views 0 download

transcript

Color and PerceptionColor and Perception

CS535 Fall 2010

Daniel G AliagaDaniel G. AliagaDepartment of Computer Science

Purdue University

Elements of Color PerceptionElements of Color PerceptionElements of Color PerceptionElements of Color Perception

2

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

Physiology of the EyePhysiology of the Eye

• The eye:

• The retinaThe retina– 100 M Rods

• B&WB&W

– 5 M Cones• ColorColor

4

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

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

Color Color BlindnessBlindnessNormal

Protan (L-cone) “red insensitivity”

Deutan (M-cone) “green insensitivity”

Tritan (S-cone) “B=G and Y=violet”

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

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

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

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

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

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 , ,

CIE Color SpaceCIE Color Space1931

CIE Color SpaceCIE Color Space

14

CIE Color SpaceCIE Color Space1931

CIE Color SpaceCIE Color Space

15

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

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

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

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

LAB SpaceLAB SpaceLAB SpaceLAB Space

• A L*a*b* color space is a color‐opponent spaceA L a b color space is a color opponent space with dimension L* for lightness and a* and b*

for the color‐opponent dimensions based onfor the color opponent dimensions, based on nonlinearly compressed CIE XYZ color space coordinatescoordinates.

LAB SpaceLAB SpaceLAB SpaceLAB Space

• L*a*b* color is designed to approximateL a b color is designed to approximate human vision. It aspires to perceptual uniformity and its L* component closelyuniformity, and its L component closely matches human perception of “lightness”, and a* and b* alters “color”a and b alters  color .– In contrast, RGB, CMYK, and other spaces model the output of physical devices rather than humanthe output of physical devices rather than human visual perception

LAB SpaceLAB SpaceLAB SpaceLAB Space

• “ab” slices of LAB space thatab  slices of LAB space that fall within the sRGB gamut of a typical displaya typical display– sRGB = “standard RGB gamut”

LAB Space Perceptually Fun Facts:LAB Space Perceptually Fun Facts:**aa** axisaxis

• a* axis corresponds to “blue yellow” rangea axis corresponds to  blue yellow  range which approximates black body radiation

• We seem to be less sensitive to changes along• We seem to be less sensitive to changes along that axis – maybe because “its everywhere”

LAB Space Perceptually Fun Facts: LAB Space Perceptually Fun Facts: llColor ConstancyColor Constancy

• Color constancy is an example of subjectiveColor constancy is an example of subjective constancy 

• It states that the perceived color of objects• It states that the perceived color of objects remains relatively constant under varying illumination conditionsillumination conditions. – e.g., A green apple looks green to us at noon (white sunlight) or at sunset (red sunlight)(white sunlight) or at sunset (red sunlight)

LAB Space Perceptually Fun Facts:LAB Space Perceptually Fun Facts:llExamplesExamples

I b th i t• In both pictures, we can recognize the same l h ?colors, why?

LAB Space Perceptually Fun Facts:LAB Space Perceptually Fun Facts:llExamplesExamples

I b th i t• In both pictures, we can recognize the same l h ?colors, why?

LAB Space Perceptually Fun Facts:LAB Space Perceptually Fun Facts:llExamplesExamples

• “A” looks darker than “B”A  looks darker than  B …

LAB Space Perceptually Fun Facts:LAB Space Perceptually Fun Facts:llExamplesExamples

• “A” looks darker than “B”A  looks darker than  B …

LAB Space Perceptually Fun Facts:LAB Space Perceptually Fun Facts:llExamplesExamples

• “A” looks darker than “B”A  looks darker than  B …

• Why?

Color ConstancyColor ConstancyColor ConstancyColor Constancy

• Given two colors we computeGiven two colors, we compute

C1/C2 = R12

• Now change the colors but keep the ratio, so

C’ /C’ RC’1/C’2 = R12

Th l ill l i l h (• The colors will seem relatively the same (or “constant”)

Example use in current research…Example use in current research…Example use in current research…Example use in current research…AppearancesIdeal Target Luminance ComparisonIdeal Albedo

b) c) d) e)a) f) g)b) c) d) e)a)

Chroma Comparison

f) g)

e) f)

g) h)

h) i) j)

RGB Color SpaceRGB Color SpaceRGB Color SpaceRGB Color Space

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)

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

34

magenta 255 0 255yellow 255 255 0

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

35

Converting Within Converting Within Some Some RGB Color SpacesRGB Color Spaces

• Sometimes only a simple matrix operation isSometimes only a simple matrix operation is needed:

⎥⎤

⎢⎡⎥⎤

⎢⎡

⎥⎤

⎢⎡

GR

YYYXXX

GR BGR

''

⎥⎥⎥

⎦⎢⎢⎢

⎣⎥⎥⎥

⎦⎢⎢⎢

=⎥⎥⎥

⎦⎢⎢⎢

⎣ BG

ZZZYYY

BG

BGR

BGR

''

• The transformation C2 = M‐12 M1 C1 yields RGB 

on monitor 2 that is equivalent to a given RGBon monitor 2 that is equivalent to a given RGB on monitor 1

• Analogous to change of coordinate system

36

• Analogous to change of coordinate system.

sRGBsRGBsRGBsRGB

• Standard RGB space of a “RGB device”Standard RGB space of a  RGB device  assuming a gamma correction of 2.2– (gamma correction to be explained in a few slides)– (gamma correction to be explained in a few slides)

where C corresponds to any of R, G or B; and a = 0.055where C corresponds to any of R, G or B; and a 0.055

sRGBsRGBsRGBsRGB

HSV/HSL Color SpaceHSV/HSL Color SpaceHSV/HSL Color SpaceHSV/HSL Color Space

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

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

HSV User InteractionHSV User InteractionHSV User InteractionHSV User Interaction

HSLHSLHSLHSL

if G>B if G<Bif G>B,      if G<B

if G=B

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!

44

Converting Between Converting Between RGB and YIQRGB and YIQgg QQ

• 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

45

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 

46

Gamma CorrectionGamma CorrectionGamma CorrectionGamma Correction

47

Gamma CorrectionGamma CorrectionGamma CorrectionGamma Correction

• Camera• (gamma encoding)

Display

• Overall

• Display• (gamma expansion)

48

Gamma CorrectionGamma CorrectionGamma CorrectionGamma Correction

• Camera• (gamma encoding)

Display

• Overall

• Display• (gamma expansion)

49

ExamplesExamplesExamplesExamples

• Demo appsDemo apps

• Website:http //wwwwebexhibits org/colorart/contrast html– http://www.webexhibits.org/colorart/contrast.html