Color in IDL

This tutorial introduces the main color display paradigms, and gives several examples of how IDL can be used to display your data in color.

Overview of Color Systems

RGB Color and Indexed Color are the two primary schemes in IDL for displaying color.

RGB Color

In RGB color (also referred to as True Color), a color is directly specified using three values (also known as an RGB triple): red, green, and blue. The number of bits used to represent each of the red, green, and blue values (the bit depth) depends upon the hardware and software used by the display. RGB bit depth is commonly 24 bits/pixel (eight bits each for red, green, and blue values), but there are variations on this scheme. For example, the RGBA scheme (where `A' stands for the alpha channel) uses 32 bits/pixel, with the extra eight bits used to represent color transparency.

The RGB color scheme is useful when displaying data that has its own associated color values. A photograph of an organism, for example, might best be viewed with its original color values.

Indexed Color

In Indexed Color, a color is specified using an index into a color lookup table (or palette). Each entry of the color lookup table corresponds to an individual color. In turn, each color consists of a red value, a green value, and a blue value.

Indexed color is usually implemented with 8 bit/pixel image data, because eight bits are insufficient to store enough information to directly represent a large range of colors. However, when the eight bits are used to represent indices, up to 256 indices into a separate color table can be stored.

Indexed color is useful for displaying data in false color. Using specific colors to represent specific data or data ranges allows the viewer to quickly analyze an image. In Indexed Color, it is easy to modify or substitute color lookup tables, so that image data can be visualized in different ways.

Indexed Color is easily implemented using Direct Graphics, which is the original graphics rendering system introduced in IDL. Graphic displays created using Direct Graphics are static — once created, no changes can be made without recreating the visualization being displayed. If you have used routines such as PLOT or SURFACE, you are already familiar with this graphics system.

Image Coloring Examples

The following examples show how IDL can display both Indexed Color and True Color images. Although we use the TV procedure to display Indexed Color in Direct Graphics, and the iImage utility to display a True Color image, either method can display True Color or Indexed Color images.

Indexed Color Example

The following example displays the convec.dat binary image file, which shows convection inside the Earth's mantle. We will render the image with Direct Graphics, and provide color information first using a predefined color table, and then using a custom color table.

Click on the following code sample to display the image:

; Determine the path to the file.
convecFile = FILEPATH('convec.dat', $
SUBDIRECTORY = ['examples', 'data'])

; Initialize the image size parameter.
convecSize = [248, 248]

; Import the image from the file.
convecImage = READ_BINARY(convecFile, $
DATA_DIMS = convecSize)

; Initialize display.
DEVICE, DECOMPOSED = 0
LOADCT, 34 ; Rainbow color table
WINDOW, 0, TITLE = 'convec.dat', $
XSIZE = convecSize[0], YSIZE = convecSize[1]

; Display image.
TV, convecImage

In the code sample, we do a binary read of the image file, set the color display mode to Indexed Color (DECOMPOSED = 0), and load a color table provided by IDL (table 34, the Rainbow table). Then we create a window to hold the image, and draw the image in the window using the TV procedure.

Building a Custom Color Table

Instead of using an IDL-supplied table, perhaps you'd like to define your own colors by creating a custom color table. Let's create a color table ranging from green to red.

As explained previously, a color table is simply a list of 256 colors. Each color is described by a red, green, and blue component. In IDL, a color table is implemented as a collection of three arrays (also known as vectors)--a red vector, a green vector, and a blue vector. A color table value is simply an index into the vector arrays, with the sum of the three vector colors describing the composite color.

A color table can hold any single color or range of colors, but in a custom table it is up to you to construct the arrays and fill the elements with the correct composite color values. The following method allows you to fill an array of any size with a user–determined number of color gradations.

First, determine the number of steps in the color range (a color table holds 256 colors). Then create an array of scale factors used to calculate the color steps. The following code shows how this works for an array of 5 steps:

steps = 5 
scaleFactor = FINDGEN(steps) / (steps - 1) 
print, scaleFactor 
 
0.000000     0.250000     0.500000     0.750000      1.00000 

The resulting scaleFactor array holds five coefficients that progress from zero to one in five equal intervals.

Next, determine the starting and ending values for each vector. For a color table starting at green and turning to red, the red vector will have an initial value of 0 (no red), and proceed to 255 (solid red). The following table shows the starting and ending values for each vector.

Index
Red Vector
Green Vector
Blue Vector
Green
0
0
255
0
1
1
254
0
2
2
253
0
...
...
...
...
Red
255
255
0
0

To create the red vector, choose a beginning value of zero, an ending value of 255, and a steps value of 256. The third line fills the array, starting at the beginning value, and progressing by the given number of steps to the end value:

; Create red vector 
beginNum = 0 
endNum = 255 
redVector = beginNum + (endNum - beginNum) * scaleFactor 

For example, a hypothetical red vector using a steps value of 5 would contain the following five values:

0.000000      63.7500      127.500      191.250      255.000 

The green vector is created in the same way, but using different beginning and ending values.

; Create green vector 
beginNum = 255 
endNum = 0 
greenVector = beginNum + (endNum - beginNum) * scaleFactor 

The blue vector is easy to construct. Since there is no blue component in this color table, all the blue vector values are zero. Simply fill in the blue vector with zero values using the IDL REPLICATE function.

; Create blue vector 
blueVector = REPLICATE(0, steps)  

All that remains is to load the vectors into the current color table:

TVLCT, redVector, greenVector, blueVector 

Click on the following code to create the custom color table and redraw the image:

; Create a new color table
; These variables are true for all vectors
steps = 256
scaleFactor = FINDGEN(steps) / (steps - 1)

; Create red vector
beginNum = 0
endNum = 255
redVector = beginNum + (endNum - beginNum) * scaleFactor

; Create green vector
beginNum = 255
endNum = 0
greenVector = beginNum + (endNum - beginNum) * scaleFactor

; Create blue vector
blueVector = REPLICATE(0, steps)

; Initialize display.
DEVICE, DECOMPOSED = 0

; Load the new color table
TVLCT, redVector, greenVector, blueVector

; Create a window to display the image
WINDOW, 0, TITLE = 'convec.dat', $
XSIZE = convecSize[0], YSIZE = convecSize[1]

; Draw the image
TV, convecImage

The new color table has sort of a Christmas theme to it--but no matter. You can change the color table to suit your taste.

RGB Color Example

Some types of image files, such as BMP, JPG, or GIF files, have RGB color data embedded in the file. For these types of files, every pixel displayed on the screen has an associated red, green, and blue value. These file types are often the result of photography or electromagnetic data collection, such as with digital photographs, satellite ground images, or astronomical images.

There are many types of programs that can display such images, including web browsers. For this example, we will use the IDL iImage utility, which implements color using IDL's object graphics routines.

  1. To start the iImage utility at the IDL command line, enter:
  2. IIMAGE

    The IDL iImage dialog displays.

  3. Select File → Import to display the IDL Data Import wizard.
  4. Select From a File and click Next.
  5. Click the Browse button and select examples/data/elev_t.jpg (located in the IDL distribution).
  6. Click Next.
  7. Select Image and click Finish.

Move the mouse pointer over the image. By default, the View Pan button is selected from the toolbar, which changes the pointer to a hand icon. In the Image tab on the right side of the dialog, information about the pixel underneath the mouse pointer is given by the Pixel Location and Pixel Value areas. Pixel Value gives you the red, green, and blue values for the current pixel.

iImage_image_tab.jpg

At the bottom of the Image tab is a color channel histogram. A histogram is a collection of bars, with each bar representing the number of pixels that have a particular darkness value. Here, each color channel (red, green, and blue) has its own histogram.

iImage_image_tabbi.jpg

By selecting different Channels, you see that the histograms differ for each color channel. Histogram peaks show where ranges of color value are concentrated.

The Max and Min boxes show the maximum and minimum darkness values for the color channel. You can change the range by typing new values in the boxes, or by sliding the red and green bars on the histogram. The red bar represents the minimum histogram value, while the green bar represents the maximum value.

By changing the range between the maximum and minimum values, and by moving the range up or down, you can alter the coloring and contrast of an image. This can be useful when you are trying to determine the best color range to enhance image details of interest.

For more information about using the iImage utility, refer to Working with Images.

Further Information

For more information on using color in IDL, refer to the following topics: