© Bedrich Benes

CGT 101Color in CGBedrich Benes, Ph.D.Purdue UniversityDepartment of Computer Graphics Technology andDepartment of Computer Science

1© Bedrich Benes

Lecture overview1. What is color?2. Color matching experiment3. Reflectance4. Meaning of color5. Color Temperature6. Color Scheme7. Perceptual Corrections8. RGB to Grayscale

© Bedrich Benes

What is color?

© Bedrich Benes

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

• Color of an object… is difficult…What we see is mostly reflected light

• What is the color of a blue cube illuminated by a red light?

© Bedrich Benes

LightA normal human eye senses electromagnetic 

radiation between 380 nm and 750 nm

© Bruce MacEvoy© Bedrich Benes

Light Sources• important special cases of light sources

• achromatic light monochromatic light• lat. chroma = color 

400 500 600 700 wavelength [nm]

intensity [W]

400 500 600 700 wavelength [nm]

intensity [W]

© Bedrich Benes

Color matching experiment

© Bedrich Benes

Color Matching Experiment• Let’s have three 

monochromatic lights (R, G, and B)

• They are called tristimulus values

• or the primaries• User can change their 

intensity • The goal is to match 

the unknown color 

RGB

© Bedrich Benes

Reflectance

© Bedrich Benes

Color of an Object• Object is characterized by its ability to 

reflect material • This is called reflectance

© Bedrich Benes

Color of an Object• Radiance – the incoming light• Irradiance – the reflected light

© Bedrich Benes

Types of Reflection• Two common, but extreme cases

© https://www.olympus-lifescience.com

Specular reflection Diffuse reflection

radiance irradiance

© Bedrich Benes

Light Reflection

400 500 600 700 wavelength [nm]

intensity [W]

400 500 600 700 wavelength [nm]

reflectance

400 500 600 700 wavelength [nm]

irradiance

radiance

reflectance

irradiance

© Bedrich Benes

Light Reflection• What is the color of green object 

illuminated by red light?

Reflectance  [0,1,0]Incoming light  [1,0,0]Reflected light [0*1, 1*0,0*0] = [0,0,0]

© Bedrich Benes © Bedrich Benes

Meaning of Color

© 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• Red seems closer than blue

Why?

© Bedrich Benes

Meaning of Color• Red seems closer than green.

Why?

© Bedrich Benes

Meaning of Color • Used in art 

• Blue background conveys depth 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 Temperature

© Bedrich Benes

Color temperatureWilliam Kelvin (1800)

Heated carbon block glows

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 is used in digital cameras

© Bedrich Benes

Color temperature

© Dyo Lighting

© Bedrich Benes

Color Scheme

© Bedrich Benes

Color Scheme and ContrastColor scheme

is the total set of colors used by an image

Color scheme creates the impression before the viewer sees the contents!

© 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 

increasing color intensity makes the result brighter• 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 

decreasing color intensity, makes the result brighter• 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 and 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 similar to 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

Distance of two points in 3D

Euclidian distance: 

© Bedrich Benes

Example

What is the distance between red and green?

Euclidian distance: 

© Bedrich Benes

Linear vs. non‐linear color space• Perceptual distance between colors is 

different that the Euclidian one. (Why?)

and are perceived as different.

• We are more sensitive in low intensities and some colors.

© Bedrich Benes

L*ab 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

Perceptual Corrections

© 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

standard RGB (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 range of colors the device is able to reproduce

• The better device the higher the gamut

• Gamut warning, gamut alarm discrepancy between two devices

© Bedrich Benes

Color Gamut• Software usually 

displays the warning

• Example fromAdobe Photoshop

© Bedrich Benes

Problems with printing• Printer’s color gamut is limited• Especially light colors are problematic• Some adding more primaries• CMYKLcLm: adds light cyan +light magenta• CMYKOrGr: adds orange + green

• More expensive

© Bedrich Benes

HSB, HLS, HSV, H whatever• HSB (Hue, Saturation, Brightness)

• An intuitive color system

• Corresponds to the artistic conceptof tint, shades, and tone 

© Bedrich Benes

H whatever• Hue cleanliness of the perceived color• Saturation/Chroma: how much 

of the color is presented• Brightness/Value: how much 

the achromatic lightis presented

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

By Hcl-hcv_models.svg: Jacob RusHSV_color_solid_cone.png: SharkDderivative work: SharkD Talk - Hcl-hcv_models.svgHSV_color_solid_cone.png, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=9802544

© Bedrich Benes

Going to Grayscale

© Bedrich Benes

Going Grayscale• How can we convert an image to grayscale?• Gray color values have• An intuitive conversion

© Bedrich Benes

Going Grayscale• Human eye is the most sensitive 

to the green color (Why?)• Perception‐corrected equation is

© Bedrich Benes

Readings• Hill, F.S., Computer Graphics, Prentice Hall 

1990, pages 564‐>

• Shirley, P, et al, Fundamentals of Computer Graphics, 2nd edition, pages 451‐476

• Cohen, Wallace, Radiosity and Realistic Image Synthesis

© 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