Introduction to Color Theory

Transcription

1 Systems & Biomedical Engineering Department SBE 306B: Computer Systems III (Computer Graphics) Dr. Ayman Eldeib Spring 2018 Introduction to With colors you can set a mood, attract attention, or make a statement. is a system of rules and guidance for mixing various colors. Color can be your most powerful design element if you learn to use it effectively. Being able to use colors consciously and harmoniously can help you create spectacular visualization and animation. How to calculate the color of a pixel? 1

2 3/25/2018 The Foundation of Color At its core, color is light. Light: electromagnetic phenomenon (different wavelength = different color). Light is composed of many different colors and the various mixtures of light compose the colors that we can see. Color: Interaction of light Color Wheel and eye-brain system. The Foundation of Color Primary Colors: Colors that can not be created by mixing other colors. Secondary Colors: Colors made by mixing primaries colors. Intermediate (Tertiary) Colors: Colors made by mixing primaries and secondary colors. Color Wheel 2

3 The Foundation of Color glbegin (GL_TRIANGLES); glcolor3f (1.0, 0.0, 0.0); // red glvertex2iv (p1); glcolor3f (0.0, 1.0, 0.0); // green glvertex2iv (p2); glcolor3f (0.0, 0.0, 1.0); // blue glvertex2iv (p3); glend ( ); An OpenGL Example Types of Color Theories Subtractive Theory The subtractive, or pigment theory deals with how white light is absorbed and reflected off of colored surfaces. Additive Theory The Additive, or light theory deals with radiated and filtered light. 3

4 Subtractive Black absorbs most light. White reflects most light. Colored Pigments absorb light and reflect only the frequency of the pigment color. All colors other than the pigment colors are absorbed so this is called subtractive color theory. The primary colors in Subtractive Theory are: Cyan ( C ) Magenta ( M ) Yellow ( Y ) Black ( K ) Used in Printing and Painting Additive Black radiates no light. White (sun) radiates all light. Video is the process of capturing and radiating light, therefore it uses Additive (Light) Theory not Subtractive (Pigment) Theory. The primary colors in Additive Theory are: Red ( R ) Green ( G ) Blue ( B ) The primary colors add together to make white. Light Theory is also called Additive Theory. Used in Television, theater lighting, computer monitors, and video production 4

5 The Color Wheel Colors on the wheel can be described using three parameters: Hue: degrees from 0 to 360 Saturation: brightness or dullness Value: lightness or darkness Hue The Color Wheel Hue or Spectral Color is represented as an angle to distinguish the dominant color (frequency). Primary Colors: 0 = Red 120 = Green 240 = Blue Secondary Colors: 60 = Yellow 180 = Cyan 300 = Magenta Angle Color 0 60 Red Yellow Green Cyan Blue Magenta 5

6 3/25/2018 The Color Wheel Saturation Saturation or Chroma is the intensity of a color; i.e. defines the purity (vibrancy) of the color to indicate if it is mixed with other colors. A highly saturated color is bright and appears closer to the edge of the wheel. A more unsaturated color is dull. A color with no saturation is achromatic or in the grey scale. The Color Wheel Value Value represents the luminescent contrast value between black and white. 6

7 The Color Wheel 3D Three parameters to describe a color: Hue Chroma Value Tone = Shade + Tint What is the Tone? 7

8 Color Schemes Systematic ways of selecting colors Monochromatic Complementary Analogous Warm Cool Color Schemes Monochromatic One Hue (Color) and its values of Tint and Shade 8

9 Color Schemes Complementary (note spelling--not complimentary) Colors that are opposite on the wheel. Two colors when mixed produce white (gray in general). High Contrast Color Schemes Analogous A selection of colors that are adjacent. Minimal Contrast 9

10 Color Schemes Warm Right half of the wheel gives warmer colors. Warm colors make objects look closer in a painting or drawing. The warm colors found in fire and the Sun. Color Schemes Cool Left half of the wheel gives cooler colors. Cool colors make objects tend to recede in a composition. The cool colors found in snow and ice. 10

11 Color Spaces (or Models) The RGB Color Space - Computer Displays The HSV Color Space The HLS Color Space The HSB Color Space A color space is a method by which we can specify, create and visualize color. The CIE Color Space Color Standard The CMY Color Space - Printing The YIQ, YUV, YCrCb Color Space Television Opponent Colors Biological The color space is a 3D space; hence, any color can be defined as a 3D vector where each element in the vector represents one color component. RGB Color Spaces (or Models) Used in Video and computer graphics It is represented as the cube shown with Cartesian coordinates. Each of the three axes represents a primary color. Each point on or inside the cube represents a color where the coordinates of this point represent the components of the primary colors that contribute to the current color. Each component should have a value from 0 to 255 (or from 0.0 to 1.0). The grayscale from 0,0,0 to 255,255,255 (0,0,0 to 1,1,1) represents the shades of gray from black to white. 11

12 HSV Color Spaces (or Models) HSV (Hue, Saturation, Value) Saturation and Value are represented in % or within a range. Value represents the brightness of the color. Value is represented as the centerline of the cone. Value 0.0 (0) (black) is at the lower tip of the cone. Value 1.0 (100) (white) is at the center point of the upper circle. Shades of gray are represented along this line between black and white. The HSV color space is quite similar to the way in which humans perceive color, which is not always the case with RGB. RGB to HSV Transformation The conversion from a RGB to a HSV model is described by these formulas: v = max = max (r,g,b) min = min(r,g,b) s = c/v where: c = chroma = max (r,g,b) - min (r,g,b) h = depends on which of r,g,b is the maximum The meaning of the variables: r,g,b the red, green, blue components of the RGB model h,s,v - the hue, saturation, value components of HSV model The components of the RGB model (r,g,b), saturation (s) and value (v) should have values in the range [0,1], while the hue (h) should have values in the range [0,360] 12

13 HSV to RGB Transformation The conversion from a HSV to RGB a model is described by these formulas: The meaning of the variables: h,s,v - the hue, saturation, value components of HSV model r,g,b the red, green, blue components of the RGB model c - chroma m - the RGB component with the smallest value x - an intermediate value used for computing the RGB model The components of the RGB model (r,g,b), saturation (s) and value (v) should have values in the range [0,1], while the hue (h) should have values in the range [0,360] Gamma Correction A typical CRT has a non-linear voltage-to-light transfer function with a power law usually denoted by gamma. Power-Law Transformations Gamma Correction I = c * I 1/γ γ < 1 Useful for enhancing details in the darker regions of the image at the expense of detail in the brighter regions. γ > 1 Useful for enhancing details in the brighter regions of the image at the expense of detail in the darker regions. 13

14 Gamma Correction Original γ = 0.6 γ = 0.4 γ = 0.3 Gamma Correction Original γ = 3.0 γ = 4.0 γ =

15 Digital Image A digital image is composed of pixels which can be thought of as small dots on the screen. A digital image is an instruction of how to color each pixel. In the general case we say that an image is of size m- by-n if it is composed of m pixels in the vertical direction and n pixels in the horizontal direction. Let us say that we have an image on the format 512-by pixels. This means that the data for the image must contain information about pixels. Digital Image Color images have 3 values per pixel; monochrome images have 1 value per pixel. grid of squares, each of which contains a single color each square is called a pixel (for picture element) 15

16 Digital Image Pixel A digital image, I, is a mapping from a 2D grid of uniformly spaced discrete points, {p = (r,c)}, into a set of positive integer values, {I( p)}, or a set of vector values}. At each column location in each row of I there is a value. The pair ( p, I( p) ) is called a pixel (for picture element). Digital Image Pixel p = (r,c) is the pixel location indexed by row, r, and column, c. I( p) = I(r,c) is the value of the pixel at location p. If I( p) is a single number then I is monochrome. If I( p) is a vector (ordered list of numbers) then I has multiple bands (e.g., a color image). 16

17 Digital Image A D 1D E 0C 0A 0A 0A B A 08 0B 0A 0D 0B 0B 0C F 0B E 0C A 0A 0B 0F 0A 0C B 07 0B 05 0B E 0C A A A C 0B 0A A 0C 0A 0A 08 0A 0A A B 14 0F 0F 0D 0A 0E 0A 0C 0C 0E 0A 0C 0B 09 0A 09 0A 0A 09 0B 0B 05 0C 0C 0A B 10 0A 0D 0D 0B 0D 0C 0B 0B 0C 0D 0B 0B 0A 0A 0A 0B 0C C 15 0D E C 0D 0C 0C 0A 0B 0B 09 0C 0F D 07 0B D D 0A F 0E B 0C 0F 0F 0E 0C 10 0D E 3F A 09 0A C B 10 0F 0C D 0F 0D 0D 0B 25 7A 7F 79 6D 80 6E 54 0C 0D 09 0A F 0D 12 0E 10 0E 0F F E 8C 73 7A 5C 1E 05 0A 0F 0E 0C F 15 0D D B A 12 0A 0B E 1A F 7D C 7F 6F 5F 0B D 0C D E 36 5B 29 2C F AF BC AF AB 9E A F AE AD A E 0A 0C B B 1A 1A 2B 1B 2A C 1B 26 4C 40 BA BB B5 AE A 8A 9A B9 BB AD 9C 8A B 0D 0F 0B A 18 1C 1E D 3F 4E B 1B AF AB B1 AC A AA 9F AD 7F 0C 0B 0E 0B 0C 0C C 24 2E B B 2B A1 AB AC B2 A6 A6 A F 10 1C F 0C 0F A C F 33 1F B 4D A3 A5 99 8D 7A 4E 0E 1B F 0F B 01 1D 1F 2B F 40 2F 2D 2A 25 2B 2C E 55 5E 62 6D 6D 6E 68 5E 43 0D A F 2A B 45 2E 3A D 2F 1F 1E 1B C 3F 3C D 0B 0E 11 1E 23 1B D 10 0F 12 0F A 1B 35 4A 1D 20 2C 2F 1F 1F 3B 34 1A 2A E 0C 0C 06 0C B B 0E 10 0D 0D 0F D 1E C E 0E 1A A 18 2C 2E 19 0F 0D 10 0E 0E 14 0D B 1E 17 1C 1F 1F 1F 1C C 2F B D D A 1D 1F 1D 1B 1E 1B B 22 1A 1E 1B C 0D 11 0E 12 0D C 2E E 20 1F 1F 1D 1B 1C B 1E 15 1A A E 1D B 1B A 4C 33 1C E A E Digital Image 17

18 Digital Image Digital Image Representing Digital Images The representation of an M N numerical array as a0,0 a0,1... a0, N 1 a1,0 a1,1... a 1, N 1 A = am 1,0 am 1,1... am 1, N 1 18

19 Digital Image Representing Digital Images The representation of an M N numerical array as f (0,0) f (0,1)... f (0, N 1) f (1,0) f (1,1)... f (1, N 1) f ( x, y) = f ( M 1,0) f ( M 1,1)... f ( M 1, N 1) Image File Header Format Fixed Format Fixed fields sequence. Predefined items Fixed size Field 1 Field 2 Field n 19

20 Image File Header Format Tagged Format Variable sequence of fields. Variable number of items Unlimited field size Variable size Tags have fixed size/format Tag 1 Field 1 Tag 2 Field 2 Tag i Field i... Image File Format There are a number of file formats in which one may store the images in files and retrieve them from files. These are known as image file format standards. Here we will present some of the most popularly used Image file format standards. Tagged Image Format (.tif,.tiff): The.tif format is a very broad format, which can handle anything from bitmaps to compressed color palette images. The tiff format supports several compression schemes, but is often used for uncompressed images as well. This format is popular, relatively simple, and allows color. 20

21 Image File Format JPEG (.jpg): It is the most widely used as a standard and includes a variable lossy encoding as part of the standard. Most images you find on the Internet are JPEG-images MPEG (.mpg): This format is extensively used throughout the Web and is used only for motion images. This uses compression, yielding only lossy videos. Graphics Interchange Format (.gif): This format supports 8-bit color palette images and is not very popular among the image processing researchers. Postscript (.ps,.eps,.epsf): This image format is mainly used while introducing images or figures in a book and for printing. In postscript format, gray level images are represented by decimal/hex numerals encoded in ASCII. Intensity image This is the equivalent to a "grayscale image". It represents an image as a matrix where every element has a value corresponding to how bright/dark the pixel at the corresponding position should be colored. There are two ways to represent the number that represents the brightness of the pixel: The double class (or data type). This assigns a floating number ("a number with decimals") between 0 and 1 to each pixel. The value 0 corresponds to black and the value 1 corresponds to white. The other class is called uint8 which assigns an integer between 0 and 255 to represent the brightness of a pixel. The value 0 corresponds to black and 255 to white. Binary image Image File Format This image format also stores an image as a matrix but can only color a pixel black or white (and nothing in between). It assigns a 0 for black and a 1 for white. In that sense, any pixel may be stored in 1 bit only. 21

22 Image File Format RGB image This is another format for color images. It represents an image with three matrices of sizes matching the image format. Each matrix corresponds to one of the colors red, green or blue and gives an instruction of how much of each of these colors a certain pixel should use. Therefore, a pixel requires 24 bits to store its color. (Hence comes the term 24- bit image.) The number of different colors that can be represented by one pixel is 224 = different colors. Multiframe image In some applications we want to study a sequence of images. This is very common in biological, medical imaging, and animation. For these cases, the multiframe format is a convenient way of working with a sequence of images. Image File Format Indexed image This is a practical way of representing color images. An indexed image stores an image as two matrices. The first matrix has the same size as the image and one number for each pixel. The second matrix is called the color map (Look-Up Tables - LUT) and its size may be different from the image. The numbers in the first matrix is an instruction of what number to use in the color map matrix. For example, 8-bit Color Images in which the color at each pixel is represented using an 8-bit integer. This means that the maximum number of different colors that is associated with the pixel is 256. For each pixel, an index number is stored (in 8 bits). This introduces additional complexity into the image format as the LUT is usually attached to the image. When the image colors are altered, it will be required to generate a new LUT. 22