1 EEL 5771-001 Introduction to Computer Graphics PPT12: Color models Vijay Kakadiya U44745970.

1

EEL 5771-001Introduction to Computer Graphics

PPT12: Color models

Vijay Kakadiya U44745970

2

Properties of light

• What is color?

Technically speaking, colors are the way our brain, by use of our eyes, interprets electromagnetic radiation of a wavelength within the visible spectrum. Visible light lies between 400 and 700 nanometers.

• Spectral Color A spectral color is a color that is evoked by a single wavelength of light in the

visible spectrum, or by a relatively narrow band of wavelengths. Every wavelength of light is perceived as a spectral color, in a continuous spectrum; the colors of sufficiently close wavelengths are indistinguishable.

3

• Color frequency band Traditionally the spectrum is divided into seven separate bands. The first person

to really define this was Newton. Some people believe that he included the color indigo only to make seven steps to match the number of notes in major musical scale. These are the approximate wavelengths for each of the colors:

4

Properties of light

• When light strikes an object it is: 1. Reflected2. Transmitted 3. Absorbed

5

Properties of light

• What happens to the light depends on the material

1. Transparent (clear) materials- transmit light2. Translucent (see through) materials- scatters the transmitted light3. Opaque (not see through) materials- absorbs and reflects

6

Properties of light

• Color of objects is the color it reflects1. Ex- an orange is orange because it absorbs every color BUT orange, instead it reflects orange.2. If you do not shine orange light on it, it will appear black3. Black is the absence of color, white is the blending of all colors

7

Properties of light

1. Reflection- when an object or wave bounces back off a surface 2. Law of reflection- angle made from incoming wave = the angle made from

reflected wave

8

Properties of light

1. Refraction- bending of light waves due to a change in speed2. Lens- curved glass or transparent material that refracts light3. Convex lens- thicker in the center than the edges (bends light in)

9

Properties of light

• The color spectrum shows the range of wavelengths of energy that are visible to the human eye. Variation in wavelengths alters the colors we see. As Isaac Newton showed (1666) with his prisms, white light is a mixture of all the colors of the visible spectrum.

10

Properties of light

• The frequency ( or mix of frequencies ) of the light determines the color.• The amount of light(sheer quantity of photons ) is the intensity.• Three independent quantities are used to describe any particular color : hue, saturation, and lightness or brightness or intensity. • The hue is determined by the dominant wavelength (the apparent color of the light)

When we call an object "red," we are referring to its hue. Hue is determined by the dominant wavelength.

11

Properties of light

• The saturation of a color ranges from neutral to brilliant. The circle on the right is a more vivid red than the circle on the left although both have the same hue.

• The saturation is determined by the excitation purity , and depends on the amount of white light mixed with the hue. A pure hue is fully saturated, i.e. no white light mixed in. Hue and saturation together determine the chromaticity for a given color.

12

Properties of light

• Lightness or brightness refers to the amount of light the color reflects or transmits.

Finally, the intensity is determined by the actual amount of light, with more light corresponding to more intense colors ( the total light across all frequencies).

13

• Light that has a dominant frequency or set of frequencies is called chromatic.

• Achromatic light has no color - its only attribute is quantity or intensity. Greylevel is a measure of intensity. The intensity is determined by the energy, and is therefore a physical quantity.

•On the other hand, brightness is determined by the perception of the color, and is therefore psychological. Given equally intense blue and green, the blue is perceived as much darker than the green. Note also that our perception of intensity is nonlinear, with changes of normalized intensity from 0.1 to 0.11 and from 0.5 to 0.55 being perceived as equal changes in brightness.

Properties of light

14

Primary Colors: Red, yellow and blueIn traditional color theory (used in paint and pigments), primary colors are the 3 pigment colors that can not be mixed or formed by any combination of other colors. All other colors are derived from these 3 hues.

Secondary Colors: Green, orange and purpleThese are the colors formed by mixing the primary colors.

Tertiary Colors: Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-greenThese are the colors formed by mixing a primary and a secondary color. That's why the hue is a two word name, such as blue-green, red-violet, and yellow-orange.

Color models

15

Color models

1. A color scheme based on analogous colors

Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates.

16

Color models

2. A color scheme based on complementary colors

Complementary colors are any two colors which are directly opposite each other, such as red and green and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid. These opposing colors create maximum contrast and maximum stability.

17

Color models

3. A color scheme based on nature

Nature provides a perfect departure point for color harmony. In the illustration above, red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for color harmony.

18

Color models

Additive Color Mixing

19

Color models

Subtractive Color Mixing

20

Color models

Color Matching Process

Basis for industrial color standards

21

Color models

Color Matching Experiment 1

22

Color models

Color Matching Experiment 1

23

Color models

Color Matching Experiment 1

24

Color models

Color Matching Experiment 1

25

Color models

Color Matching Experiment 2

26

Color models

Color Matching Experiment 2

27

Color models

Color Matching Experiment 2

28

Color models

Color Matching Experiment 2

29

Making Tints and Shades

1. A shade of color is made by mixing that color with black.

2. A tint of color is made by mixing that color with white.

For eg. Below painting by Vincent Van Gogh, Fields in a Rising Storm, has tints and shades of blue in the sky, and tints and shades of green in the fields.

Color mixing

30

The lightness or darkness of a color is called its value.

• Tints are light values that are made by mixing a color with white. For example, pink is a tint of red (red+white), and gray is a tint of black (black+white).

• Shades are dark values that are made by mixing a color with black. Maroon is a shade of red, and navy is a shade of blue.

Color mixing

31

Traditional “Painter’s Color Wheel”

Primary Colors (RYB) are pure pigments that cannot be mixed:

• Red• Yellow • Blue

RYB is used primarily with traditional pigment-based art media (like painting)

Color mixing

32

Color mixing

So What Do Artists Do With All of This Info?

• Artists use the color wheel as a guide to help them choose colors to use in their artworks.

• The color wheel can help us see various color schemes.

• Artists often use one color scheme as the base palette for a painting.

33

Color mixing

Color Schemes

Some color schemes artist use are:

MonochromaticComplementaryAnalogousWarm ColorsCool Colors

34

Color mixing

Monochromatic

A monochromatic color scheme is one color and its tints and shades.

To complete a painting with a blue monochromatic color scheme, you could use the colors on this palette. Examples for monochromatic painting below. Notice how Mr. Chagall used blue and its tints and shades.

35

Color mixing

Complementary

• Complementary colors are directly opposite each other on the color wheel.• Each color has only one complementary color. Next to each other, each color appears as vivid as it can.

This painting has a complementary color scheme. Notice how Mr. Cezanne used blue and orange and their tints and shades.

36

Color mixing

Analogous

When an artist uses two or more colors that are next to each other on the color wheel and that are closely related, it is called an analogous color scheme.

This painting has an analogous color scheme. Notice how Mr. VanGogh used yellow, yellow-green, green, blue-green, and their tints and shades.

37

Color mixing

Warm Colors

• Some of the colors of the color wheel are referred to as warm colors.• When an artist uses these colors, they are creating a painting with a warm color scheme.• This painting has a warm color scheme. Notice how Mr. Vermee used red, red-orange, orange, yellow-orange, yellow and their tints and shades.

38

Color mixing

Cool Colors

• The other half of the color wheel’s colors are referred to as cool colors.• When an artist uses these colors, they are creating a painting with a cool color scheme.

39

Color models

Commission Intenationale de l’Eclairage (CIE), 1931 defined three standard primaries, called X,Y,Z to replace Red, Green, Blue

The primaries are used to match color by using three corresponding color -matching functions

40

CIE Chromatic Diagram

The Figure below shows the XYZ space

Chromatic values depend on dominant wavelength and saturation and independent of luminous energy. Consider a color C, the we can Write C = XX + YY + ZZ Normalize Against X+Y+Zx = X/(X+Y+Z) y = Y/(X+Y+Z) z = Z/(X+Y+Z) We know that x+y+z = 1, and the luminance information usually in Y (Y cef.), thus we can recover X,Y,Z X = Y (x/y) ; Y = Y ; Z = Y(1-x-y)/y Plotting these parameters

Chromaticity diagram

41

About XYZ Space

When two color A and B are added together new color C lies on the line connects both colors. In the side Figure, B defines the dominant wavelength, and the ratio AC to BC expressed as a percent of the excitation purity of A. The closer A to C the more light A includes.

Complementary colors are those that can be mixed to produce white light. D and E on the side Figure are complementary colors. Nonspectral color are those that can not be defined by dominant wavelength such as F. Color gamuts or color ranges is the effect of adding colors together

Chromaticity diagram

42

Chromaticity diagram

43

Chromaticity diagram

1. Any color on a straight line can be generated by shining various amount of color a & b on the screen.2. Complementary color can be found f->e with respect to w.3. Dominant wave length can be found.4. Saturation or purity can be calculated gw /hw for g.

Range of color that can be produced on a device

Use of CIE chromaticity diagram

44

Chromaticity diagram

Purity is the percentage of distance to the edge. At the edge, the purity is 100% and at the white point it is 0%

Purity is roughly equivalent to the term "saturation" in the HSV color model. The property "hue" is as used in general color theory and in specific color models such as HSV and HSL color spaces, though it is more perceptually uniform in color models such as Munsell, CIELAB or CIECAM02.

45

RGB color model

Tristimulus Theory of color

Important principle:Any color spectra is perceived by Any color spectra is perceived by sensors with 3 different sensors with 3 different response frequencies!

Tristimulus theory of color:Color is inherently a three-dimensional space.

Metamers:If two colors produce the same If two colors produce the same tristimulus values then they are visually indistinguishable.

46

RGB color model

• This is an additive model, i.e. the colors present in the light add to form new colors, and is appropriate for the mixing of colored light for example. The image on the left of figure shows the additive mixing of red, green and blue primaries to form the three secondary colors yellow (red + green), cyan (blue + green) and magenta (red + blue), and white ((red + green + blue). The RGB model is used for color monitors and most video cameras.

• The figure below, left one shows the additive mixing of red, green and blue primaries to form the three secondary colors yellow (red + green), cyan (blue + green) and magenta (red + blue), and white ((red + green + blue). The figure on the right shows the three subtractive primaries, and their pair wise combinations to form red, green and blue, and finally black by subtracting all three primaries from white.

47

RGB color model

The color cube sits within the CIE XYZ color space as follows.

48

YIQ color model

Minimum content:•The color model•Conversion between RGB and YIQ

49

YIQ color model

The YIQ (luminance-inphase-quadrature) model is a recoding of RGB for color television, and is a very important model for color image processing. The importance of luminance was discussed.The conversion from RGB to YIQ is given by:

The luminance (Y) component contains all the information required for black and white television, and captures our perception of the relative brightness of particular colors. That we perceive green as much lighter than red, and red lighter than blue, is indicated by their respective weights of 0.587, 0.299 and 0.114 in the first row of the conversion matrix above. These weights should be used when converting a color image to greyscale if you want the perception of brightness to remain the same.

50

YIQ color model

Figure: Image (a) shows a color test pattern, consisting of horizontal stripes of black, blue, green, cyan, red, magenta and yellow, a color ramp with constant intensity, maximal saturation, and hue changing linearly from red through green to blue, and a greyscale ramp from black to white. Image (b) shows the intensity for image (a). Note how much detail is lost. Image (c) shows the luminance. This third image accurately reflects the brightness variations perceived in the original image

51

• Cyan, Magenta, and Yellow (CMY) are complementary colors of RGB. They can be used as Subtractive Primaries.

• CMY model is mostly used in printing devices where the color pigments on the paper absorb certain colors (e.g., no red light reflected from cyan ink).

CMY color model

52

CMY color model

Conversion between RGB and CMY

Convert White from (1, 1, 1) in RGB to (0, 0, 0) in CMY:

53

CMYK color model

• Used for: printer printing• Use the subtractive color mixing• Axes: Cyan

MagentaYellowK: black

Conversion from RGB:

C = 255 -Y - 1.4021(Cr-128)M = 255 - Y + 0.3441(Cb-128) + 0.7142(Cr-128)Y = 255 - Y - 1.7718(Cb -128)K = min (C, M, Y)

54

HSV color model

This color model is based on polar coordinates, not Cartesian coordinates.

HSV is a non-linearly transformed (skewed) version of RGB cube

Hue: quantity that distinguishes color family, say red from yellow, green from blue

Saturation (Chroma): color intensity (strong to weak). Intensity of distinctive hue, or degree of color sensation from that of white or grey

Value (luminance): light color or dark color

55

HSV color model

HSV Hexcone

Intuitive interface to color

56

HLS color model

HSL is short for Hue, Saturation and Luminance (or brightness).

The HSL color space defines colors more naturally: Hue specifies the base color, the other two values then let you specify the saturation of that color and how bright the color should be.

As you can see in the image, hue specifies the color. Hue is normally specified as either degrees ranging from 0° to 360° or as numbers from 0 to 6, in the image at the left side both starting at the 3 o'clock position and measured anti-clockwise.

57

HLS color model

There are 6 base colors:

The following six luminance sliders show you what happens with colors if you change the luminance:

58

In HLS, Hue is defined in the same way as in HSB/HSV, Lightness is the average of the largest and smallest RGB components and saturation depends on Lightness:

HLS color model

59

http://www.colorsontheweb.com/colorinformation.asphttp://science-edu.larc.nasa.gov/EDDOCS/Wavelengths_for_Colors.htmlhttp://hyperphysics.phy-astr.gsu.edu/hbase/vision/specol.htmlhttps://en.wikipedia.org/wiki/Visible_spectrumhttps://en.wikipedia.org/wiki/Color_visionhttps://en.wikipedia.org/wiki/Spectral_colorhttp://www.smusd.org/cms/lib3/CA01000805/Centricity/Domain/1876/light.pptxhttp://www.colorado.edu/physics/phys1230/phys1230_fa08/Chapter1.ppthttp://cpsc.ualr.edu/milanova/image_processing/week1/Color_07_07_04.ppthttp://www.colormatters.com/color-and-design/basic-color-theoryhttps://lincoln.ccsdschools.com/UserFiles/Servers/.../ColorTheory101.ppthttp://cpsc.ualr.edu/milanova/image_processing/week1/Color_07_07_04.ppthttp://www.cs.lamar.edu/faculty/osborne/5335/Tito.ppthttp://vision.vein.hu/~schanda/Colorimetry/4aCIE%20colour2.ppthttps://en.wikipedia.org/wiki/Chromaticityhttps://luthuli.cs.uiuc.edu/~daf/book/bookpages/Slides/Color.ppthttp://en.wikipedia.org/wiki/HSL_and_HSVhttp://web.eecs.utk.edu/~huangj/CS594F08/color.ppthttp://cse.lehigh.edu/~glennb/mm/ColorSteveZanias.ppthttp://www.chaospro.de/documentation/html/paletteeditor/colorspace_hsl.htm

References