Lecture overview
CGT 511
Color in CG
Bedřich Beneš, Ph.D.
Purdue University
Department of Computer Graphics
• What is color?
• Meaning of color
• Color in CG (RGB, CMY, CMYK, Gamut)
• RGB to Grayscale
© Bedrich Benes
© Bedrich Benes
What is color?
Meaning of Color
• Color is a subjective experience of light.
Depends on • Culture
white – death or innocence?
• Shared archetypal aspects
red – color of blood, fire
blue – color of sky, sea
green – foliage, ocean
• Contextual
Purdue colors
• Color of an object… is difficult…
What we see is the reflected light.
• What is the color of a blue cube illuminated by a red light?
• Color depends on many aspects…
© Bedrich Benes
© Bedrich Benes
Meaning of Color
Meaning of Color
• Some things are strange…
• Red seems closer than blue
Why? Blue – sky
• Some things are strange…
• Red seems closer than green.
Why? green ‐ foliage
© Bedrich Benes
Meaning of Color © Bedrich Benes
Meaning of Color • Wash the foreground with red and the background with blue
depth sensation
• Blue fill
in the Euro‐American culture dark areas, night… Is this true? © Bedrich Benes
© Bedrich Benes
Meaning of Color
Color temperature
Warm Colors: Red, Orange, Yellow
Warm colors advance
William Kelvin (1800)
heated carbon block glows
Cool Colors: Green, Blue
Cool Colors recede
color=f(temperature)
Measured in Kelvins [K]
© Bedrich Benes
© Bedrich Benes
Color temperature
Candle:
Fluorescent lamp
Tungsten lamp
Film and projection lamp
Moonlight
Daylight
Clear Blue Sky
© Bedrich Benes
Color temperature
1900
2600‐7500
2700‐2900
2850‐3200
4100
5800‐6500
10,000‐26,000
© Bedrich Benes
Color temperature
Color temperature
• The color temperature is used in classical cinematography and photography
• The color balance is set to certain temperature
• The color scheme is centered around it
• The white balance used in digital cameras
© Bedrich Benes
© Bedrich Benes
Color Scheme and Contrast
Color Scheme
Color scheme
is the total set of colors used by an image
Color scheme creates the impression before the viewer sees the contents!
• Primary colors
used to create any other color
None of them should be expressed from the others
Color contrast is the difference of the darkest and the brightest color High contrast attracts attention
• In art: RYB
In CG: RGB
© Bedrich Benes
© Bedrich Benes
Color Scheme
Color in CG
• Secondary colors
in the given color scheme
are the colors expressed from the primary colors
• RGB (Red, Green, Blue)
• additive color system – based on OPTICS (more color brighter the result)
• denoted by [R, G, B]
R=G=B gray colors
• [0,0,0] is black
• [255,255,255] is white
• [127, 127, 127] is 50% of gray
© Bedrich Benes
Color in CG
© Bedrich Benes
Color in CG
• CMY (Cyan, Magenta, Yellow)
• subtractive color system – based on PIGMENTS (less color brighter the result)
• used in printers, • denoted by [C, M, Y]
C=M=Y gray colors
• [0,0,0] white
• [255,255,255] black
• [64,64,64]
is 2/3 of gray
© Bedrich Benes
© Bedrich Benes
Conversions RGB ↔ CMY
RGB CMY Cubes
Yellow
Red
Green
RGB
CMY
Cyan
Magenta
Blue
© Bedrich Benes
RGB CMY Cubes
© Bedrich Benes
CMYK
• CMYK (Cyan, Magenta, Yellow, blacK)
• using [C,M,Y] in full intensity to print black text is expensive
• CMYK is the same as CMY, but black color is added
• used in printers, the black is the most frequently used
• CMYK is set in %, i.e. from 0 to 100
© Bedrich Benes
© Bedrich Benes
Is White really White?
Is White really White?
• So called white point
is what is considered to be white
• White sheet of paper illuminated by
• sunlight
• light bulb
• Moon
will reflect something else
But we see it white
© Bedrich Benes
Is White really White?
• Many cameras are bad in guessing white
• Usually presets
• One touch white
put something white in front of the camera
press the calibration
The camera will “know” what is the white
© Bedrich Benes
Color Constancy
• Perceived constant color under varying conditions
• When a part of a colored surface changes illumination, our perception can change significantly.
• Once wrongly taken – hard to improve
© Bedrich Benes
© Bedrich Benes
Linear vs. non‐linear color space
Gamma Correction
• Perceptual distance between colors is different that the linear one.
• A constant distance between two colors in RGB is perceived as different.
• We are more sensitive in low intensities.
• Linear mapping in RGB does not correspond to perceived difference.
• L*ab color space maps lightness correctly
• RGB is corrected before it is displayed
ఊ
ఊ
ఊ
, , ᇱ
but it depends on the monitor
• Originally, used to color correct the CRT non‐linearity
• Now, used for LCD displays
• sRGB is a bit more complex correction
© Bedrich Benes
© Bedrich Benes
sRGB
Color Gamut
•
•
•
•
• Color gamut of a device is the scale of colors the device is able to reproduce
• The better device the higher the gamut
• Gamut warning, gamut alarm discrepancy between two devices
RGB is linear
sRGB is perceptually corrected
LCD displays assume sRGB on the input
In OpenGL:
glEnable(GL_FRAMEBUFFER_SRGB)
glTexImage(…,GL_SRGB,…)
• typically – printer and screen
© Bedrich Benes
© Bedrich Benes
Color Gamut
Problems with printing
• Software usually displays the warning
• not all colors can be represented perfectly (light ones)
• another solution is adding more primaries
• sometimes CMYKLcLm color model is used
it is CMYK + light cyan +light magenta
• CMYKOrGr
CMYK + Orange + green
• in both cases we can print brighter colors
• in both cases it is expensive
© Bedrich Benes
© Bedrich Benes
HSB, HLS, HSV, H whatever
H whatever
• HSB (Hue, Saturation, Brightness)
• the most intuitive color system
• corresponds to the artistic concept
of tint, shades, and tone • color is perceived perfectly if its intensity is “in the middle”
low  dark high  bright
•
© Bedrich Benes
•
•
•
© Bedrich Benes
hue correspond to cleanliness
of the monochromatic spectrum
saturation: how much the different colors are presented
brightness: how much the achromatic light
is presented
clearest colors have
[H,L,S]=[0‐1, 0.5, 1]
L*ab color model
Going Grayscale
• the best color model (?)
• lightness component (L) 0 ‐ 100. • Lightness is perceptually correct
• the a component (green‐red axis) • the b component (blue‐yellow axis) ranges from +120 to ‐120.
• Used to move images between systems!
Lab is the intermediate color model used when
converting from one color mode to another.
• used in PostScript® Level 2 ,Level 3 printers. • other color PostScript devices use CMYK • Intuitively…
I=1/3 R+1/3 G+1/3 B
R=G=B=const gives grayscale
it does, but…
• The human eye is the most sensitive to the green color (Why?)
• The correct equation is:
I = 0.299 R + 0.587 G + 0.114 B
© Bedrich Benes
Going to grayscale
© Bedrich Benes
Color space reduction
• How many colors can fit in 3 bytes?
• 3 bytes = 3*8=24 bits
• 224= 16,777,216 ~17 milions
• How many in one byte?
• 28= 256
© Bedrich Benes
© Bedrich Benes
Color Spaces
true color 24 bits per pixel, usually RGB 8bits+8bits+8bits
true color 32 bits per pixel, usually RGBA ‐ A is alpha, high color 16 bits per pixel, usually 5bits+6bits+5bits index color 8 bits per pixel, usually using palette
bitmap 1 bit per pixel
© Bedrich Benes
Color Space Reduction
• 256<16,777,216
• The actual # of colors in an image can be different
• Color space reduction – loosing information
• Dithering/halftoning
• Palette
© Bedrich Benes
Dithering from grayscale to BW
Random Dithering
•
•
•
•
• The pixel with intensity Pi is set to B or W
with the pp probability given by
random dithering
matrix dithering
error diffusion The input pixel has intensity Pi
The output pixel at the same position can be either 0 or 1 (B or W).
• The combination of pixels at some area should cause “feeling” of gray.
© Bedrich Benes
pp=Pi/256
A random number between 0‐1 is generated, If it is larger than pp it is set to black, otherwise white
© Bedrich Benes
Matrix Dithering
Matrix Dithering
• For every color a pattern is prepared
• Four colors can be represented as:
00
00
00
01
01
10
01
11
11
11
• Causes regular patterns in the image.
• Used in newspapers, printers
© Bedrich Benes
© Bedrich Benes
Error Diffusion
Error Diffusion
• Pixel is converted to black or white
• The error of this conversion is diffused to the neighbors
• Let's say the input pixel has value 4 out of 16. We will display it with value 0 and the error (value 4 = 4‐0) will be diffused to the neighborhood.
• Different strategies for the error distribution have different algorithm names
(Stucki, Bayer’s, Burkes, Floyd‐Steinberg)
• The last is the most commonly used
© Bedrich Benes
© Bedrich Benes
Dithering of color images
Color Palette
• Is done per color channel
• palette is a set of predefined colors typically 256 bytes long
• image includes indices into the palette, so only one byte per pixel is used
• This is also called a look‐up table (LUT)
© Bedrich Benes
© Bedrich Benes
Color Palette
Color Palette
palette
image
i
R
G
screen
B
index
y
52
x
0
255
0
green
i
R
1
2
3
4
5
6
7
255
128
0
1
0
0
255
Colors
G
255
0
0
2
0
0
255
B
0
128
128
3
0
0
255
y
x
Image
© Bedrich Benes
Palette
© Bedrich Benes
i
R
1
2
3
4
5
6
7
0
0
255
1
255
3
255
G
0
0
255
2
255
2
255
B
0
0
255
3
255
1
255
Color Palette
Fixed Palette
• palette is usually 256x3xB (256 indices x RGB)
• Palette is choosing 256 colors out of 224
• Palette can be:
Explorer
1) fixed (WIN, MAC, WWW, 332, Uniform) 2) Generated on demand
© Bedrich Benes
© Bedrich Benes
Fixed Palette
•
•
•
•
•
Netscape
Fixed Palette
The idea is to sample the color space
Some areas are assigned different weights
Depends on the eye sensitivity
Blue is underrepresented
Green and red are represented well
Original image
© Bedrich Benes
© Bedrich Benes
Uniform palette
Adaptive Palette
Adaptive Palette –simple clustering
• Depends on the image
• The colors of the input image are clustered into similar colors
• Each cluster has a representative assigned
1. Encompass the input colors by a cube
2. Divide the largest side
© Bedrich Benes
© Bedrich Benes
Adaptive Palette –simple clustering
3.
4.
5.
6.
Repeat the previous steps until desired
Find the center of each block
Use it as the representative
Generate the LUT
(assign each RGB index of
its representative)
There are many different algorithms…
© Bedrich Benes
Adaptive Palette
17 milions
© Bedrich Benes
256 colors
To take home…
Readings
•
•
•
•
•
•
•
• Shirley, P, et al, Fundamentals of Computer Graphics, 2nd edition, pages 451‐476
• Foley, van Dame, Hughes, Fernies; Computer Graphics Principles and Algorithms
• Watt, Watt:
Advanced Animation and Rendering Techniques
© Bedrich Benes
Color meanings, cold, warm, etc. RGB, CMY, CMYK, HLS, HSV, HSB
what do we get if we mix color X and Y?
color gamut warning
grayscale
color temperature
Color conversions
© Bedrich Benes