Hsi Color Space

HSI Color Space - Color Space Conversion

| Download Demo | Support and Upgrade Policy | Pricing | Imaging Feature Comparison Chart | | Document Imaging SDK Online Help | Document Imaging ActiveX Online Help | Purchase | The HSI color space The HSI color space is very important and attractive(phân phối) color model for image processing applications because it represents color s similarly how the human eye senses colors. The HSI color model represents every color with three components: hue(sac thai) ( H ), saturation(bao hoa) ( S ), intensity ( I )(cuong do). The below figure illustrates(minh hoa) how the HIS color space represents colors.

The Hue component describes the color itself in the form of an angle between [0,360] degrees. 0 degree mean red, 120 means green 240 means blue. 60 degrees is yellow, 300 degrees is magenta. The Saturation component signals how much the color is polluted with white color. The range of the S component is [0,1]. The Intensity range is between [0,1] and 0 means black, 1 means white. As the above figure shows, hue is more meaningful when saturation approaches 1 and less meaningful when saturation approaches 0 or when intensity approaches 0 or 1. Intensity also limits the saturation values. To formula that converts from RGB to HSI or back is more complicated than with other color models, therefore we will not elaborate on the detailed specifics involved in this process.

RGB

CMY

CMYK

HSI

HSV

L*a*b

XYZ

YIQ

YUV

Home > Imaging Toolkits > Color Space Conversion > HSI

What Is Color? (cont'd) Hue Hue is what most people think of when we say "color." Hue is the name of a distinct color of the spectrum(quang phổ)—red, green, yellow, orange, blue, and so on. It is the particular wavelength frequency. This strip shows a range of hues. It is easy to point to "red" or "blue" or "yellow." Saturation Saturation is the "purity" of the color. Saturation refers to the amount of white light (or gray paint) mixed with the hue. Pastels are less saturated colors. Both of these samples below have a hue we would call "blue" but their saturation is different. Fully saturated colors are very rich and bright.

100% blue is a very saturated color

Less saturated colors look muddier, or less pure.

steelblue has gray undertones High Saturated Colors As saturation decreases, all colors become a value of gray. You can experience reduced saturation by setting your monitor to gray-scale. Since some pure hues are darker that others, the resulting desaturated grays will also be darker -- for example, compare the blue with the yellow in this chart. Low Saturation Colors

Value (Intensity, Lightness, Brightness) The value (sometimes called lightness or intensity or brightness) of a color is the amount of light or white it contains. Value refers to the intensity of light present. When light is at its fullest intensity, colors will become bright, at its least intensity, colors become dim. Unlike saturation, there isn't necessarily "less" of the color -- it is just not as intense. You might think of value as being a bit like the dimmer switch on your dining room light or the brightness knob on your computer's monitor. Turn up the switch, and the value grows brighter.

A higher value creates a whiter, brighter color.

Previous Page: Color Categories Page 1: Introduction Page 2: Additive and Subtractive Color Page 3: Color Gamut and Describing Color Page 4: Color Wheels

Next Page: Color, HSV, and RGB Models Page 5: Color Categories Page 6: Hue, Saturation, and Value Page 7: Color, HSV, and RGB Models Page 8: CMYK Model

ENDS489 Course Notes - Fall 2000 Section 1-4

Color Spaces (Based on material from Digital Imaging: Theory and Applications, H. E. Burdick, McGraw-Hill, 1997)

Computer display CRTs typically have three electron guns that illuminate three different kinds of phosphor dots on the screen. Those phosphor dots, when illuminated, glow with the red, green, and blue primary colors of light. From these primary colors, all other shades are generated. A combination of real world physical characteristics determines what the human vision system perceives as color. A color space is a mathematical representation of these characteristics. Color Spaces are always three-dimensional. There are many possible color space definitions: • • • •

Digital imagery often uses the red/green/blue color space, known simply as RGB. The cyan/yellow/magenta space, known as CYM, is used in printing. Hue, saturation, and intensity, (or HSI) is the color space typically used by artists. Intensity-chromaticity color spaces, YUV and YIQ, are used for television broadcast.

Though most work in digital imagery is performed in RGB, which is native to computer displays, many digital image processing applications require transformation to the other color spaces. Usually utility programs are provided to perform these color space transformations. Red, Green, Blue (RGB) All color spaces are three-dimensional orthogonal coordinate systems, meaning that there are three axes (in this case the red, green, and blue color intensities) that are perpendicular to one another. This color space is illustrated below. The red intensity starts at zero at the origin and increases along one of the axes. Similarly, green and blue intensities start at the origin and increase along their axes. Because each color can only have values between zero and some maximum intensity (255 for 8-bit depth), the resulting structure is the cube. We can define any color simply by giving its red, green, and blue values, or coordinates, within the color cube. These coordinates are usually represented as an ordered triplet - the red, green, and blue intensity values enclosed within parentheses as shown below. (red, green, blue) Several colors are shown mapped into their locations in the RGB cube, or color space. Black has zero intensities in red, green, or blue, so it has the coordinates (0,0,0). At the opposite corner of the color cube, white has maximum intensities of each color, or (255,255,255). Full intensity red, having zero green or blue components, also is positioned at a corner of the cube at location (255,0,0). Yellow, which is combination of red and green, is positioned at (255,255,0). Cyan and magenta, which are combinations of green and blue and red and blue,

respectively, are at (0,255,255) and (255,0,255). Finally, note that a middle gray is at the exact center of the cube at location (128,128,128). All other colors can be described by specifying their coordinates within this cube.

The RGB color space is an additive color space. Its origin starts at black, and all other colors are derived by adding various amounts of the primary colors. It is a natural choice for computer displays where black, or no light intensity, is the starting point, and the increasing intensity of the red, green, and blue electron guns provides the range of colors. Cyan, Yellow, Magenta (CYM) The CYM color space is related to the RGB color space by being the inverse of it. The origin of this color space is not black, but is white, and the primary axes of the coordinate system are not red, green, and blue but are cyan, yellow, and magenta. The color red in this space is a combination of yellow and magenta, while green is composed of yellow and cyan. Blue is made up of cyan and magenta. The following equations define how to convert from the RGB color space into the CYM color space and back again. c = max-r

m = max-g

y = max-b

r = max-c

g = max-m

b = max-y

where max is the maximum possible intensity value (for 8-bit depth resolution images this is 255). Once an image has been converted, or transformed, into the CYM color space, it cannot be displayed correctly on a computer monitor, which requires images in the RGB color space. If this resultant image is displayed, using the red, green, and blue planes for the cyan, magenta, and yellow data, respectively, an inverted or negative color image will be seen. The CYM color space is most often used in the printing industry, where images start with a white piece of paper (the origin) and ink is applied to generate colors. After years of experience, many techniques have been developed to create the highest-quality printed images at the lowest possible cost. One of these methods is called under color removal and modifies the normal CYM color space into something called CYMK, where the K stands for black. This approach notes that any CYM color has some underlying gray component, which is equal amounts of cyan, yellow, and magenta. This gray component can be generated with cheaper black ink, and small amounts of more expensive colored inks can be added to give the correct shade. In addition to being more economical, the printed image quality is increased because less ink is used overall, which in turn enhances drying and reduces the likelihood of smears. For example a color has certain components of cyan, yellow, and magenta on an arbitrary scale. In this case, 7 units of cyan ink, 5 units of yellow ink, and 9 units of magenta ink are required, for a total of 21 units. That same color can then have its underlying gray, or under color, removed. To reproduce this same color now takes 5 units of black ink, with 2 units of cyan, no yellow, and 4 units of magenta. This makes a total of 11 units of ink, only 6 units of which are expensive colors. Hue, Saturation, Intensity (HSI) Artists tend to describe scenes not in terms of red, green, and blue, but as hue, saturation, and intensity (HSI). We do not see things as quantities of primary colors mixed in certain proportions. We see the brilliant orange of a sunset or the dark, muted greens of a forest. We see things as colors, or hues, that either have a washed-out look or have deep, rich tones. This means having low or high saturation, respectively. A bright afternoon sun gives everything a high-intensity look, while dusk provides dark images of low intensity. HSI is very different three-dimensional color space from RGB or CYM. The following figure illustrates a common representation of this space. The cone shape has one central axis representing intensity. Along this axis are all the gray values, with black at the pointed end of the cone and white at its base. The greater the distance along this line from the pointed end, or origin, the brighter or higher the intensity.

If this cone is viewed from above, it becomes a circle. Different colors, or hues, are arranged around this circle - the familiar color wheel used by artists. Hues are determined by their angular location on this wheel. Saturation, or the richness of color, is defined as the distance perpendicular to the intensity axis. Colors near the central axis have low saturation and look pastel. Colors near the surface of the cone have high saturation. It may be preferable to modify an image in HSI color space rather than RGB. For example, we might want to change the color of a bright yellow car moving down a road to blue, but we want to leave the rest of the scene, including highlights and shadows on the car, unaffected. This would be a difficult task in RGB, but it is relatively simple in HSI. Because the yellow pixels of the car have a specific range of hue, regardless of intensity or saturation, those pixels can be isolated easily and their hue component modified, thus giving a different-colored car. Since almost all digital image processing systems operate on RGB images, the example described above would be performed in three steps. First, the original RGB image would be converted to HSI. Second, the hue (or saturation or intensity) would be modified, Finally, the image would be converted back to RGB. There are many techniques for transforming an image from RGB to HSI and back again because the transformation is somewhat subjective. The hue, saturation and value (HSV) system is a minor variation on the HSI system. The HSV color model, uses a hue value of 0 degrees to 360 degrees,

with red at 0. Saturation is in the range of 0 to 1, with 0 being no color (along the central axis) and 1 being on the outer edge of the cone. The value (a variation of intensity) also has a range of 0 to 1, where 0 is black and 1 is white. Note that these calculations require higher numerical precision than is offered by 8-bit integer arithmetic. It therefore is advisable to maintain a HSV image as floatingpoint numbers, or at least 16-bit or 32-bit integers, and reduce them to 8-bit values as they are being transformed back into RGB. Luminance-Chrominance The last color spaces to be discussed are those based on luminance and chrominance, which correspond to brightness and color. These color spaces are denoted as YUV and YIQ. The YUV space is used for the PAL broadcast television system used in Europe. The YIQ color space is used for the NTSC broadcast standard in North America. The two methods are nearly identical, using slightly different conversion equations to transform to and from RGB color space. In both systems, Y is the luminance or brightness component and the I and Q (or U and V) are the chrominance, or color, components. These are the variables that are changed by the brightness, color, and tint controls on a television. The advantages of using YUV or YIQ for broadcast is that the amount of information needed to define a color television image is greatly reduced. However, this compression restricts the color range in these images. Many colors that can appear on a computer display cannot be recreated on a television screen. Listed below are the equations for converting RGB colors into YUV and YIQ, and back to RGB. These equations assume that the red, green, and blue components have values between 0.0 and 1.0. Since this range is typical represented using 8-bit values between 0 and 255, they need to be scaled and processed as floating-point numbers: RGB-to-YUV Y =  .299R + .587G + .114B U = ­.147R ­ .289G + .437B V =  .615R ­ .515G ­ .100B RGB-to-YIQ Y = .299R + .587G + .114B I = .596R ­ .274G ­ .322B Q = .211R ­ .523G ­ .312B YUV-to-RGB

R = 1.00Y +  .000U + 1.403V G = 1.00Y ­  .344U ­  .714V B = 1.00Y + 1.773U +  .000V YIQ-to-RGB R = ­1.129Y + 3.306I ­ 3.000Q G =  1.607Y ­  .934I +  .386Q B =  3.458Y ­ 3.817I + 5.881Q •

Introduction

After growing tired of spending hours zoomed in at 800% magnification using the polygon lasso tool to create combined grayscale and color images in Macromedia Fireworks, I decided that there had to be a better way. Thus I embarked upon creating this application to make my life and hopefully that of others easier. This is a first attempt, and if I receive positive feedback that others would actually like to use this application, I will expand the features available when time permits.

Background This application uses unsafe code and pointers for image manipulation. Check out the "Image Processing for Dummies" articles by Christian Graus on The Code Project for a good introduction to this technique. Also, for selecting an area of the image, I used code from the article "The Secret of Marching Ants" by q123456789 on The Code Project.

Using the Code Most images consist of three bands: red, green and blue. Sometimes a fourth "alpha" band is used for transparency, but that is not relevant to this article. Each band contains a value between 0 and 255 for each pixel for a possible 16777216 colors. Therefore, selecting a color to keep in an image is not as simple as just picking a pixel and turning all other pixels that do not match that color to grayscale. Instead, some tolerance level must be used. However, this level can vary greatly depending upon the amount of color variance in the image and what colors the user desires to keep. I have found that one of the more effective methods of dealing with this is to use a ratio value between the pixel's colors. Once users select a pixel from the image that they would like to keep, the program computes the difference in value between the red and green band, red and blue band, and green and blue band. This then is a ratio that can be used over the entire image to find similar colored pixels, even though the light level may be very different. For example, this would match a pixel that had the values red = 50, green = 80, and blue = 110 to a pixel that had the values red = 180, green = 210, and blue = 240 because the difference between red and green in each is 30, etc. However, even using the ratio method described above still does not match very many pixels, a maximum of 256. To get a decent color selection, error values must be used on each band difference. Therefore, the program provides three text boxes for the user to provide an error value for the red and green difference, red and blue difference, and green and blue difference. By adding and subtracting this error value from the difference number, a much broader range of colors are included in the match. For example, if the difference between the red and green pixels is 25, and the user enters an error value of 20, all pixels with a difference between the red and green bands of anywhere from 5 to 45 will be within this range. Another useful feature is that many times the color exists in several locations on the image and the user only wants to keep it in one section. Therefore, some boundary needs

to be supplied allowing the user to select a small area from the image to keep in color. For this example program, I have just added simple code for a rectangle, although it could be expanded to any shape. I implemented just the drawing part of "The Secret of Marching Ants" program from The Code Project so that users can see the rectangle as they draw it. This necessitated drawing the image directly onto the form instead of using a picturebox where scrollbars could easily be added. That said, here is the basic image processing function in the program: Collapse private void GrayColor() { int height = user_image.Height; int width = user_image.Width; // calculate difference between each color in the selected pixel. // Note: Do not use absolute value because each pixel in the image // code below is checked in the same manner. int diffRG, diffRB, diffGB; diffRG = pixcolor.R - pixcolor.G; diffRB = pixcolor.R - pixcolor.B; diffGB = pixcolor.G - pixcolor.B; // setup color acceptance range int RGlow, RGhigh, RBlow, RBhigh, GBlow, GBhigh, xmin, xmax, ymin, ymax; RGlow = diffRG - Convert.ToInt16(tbRG.Text); // user pixel value range RGhigh = diffRG + Convert.ToInt16(tbRG.Text); RBlow = diffRB - Convert.ToInt16(tbRB.Text); RBhigh = diffRB + Convert.ToInt16(tbRB.Text); GBlow = diffGB - Convert.ToInt16(tbGB.Text); GBhigh = diffGB + Convert.ToInt16(tbGB.Text); // user selection limits xmin = rect.X; xmax = xmin + rect.Width; ymin = rect.Y; ymax = ymin + rect.Height; BitmapData bmData = user_image.LockBits(new Rectangle(0, 0, width, height), ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb); System.IntPtr Scan0 = bmData.Scan0; int nOffset = bmData.Stride - width * 3; //blue is pixel[0], green is pixel[1], and red is pixel[2] unsafe { byte* p = (byte*)(void*)Scan0; for (int y = 0; y < height; ++y) { for (int x = 0; x < width; ++x) { // if the pixel color ratio is within ratio of selected area,

which

// not in separate statements because we don't care // evaluation is not true if (x > xmin && x < xmax && y > ymin && y < ymax && p[2] - p[1] > RGlow && p[2] - p[1] < RGhigh && p[2] - p[0] > RBlow && p[2] - p[0] < RBhigh && p[1] - p[0] > GBlow && p[1] - p[0] < GBhigh) { img_array_backup[y, x] = true; } p += 3;

} p += nOffset;

} } user_image.UnlockBits(bmData); }

Note that it is not altering the bitmap directly, rather pixels that match the selected color within the user's specified error limits are assigned to true on a boolean two dimensional array. This array is used like a mask; all values of true correspond to a pixel that remains in color, otherwise they are turned into a grayscale color. This lets the function run multiple times on the same image and thus allows the user to select multiple colors before generating the final image. Now that we have an easy way to select the color and area of the image to affect, we now need an easy way for users to interpret what they have and have not already selected. Again, there are several different ways this could be done. I simply passed the user's image and the mask created in the last step to a new form. The user can then select whether to undo the color selection, add another color, or accept the image as final. When adding another color, it inverts the mask so that users see colors they have already selected as grayscale. Once the user is satisfied with the image, the following code is run to create the final image. Collapse

private void DrawImage() { int width = user_image.Width; int height = user_image.Height; BitmapData bmdata = user_image.LockBits(new Rectangle(0, 0, width, height), ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb); System.IntPtr Scan0 = bmdata.Scan0; int nOffset = bmdata.Stride - width * 3; unsafe { byte* p = (byte*)(void*)Scan0; for (int y = 0; y < height; ++y) { for (int x = 0; x < width; ++x) {

p[1]

if (!img_array[y, x]) // convert to grayscale { p[2] = p[1] = p[0] = (byte)(.299 * p[2] + .587 * } p += 3;

+ .114 * p[0]);

} p += nOffset;

}

} } user_image.UnlockBits(bmdata); DrawBackground(); // refresh the image

Using the Demo Application The demo application consists of a simple menu strip allowing the user to open and save images, and zoom in or out on the currently open image. To select a color, click on the crosshair button on the left and then click on the color in the image. The red, green, and blue labels will display the pixel value of the color selected. The error amount can be changed via the three textboxes. If you wish to apply it only to a small area of the image, select the dashed rectangle button and draw the area on the image. If no area is selected, the color will be applied to the entire image. Once the selections are made, hit the apply button. The image with the selected color will be displayed in a new form. Note that the zoom controls on the new form are via a context menu and because the image is drawn on a picturebox within a panel, scrollbars are now available. If the color affects areas or colors in the image you don't want, select the redefine color button. If you would like to add more colors, select the add color button and it will return you to the original form and show your image with the colors already selected now in grayscale. Note that you will have to select the area of the image to affect again. If the image is exactly like you want it, select the create image button and it will return you to the main form and show the final image.