o l o r

C
Color
C ol or
Tsung-Yi Wu
 Introduction
 Color is a subjective sensation
produced in a brain.
 In the RGB color model, a color is

represented by 3 values (red (R),

green (G) and blue (B) light).
 The color depth of an image is number

of bits used to represent a color value.

 Introduction
 Color Depth

32 Bits
 Introduction
 32-bit Color
– Like 24-bit color, 32-bit color supports
16,777,215 colors but has an alpha
channel it can create more convincing
gradients, shadows, and transparencies.
 Introduction
 24-bit Truecolor(True Color)
– 28 = 256 levels of each of these three
colors
– 16,777,216 mixed colors (256 × 256 ×
256).
 Introduction
 16 Bits
– High color
– One of the components
(usually green with
RGB565) gets an extra
bit, allowing 64 levels of
intensity for that
component, and a total of
65536 available colors.
 Introduction
 24-bit color images with an additional
eight bits of non-color data (I.E.: alpha,
Z or bump data), or sometimes even to
plain 24-bit data.
 Introduction
 A 24-bit image can be thought of as
being made up of three 8-bit
channels, one each for red, green and
blue in RGB color.
 Introduction
 GIF
 Introduction
 The CMYK (Cyan, Magenta, Yellow,
and Key (black)) model is used for
printing, as it models the way color is
produced by mixing ink or paint.
 Other color models include YCrCb,

etc.
 Physiology
 Color is a subjective sensation
produced in a brain.
– Color Blindness
 Physiology
 Color Blindness
 Physiology
 Color Blindness
 Physiology
 Light is a form of electromagnetic radiation,
we can measure its wavelength.
 Visible light: 400nm-700nm
 Physiology
 Receptor Cells

瞳孔
 Physiology
 Retina
 Physiology
 Receptor Cells
 Physiology
 Receptor Cells

120M Rod Cells

6M Cone Cell
 Physiology
 Receptor Cells
 Physiology
 Rod/Cone Cells
– Lutein ( 葉黃素 )
– Zeaxanthin ( 玉米黃素 )
 Physiology
 Retina
 Physiology
 Optic Nerve
 Physiology
 Blind Spot
– Close your left eye and hold this web page about 8-
9 inches from your right eye
– Look at ‘+’ and slowly move your head forwards
and/or backward until the black circle disappears.
 Physiology
 Receptor Cells Cones

Response
 Physiology
 Color Blindness
– Monochromatism( 單色 )
 Either no cones available or just one type of them.
– Dichromatism( 雙色 )
 Only two different cone types
– Anomalous Trichromatism( 異常三色 )
 All three types but with shifted peaks of sensitivity
for one of them.
 This results in a smaller color spectrum.
 Physiology
 Tetrachromacy ( 四色視覺 )
 Physiology
 Test
 Physiology
 Cones are far less sensitive than rods
– A single photon may activate a rod
– A cone must absorb around 100 photons
to produce an equivalent response
 This is why it is difficult to distinguish
colors on a dark night.
 Physiology
 Negative Afterimages
– Occur when the rods and cones, which
are part of the retina, are overstimulated
and become desensitized.
 Physiology
 Complementary Color (Example)
 Physiology
 Complementary Color
 Physiology
 Why do surgeons wear green and
blue?
– It is the exact opposite of red on the color
wheel.
– Make doctors more sensitive to different
shades of red.
 Physiology
 Reference
– https://www.illusionsindex.org/ir/colour-
dove-illusion
 Tristimulus Theory
 Any colors can be specified by just 3
values, giving weights of 3
components.
 Each type of cone responds to R, G, B
 Tristimulus Theory
 RGB color model
 Color Depth
 Color depth
– 24, 30, 36, 48 bits
– Grey scale image: R=G=B
– Millions of colors, true color: 24 bits
Thousands of colors, hi-color: 16 bits
256 colors: 8 bits
– Grey-level: 256 = 8 bits
 Indexed Color
 Direct color
 Indexed color

– Palette of 256 colors

– Color lookup table (CLUT)
 Logical colors => physical colors

– 24 bits color => indexed color

 1/3 of data
0
– BMP, TGA, TIFF: palette
Direct
Color
50,50,50 90,
100,100,100 122,
255,255,255 0,
0,0,0 16 Palette

(R,G,B) 255
 Indexed Color
 Test
– Specification
 Color Depth = 24
 Colors of Palette = 256

 Image Pixel Size (High * Width) = 50 * 50

– How many bytes should be required to

represent the image?
 Indexed Color
 Test
– Specification
 Color Depth = 24
 Colors of Palette = 128

 Image Pixel Size (High * Width) = 50 * 50

– How many bytes should be required to

represent the image?
 Color Temperature
 Color Temperature Model
– relationship between the temperature of a
theoretical standardized material and the
energy distribution of its emitted light as
the radiator is brought to increasingly
higher temperatures
– measured in Kelvin (K).
 Color Temperature
 Light Bulb
 Color Temperature
 Color Temperature Model
 Complementary Color
 Either one of two colors whose mixture
in the right proportions produces white
(in the case of light) or gray (in the
case of pigment).

Read more:
http://www.answers.com/topic/comple
mentary-color#ixzz1H2VM0p2g
 Complementary Color
 Complementary Color
– Looking at any color patch around
the color circle will produce an
afterimage of its complementary
color.
 Complementary Color
 Lab
 Complementary Color
 Lab
 Complementary Color
 Original
 Complementary Color
 Example
– http://www.johnsadowski.com/big_spanis
h_castle.php
 Other Color Models
 CMYK (for printing)
– C = G+B = W-R
M = R+B = W-G
Y = R+G = W-B
 Complementary color
 Such a model is called subtractive because

inks “subtract” brightness from white

 Other Color Models
 CMYK’s Example
 Other Color Models
 YUV standard (also called CCIR 601),
known before as YCrCb (Y Cr Cb)
– a colour representation model dedicated
to analogue video
– Y parameter represents the luminance
(i.e. information in black and white)
– U and V make it possible to represent the
chrominance (i.e. information regarding
the color).
 Other Color Models
 YUV (for SDTV)
– Y = 0.299R + 0.587 G + 0.114 B
– U = -0.169R - 0.331 G + 0.5B = 0.564(B -
Y)
– V = 0.5R -0.419G -0.081B = 0.713(R-Y)
– R/G/B: [0, 1]  Y: [0, 1], U/V: [-0.5, 0.5]
 U is sometimes written as Cb and V is
sometimes written as Cr
 Other Color Models
 YUV (for SDTV)
 Other Color Models
 CbCr Scaled (Y=0.5)
BUG
 Other Color Models
 CbCr Scaled
 Other Color Models
 Example for YCbCr ?

Cb

Cr
 Other Color Models
 Conversion Matrix for YUV
Y = 0.299R + 0.587 G + 0.114 B
U = -0.169R - 0.331 G + 0.5B = 0.564(B - Y)
V = 0.5R -0.419G -0.081B = 0.713(R-Y)
 HSB
 HSB: hue, saturation, and brightness
 Hue is the actual color. It is measured in angular
degrees counter-clockwise around the cone starting
and ending at red = 0 or 360 (so yellow = 60, green
= 120, etc.).
 Saturation is the purity of the color, measured in
percent from the center of the cone (0) to the
surface (100). At 0% saturation, hue is
meaningless.
 Brightness is measured in percent from black (0)
to white (100). At 0% brightness, both hue and
saturation are meaningless.
 HSB
 Saturation is an expression for the relative bandwidth
of the visible output from a light source. In the
diagram, the saturation is represented by the
steepness of the slopes of the curves
– the red curve represents a color having low
saturation,
– the green curve represents a color having greater
saturation,
– the blue curve represents a color with fairly high
saturation
 As saturation increases, colors appear more "pure."
As saturation decreases, colors appear more
"washed-out."
 HSB
 Diagrams
 HSB
 PhotoImpact
 Gamma Correction
 Consistent Color
 Gamma Correction
 Example
 Gamma Correction
 Example
 References
 http://livedocs.adobe.com/en_US/Photoshop/10.0/images/
sca_white_balance.png
 http://www.qualityorientalrug.com/designer/color.html
 http://www.hitachi.co.jp/Prod/vims/e_rlad/tech/lcos/image/point8.gif
 http://graphics.stanford.edu/gamma.html
 http://www.bem.fi/book/28/fi/2802.gif
 https://health.ettoday.net/news/1397230
 https://www.researchgate.net/figure/Visual-cycle-Absorption-of-light-
by-visual-pigments-rhodopsin-or-cone-opsin-causes_fig2_249648159
 https://stackoverflow.com/questions/46410132/algorithm-for-many-
images-and-their-color-palettes
 https://www.aisledlight.com/color-temperature-led-lighting/