1EEL 5771-001

Introduction to Computer Graphics

PPT12: Color models

2

Properties of light

What is color?•In physical terms, color is electromagnetic radiation within a narrow frequency band

– Other frequency bands include • Radio waves, microwaves, infrared waves, and x-rays

Spectral Color•Each frequency value within the visible region corresponds to a distinct spectral color•At the low end is red and at the high end is violet•For a spectral color, its wavelength and frequency are inversely proportional

– c = λf• λ is the wavelength• f is the frequency

•Color frequency band– Defined in terms of wavelength

• 780 nm to 380nm

3

Properties of light

Light•Oscillating transverse electric and magnetic fields propagating through spaceFrequency•The rate of the oscillation between the fieldsPeriod•The time between any two consecutive positions on the wave that have the same amplitude•T = 1/fWavelength•The distance the wave travels between the beginning of two consecutive oscillations•c = λfColor of objects•When light hits an object some of the frequencies are absorbed while others are reflected

– The color of the object is the combination of the reflected frequenciesColor of light•The red end of the spectrum is described as having a dominant frequency

– The dominant frequency of a light source is called its hue, a.k.a. the color of the light

4

Properties of light

Energy distribution of white light•Each frequency component within the visible range contributes approximately equally

Energy distribution of dominant frequency•If one frequency contributes much more than other frequencies

– The light will be the hue of that frequency

5

Color models

Primary colors•The hues that are chosen as the sources for all other color mixing in the color model•Color gamut

– The set of all colors that can be produced from the primary colorsComplementary colors•Two primary colors that produce white•Example: red and cyanColor mixing and matching functions•Define the amount of each of the primary colors needed to produce any spectral color•Example graph below

6

Color mixing

Generating tints, shades, and tones•Starting with a pure color

– Mixing with black will produce different shades– Mixing with white will produce different tints– Mixing with both black and white will produce different tones

Artist’s color scheme•The set of colors that the artist uses to

create a piece of art

7

Color models

8

Chromaticity diagram

The image to the right is the chromaticity diagram for the normalized XYZ color space

The x and y coordinates are the x and y values from the equations on the previous slide

The output color is the color at that coordinate location

Points along the curve are the spectral colors•Except the line connecting red and violet

• This is known as the purple line and it is not part of the spectrum

9

Chromaticity diagram

Color gamut•All of the possible colors that can be mixed from some given colors•In the chromaticity diagram a color gamut

– Between two colors is identified as the straight line between them– Between three or more colors is the polygon formed by the points

Complementary colors•C is the point of white light in the diagram•Complementary colors can be seen on the diagram

– The line between the colors must pass through C– The respective distance each color is from C on the line

• Represents the amount of each color that will be needed to mix white

Color gamut of 3 colorsAA and D are complementary

10

Chromaticity diagram

The dominant wavelength of a color can be determined by drawing the straight line through the sample point and C

The spectral color that the line hits is the dominant wavelength of the sample color

The purity is defined as the relative distance the sample point is from C compared to the distance from C to the dominant wavelength

11

RGB color model

Tri-stimulus theory of vision•Our eyes perceive color through the stimulation of three visual pigments in the cones of the retina

– One of the pigments is most sensitive to red light

– Another is most sensitive to green light– And the last pigment is most sensitive

to blue light•By comparing the intensities in a light source, we perceive the color of the light•This theory is the basis for the RGB color model

– This is the model used to output color from computer monitors

– This model can be represented by the unit cube on the right

12

RGB color model

Color cube•Used to represent the RGB color model•Examples below•The origin is black

– White is opposite of black at coordinate (1,1,1)•Each axis represents one of the primary colors

RGB color gamut•It is clear from the diagram below that the RGB gamut cannot display all colors

13

YIQ color model

The YIQ color model•NTSC color encoding for forming a composite video signal•Y component the same as for XYZ color model (luminance)•I and Q give the chromaticity information

– I contains orange-cyan color information– Y contains green-magenta color information

•Y is stored with higher precision than I and Q because we can detect slight changes in brightness more easily than slight changes in hueConversion between RGB and YIQ•Y = 0.299 R + 0.587 G + 0.114 B•I = R – Y•Q = B – Y

From YIQ to RGB

14

CMY color model

CMY color model•Very similar to GRB

– RGB is additive– CMY is subtractive

•C is cyan•M is magenta•Y is Yellow•Looking at the CMY color cube to the right

– It is clear that it is similar to RGB– Except the origin is now white– (1, 1, 1) is now black

• Because it is the subtraction of all three colors

conversions

15

CMYK color model

The CMY printing process uses four ink dots•Three are the CMY components•The last is a black component

– K is the black parameter•The conversions between CMYK and RGB are very similar to those between CMY and RGB

– From RGB to CMYK• Use RGB to CMY conversion• Set k = max(R, G, B) and then subtract k from each of C, M, and Y

– From CMYK to RGB• Use CMY to RGB conversion• Set k = min(R, G, B)• Subtract k from R, G, and B

16

HSV color model

Sometimes easier to understand concept by using the concepts rather than a set of primary colors•HSV is centered on idea of taking a spectral color and then mixing it with black and white

– H parameter represents the hue– S parameter represents the saturation– V parameter represents the value

•The interaction between the three parameters can be seen in the image below– H is the rotation about the vertical axis– S is horizontal distance– V is the vertical distance

17

HSV color model

Generating tones with hue, value and saturation•Start with a hue

– This is the base color•The value of S is the purity of the color

– A value of 1 is pure– A value of 0 is grayscale

•The value of V is the amount of black added to the color– A value of 1 means no black added– A value of 0 means the color will be black

18

HLS color model

• Similar to the HSV color model, HLS is based on intuitive color parameters• Used by the Tektronix Corporation• The color space of the model can be seen in the image below

– Has a double-cone shape• H parameter is the hue• L parameter is the lightness• S parameter is the saturation• To get a color in the HLS color model

– First, choose a hue– Then increasing L brightens

the color– Decrease L to darken the color– Decrease S to move toward

grayscale

19

References

https://color.adobe.com/http://imagine.gsfc.nasa.gov/Images/science/EM_spectrum_compare_level1_lg.jpghttp://www.mathpages.com/home/kmath578/kmath578.htmhttp://escience.anu.edu.au/lecture/cg/Color/hue.en.htmlhttps://en.wikipedia.org/wiki/CIE_1931_color_spacehttp://power.arc.losrios.edu/~worsfob/Web/colors.htmlhttp://homepages.inf.ed.ac.uk/rbf/CVonline/LOCAL_COPIES/OWENS/LECT14/lecture12.htmlhttp://escience.anu.edu.au/lecture/cg/Color/printCG.en.htmlhttps://drnsg.files.wordpress.com/2013/01/dominantwavelengthpurity.pnghttp://www.willamette.edu/~gorr/classes/GeneralGraphics/Color/tristimulus.htmhttp://www.eizoglobal.com/library/basics/lcd_monitor_color_gamut/http://i.stack.imgur.com/foGIn.pnghttp://dystopiancode.blogspot.com/2012/06/yiq-rgb-conversion-algorithms.htmlhttp://www.cs.princeton.edu/courses/archive/fall99/cs426/lectures/raster/sld024.htmhttps://www.cs.cf.ac.uk/Dave/Multimedia/node190.htmlhttps://www.optimalprint.com/en/color-guidehttps://en.wikipedia.org/wiki/HSL_and_HSVhttp://infohost.nmt.edu/tcc/help/pubs/colortheory/web/hsv.htmlhttp://www.autodesk.com/techpubs/aliasstudio/2010/index.html?url=WS1a9193826455f5ff-54f556ca1166ac9ee9e-7837.htm,topicNumber=d0e195248