© Bedrich Benes

CGT 511Color in CGBedřich Beneš, Ph.D.Purdue UniversityDepartment of Computer Graphics

© Bedrich Benes

Lecture overview• What is color?

• Meaning of color

• Color in CG (RGB, CMY, CMYK, Gamut)

• RGB to Grayscale

© Bedrich Benes

What is color?• Color is a subjective experience of light.

• 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

Meaning of ColorDepends on • Culture

white – death or innocence?• Shared archetypal aspects

red – color of blood, fireblue – color of sky, seagreen – foliage, ocean

• ContextualPurdue colors

© Bedrich Benes

Meaning of Color• Some things are strange…• Red seems closer than blue

Why? Blue – sky

© Bedrich Benes

Meaning of Color• Some things are strange…• Red seems closer than green.

Why? green ‐ foliage

© Bedrich Benes

Meaning of Color • Wash the foreground with red and 

the background with bluedepth sensation

• Blue fillin the Euro‐American culture dark areas, night… Is this true? 

© Bedrich Benes

Meaning of Color 

© Bedrich Benes

Meaning of ColorWarm Colors:  

Red, Orange, YellowWarm colors advance

Cool Colors:  Green, BlueCool Colors recede

© Bedrich Benes

Color temperatureWilliam Kelvin (1800)

heated carbon block glows

color=f(temperature)

Measured in Kelvins [K]

© Bedrich Benes

Color temperatureCandle: 1900Fluorescent lamp 2600‐7500Tungsten lamp 2700‐2900Film and projection lamp 2850‐3200Moonlight 4100Daylight 5800‐6500Clear Blue Sky 10,000‐26,000

© Bedrich Benes

Color temperature

© Bedrich Benes

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

Color temperature

© Bedrich Benes

Color Scheme and ContrastColor scheme

is the total set of colors used by an imageColor scheme creates the impression 

before the viewer sees the contents!

Color contrast is the difference of the darkest and the brightest color High contrast attracts attention

© Bedrich Benes

Color Scheme• Primary colors

used to create any other colorNone of them should be expressed from the others

• In art:  RYBIn CG: RGB

© Bedrich Benes

Color Scheme• Secondary colors

in the given color schemeare the colors expressed from the primary colors

© Bedrich Benes

Color in CG• 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• 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

Color in CG

© Bedrich Benes

Conversions RGB ↔ CMYYellow

CyanMagenta

Blue

Red Green

RGBCMY

© Bedrich Benes

RGB CMY Cubes

© 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

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 elseBut we see it white

© Bedrich Benes

Is White really 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 camerapress the calibrationThe camera will “know” what is the white

• Once wrongly taken – hard to improve

© Bedrich Benes

Color Constancy• Perceived constant color under varying 

conditions• When a part of a colored surface changes 

illumination, our perception can change significantly.

© Bedrich Benes

Linear vs. non‐linear color space• 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

© Bedrich Benes

Gamma Correction• 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

sRGB• RGB is linear• sRGB is perceptually corrected• LCD displays assume sRGB on the input• In OpenGL:

glEnable(GL_FRAMEBUFFER_SRGB)glTexImage(…,GL_SRGB,…)

© Bedrich Benes

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

• typically – printer and screen

© Bedrich Benes

Color Gamut• Software usually 

displays the warning

© Bedrich Benes

Problems with printing• 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

HSB, HLS, HSV, 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

H whatever• hue correspond to cleanliness

of the monochromatic spectrum• saturation: how much 

the different colors are presented

• brightness: how much the achromatic lightis presented

• clearest colors have[H,L,S]=[0‐1, 0.5, 1]

© Bedrich Benes

L*ab color model• 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 whenconverting from one color mode to another.

• used in PostScript® Level 2 ,Level 3 printers. • other color PostScript devices use CMYK 

© Bedrich Benes

Going Grayscale• Intuitively…

I=1/3 R+1/3 G+1/3 BR=G=B=const gives grayscaleit 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

Color Spaces

true color  24 bits per pixel, usually RGB 8bits+8bits+8bitstrue 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 palettebitmap1 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• 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

Random Dithering• The pixel with intensity Pi is set to B or W

with the pp probability given by

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• For every color a pattern is prepared• Four colors can be represented as:

• Causes regular patterns in the image.• Used in newspapers, printers

0 00 0

0 00 1

0 11 1

0 11 0

1 11 1

© Bedrich Benes

Matrix Dithering

© Bedrich Benes

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.

© Bedrich Benes

Error Diffusion• 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

Dithering of color images• Is done per color channel

© Bedrich Benes

Color Palette• 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

Color Palette

x

y

i R G B

52 0 255 0

x

ygreen

image

palette

screen

index

© Bedrich Benes

Color Palettei R G B1 255 255 0 2 128 0 1283 0 0 1284 1 2 35 0 0 06 0 0 07 255 255 255

i R G B1 0 0 0 2 0 0 03 255 255 2554 1 2 35 255 255 2556 3 2 17 255 255 255

Image

Palette Colors

© Bedrich Benes

Color Palette• palette is usually 256x3xB (256 indices x RGB)• Palette is choosing 256 colors out of 224

• Palette can be:

1) fixed (WIN, MAC, WWW, 332, Uniform) 2) Generated on demand

© Bedrich Benes

Fixed Palette

Explorer

Netscape

© Bedrich Benes

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

© Bedrich Benes

Fixed Palette

Original image Uniform palette

© Bedrich Benes

Adaptive Palette• Depends on the image• The colors of the input image are clustered 

into similar colors• Each cluster has a representative assigned

© Bedrich Benes

Adaptive Palette –simple clustering1. Encompass the input colors by a cube

2. Divide the largest side

© Bedrich Benes

Adaptive Palette –simple clustering3. Repeat the previous steps until desired4. Find the center of each block5. Use it as the representative6. Generate the LUT

(assign each RGB index ofits representative)

There are many different algorithms…

© Bedrich Benes

Adaptive Palette

17 milions 256 colors

© Bedrich Benes

To take home…• 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

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