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 100% blue is a

colors are very rich very saturated
and bright. color

Less saturated
steelblue has gray
colors look muddier,
undertones
or less pure.

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.

Next Page: Color, HSV, and RGB Models

Previous Page: Color Categories
Page 1: Introduction Page 5: Color Categories
Page 2: Additive and Subtractive Color Page 6: Hue, Saturation, and Value
Page 3: Color Gamut and Describing Color Page 7: Color, HSV, and RGB Models
Page 4: Color Wheels 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 floating-
point 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,
 // not in separate statements because we don't care
which
// 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)
{
 if (!img_array[y, x]) // convert to grayscale
{
p[2] = p[1] = p[0] = (byte)(.299 * p[2] + .587 *
p[1]
+ .114 * p[0]);
}
p += 3;
}
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.