The Color Editor

Overview

The xv color editor provides a powerful system for manipulating color images. Since there are many different reasons why a person would want to modify an image's colors, and many different types of images that may need modification, there is no one color manipulation tool that would be 'best' for all purposes. Because of this problem, xv gives the user three different color tools, all of which can be used simultaneously.

Colormap Editing: This tool lets you arbitrarily modify individual colormap entries. Useful for modifying the color of captions or other things that have been added to images. Also works well on images that have a small number of colors, such as images generated by 'drawing' or CAD programs. It's also an easy way to spiff up boring 1-bit black and white images. Note that the Colormap Editing tool is not available when you are in 24-bit mode .

HSV Modification: This tool lets you alter the image globally in the HSV colorspace. (See "RGB and HSV Colorspaces" for more info.) Here are examples of the sort of things you can do with this tool:

RGB Modification: This tool lets you route the red, green, and blue color components of an image through independent mapping functions. The functions can either be the standard gamma function, or any arbitrary function that can be drawn with straight line segments or a cubic spline. See "The Intensity Graph " for more info about graph functions.

The major use of the RGB Modification tool is to correct for the differing color response curves of various color monitors, printers, and scanners. This is the tool to use when the image is too red, for instance.

These three tools are tied together in a fixed order. The Colormap Editing tool operates on the original colors in the image. The output of this tool is piped into the HSV Modification tool. Its output is piped into the RGB Modification tool. The output from the RGB Modification tool is what actually gets displayed.

In addition there is a collection of buttons that control the xv color editor as a whole (more or less).

Don't Panic! It's not as complicated as it looks.

The Colormap Editing Tool

The top portion of this window shows the colormap of the current image. There are 16 cells across, and up to 16 rows down, for a maximum of 256 color cells. Only cells actually used somewhere in the image are shown in this array.

The currently selected color cell is shown with a thick border. You can change the selection by clicking anywhere in the array. If you drag the mouse through this area, you'll see the dials at the bottom change to track the current pixel values.

You can also select a color cell by clicking anywhere in the image window. Whichever pixel value you were on when you let go of the mouse will become the new selected color cell.

You can define a smoothly gradated range of colors by Left clicking on the color cell that marks the 'start' of the range, and Middle clicking on the color cell that marks the 'end' of the range. Intervening color cells will be interpolated between the colors of the 'start' and 'end' colorcells.

Since certain images will have many colors that are the same, or nearly the same, it is sometimes convenient to group color cells together. Grouped color cells all take on the same color, and changing any one of them affects all of the other colors in the group.

To group color cells together, do the following:

  1. Hold down the <shift> key.
  2. Left click on one color cell that you would like to be in the group
  3. Right click on other color cells that you wish to be in this group. (Right clicking on cells that are already selected will de-select them.)
  4. Release the <shift> key when you're done.

You can create as many groups as you like.

You can use this grouping/ungrouping technique to copy colors from one color cell to another. Left click on the source color cell, Right click on the destination color cell, and Right click on the destination color cell again (to ungroup it).

Using the Dial Controls

At the bottom of the Colormap Editing tool are three dials that let you set the color of the current color cell (or group of cells). By default, the dials control the Red, Green, and Blue components of the RGB colorspace, but they can also control the Hue, Saturation, and Value components of the HSV colorspace. (The RGB/HSV button controls this.)

Regardless of what they control, all dials in xv work the same way. Clicking on the single arrows increase/decrease the value by 1. Clicking on the double arrows increase/decrease the value by a larger amount (16 in this case). If you click on one of the arrows, and hold the mouse button down, the increase/decrease will repeat until you release the mouse button.

You can also click in the general area of the pointer and simply drag it to the position you want. The further your mouse cursor is from the center of the dial, the more precise the control will be. While dragging, you do not have to keep the cursor inside the dial window.

Colormap Editing Commands

Undoes the last change made to the colormap that resulted in a color cell changing value. This includes grouping and ungrouping color cells, and changing any of the dials.
Undoes all color changes. Returns the colormap to its original state. Destroys any groups that you may have created.
Toggles the Colormap Editing dials between editing colors in terms of Red, Green, and Blue, and editing colors in terms of Hue, Saturation, and Value.
Turns color images into greyscale images by changing the colormap. This replaces each color cell with a greyscale representation of itself. Use the Revert command to restore the colors.
This command behaves differently, depending on the setting of the RGB/HSV mode. (You can tell which mode you're in by the titles on the dials.)

In RGB mode, each color component is separately 'inverted'. For example, Yellow (which is composed of full red, full green, and no blue) would turn to Blue (no red, no green, full blue).

In HSV mode, only the Value (intensity) component is 'inverted'. The Hue and Saturation components remain the same. In this mode, bright colors turn to dark versions of the same color. For example, a Yellow would turn Brown.

Generates a random colormap. This is of questionable usefulness, but it will occasionally come up with pleasing color combinations that you never would've come up with yourself. So it stays in. It works best on images with a small number of colors. Note that it respects cell groupings, so if your image has a lot of colors, you can create a few large groups and then use the Random command.

Note: It is HIGHLY RECOMMENDED that if you're using the Colormap Editing tool, you do not use either the HSV Modification tool or the RGB Modification tool. If you do, the results can be quite confusing. For example, you might edit a color cell, and set its color values to produce a purple. However, because of HSV/RGB Modification further down the line, the actual color displayed on the image (and in the color cell) is yellow. It confuses me, it'll probably confuse you, too.

The HSV Modification Tools

There are four separate controls in the HSV Modification tool.

At the top of the window are a pair of circular controls that handle hue remapping.

Lower down is a circular control that maps 'white' (and greys) to a specified color. There is also dial control that lets you saturate/desaturate the colors of the image.

Finally, at the bottom there is a graph window that lets you modify intensity values via an arbitrary remapping function.

Hue Remapping Controls

These two dials are used to define a source and a destination range of hue values. Every hue in the source range (defined in the From dial) gets mapped to the value of the corresponding point in the destination range (defined in the To dial).

Each dial has a pair of radial lines with handles at their ends. Between the two lines an arc is drawn with an arrow at one end. The wedge drawn by these lines and the arc defines a range of values (in degrees). The direction of the arc (clockwise, or counter-clockwise) determines the direction of this range of values (increasing or decreasing).

Distributed around the dial are tick marks and the letters 'R', 'Y', 'G', 'C', 'B', and 'M'. These letters stand for the colors Red, Yellow, Green, Cyan, Blue, and Magenta, and they show where these colors appear on the circle.

The range is shown numerically below the control. By default the range is '330 , 30 CW'. This means that a range of values [330 , 331 , 332 , ... 359 , 0 , 1 , ... 28 , 29 , 30 ] has been defined. Note that (being a circle) it wraps back to 0 after 359 .

The range can be changed in many different ways. You can click on the 'handles' at the end of the radial lines and move them around. If you click inside the dial, but not on one of the handles, you'll be able to drag the range around as a single object. There are also 5 buttons below the dial that let you rotate the range, flip the direction of the range, and increase/decrease the size of the range while keeping it centered around the same value.

In its default state, the To dial is set to the same range as the From dial. When the two dials are set to the same range, they are effectively 'turned off', and ignored.

An example of hue remapping:

  1. As a simple example of the sort of things you can do with the hue remapping control, we'll change the color of the 3-D fish in the default (xv logo) image without changing any other colors in the image. Since the fish are drawn using many different shades of pink, you would not want to do this with the Colormap Editing tool. It would take forever, or at least most of your lunch break.
  2. Get the default image up on the screen by running xv without specifying any filenames on the command line. Open up the xv color editor window via the Color Editor command.
  3. Next, click the mouse in the image window and d rag it around. You'll find that pixels in the fish bodies have a Hue component value of '0' (which corresponds to pure red).
  4. To remap this hue, simply adjust the From dial so that its range includes this Hue value. (It probably already does, by default.) Then twiddle the To dial to remap the hues. If you find more than the fish changing color, you can shrink the From range so it covers a smaller range of hues. This may help.

Note that the values printed when you are tracking pixel values in the image are the values before the HSV Modification tool is applied. For example, the background of the default image will still claim to be blue, regardless of what color you may have changed it to. This is so that you know what Hue value you will need to remap if you want to change its color again.

If you press the Reset button that is located near the hue remapping controls, it will effectively disable the hue remapping by setting the To range equal to the From range.

Below the hue remapping controls are a group of 'radio buttons'. You can have up to six different hue remappings happening simultaneously. Higher numbered mappings take precedence over lower numbered mappings.

An example of multiple hue remappings:

  1. Draw a From range that is a complete circle. The easiest way to do this is to draw a range that is nearly a full circle, then click and hold down the 'increase range' button located below the From range dial until the range stops getting bigger.
  2. Copy this range to the To range by pressing the Reset button.
  3. Rotate the To range slightly, by either clicking and dragging anywhere in the To range dial, or by using the 'rotate clockwise' and 'rotate counter-clockwise' buttons located below the To range.
  4. You've just built yourself what is effectively a tint control.
  5. Now, suppose, you'd like to adjust the sky color of your (tint-modified) image, without affecting anything else. Clicking on the sky in the image window reveals that the background still has an (original) hue of around 240. To modify this hue without affecting anything else, we'll need a second hue remapping.
  6. Click on the 2 radio button. The dials will change to some other default setting. As before, set the From range to encompass the value 240, preferably as 'tightly' as possible, and set the To range to produce the desired background color. Note that since both the sky and the ocean are blueish, it may not be possible to change the color of one without affecting the color of the other.

Note that the six hue remappings are not 'cascaded'. The output of one remapping is not fed as input into any of the other hue remappings. The hue remappings always operate on the hue values in the original image. In this example, if remapping #1 adds 32 to all hue values, thereby mapping the blue background (value 240) into a purple-blue (value 272), remapping #2 still sees the background at 240, and can remap it to anything it likes. Similarly, in the same example, if remapping #1 has mapped a green-blue color (value 208) into blue (value 240), remapping #2 will not map this into another color. As far as remapping #2 is concerned, that green-blue is still green-blue.

If it seems complicated, I'm sorry. It is.

The White Remapping Control

In the HSV colorspace, 'white' (including black, and all the greys in between) has no Hue or Saturation components. As such, it is not possible to use the hue remapping controls to change the color of white pixels in the image, since they have no 'color' to change.

The white remapping control gives you a way to add Hue and Saturation components to all the whites in the image. It consists of a movable point in a color dial. The angle of the dot from the center of the dial determines the Hue component. The distance of the dot from the center of the dial determines the Saturation component. The further the dot is from the center of the dial, the more saturated the color will be.

You can control the white remapping control in several ways. You can click on the handle and drag it around with the mouse. There are also four buttons provided under the dial. One pair allows you to rotate the handle clockwise and counter-clockwise without changing its distance from the center. The other pair of buttons lets you change the distance between the handle and the center without changing the angle.

The current Hue and Saturation values provided by the control are displayed below the dial. The first number is the Hue component, in degrees, and the second is the Saturation component, as a percentage.

There is also a checkbox that will let you turn off the white remapping control. This lets you quickly compare your modified 'white' with the original white. You can also effectively disable the white remapping control by putting the handle back in the center of the control. The easiest way to do this is to click and hold the 'move towards center' button until the saturation value gets down to 0%.

Example:

  1. Press the Grey button in the Colormap Editing tool. This turns all the colors in the image into shades of grey.
  2. Drag the handle in the white remapping control halfway down towards the 'R' mark. The Hue and Saturation values should be roughly 0 and 50%. The image should now be displayed in shades of pink.

The Saturation Control

The saturation control lets you globally increase or decrease the color saturation of the image. In effect, it is much like the 'color' control on most color televisions.

The saturation control is a dial that operates exactly like the dials described in "Using the Dial Controls " . In short, you can click and hold down any of the four buttons in the bottom of the control to increase or decrease the control's value. You can also click on the dial itself and move the pointer around directly.

The saturation control has values that range from '-100%' to '+100%'. At its default setting of '0%', the saturation control has no effect on the image. As the values increase, the colors become more saturated, up to '+100%', at which point every color is fully saturated. Likewise, as values decrease, the colors become desaturated. At '-100%', every color will be completely desaturated (i.e., a shade of grey). Note that this control is applied after the White Remapping control, so if you 'greyify' the image by completely desaturating it, you will not be able to color it using the White Remapping control. You could get around this problem by saving the (now grey) image, and reloading, or you could simply use the Grey button in the Colormap Editor instead.

Unless you're trying for some special effects, the useful range of this control is probably 20%. Also note that the control will have no effect on shades of grey, as they have no color to saturate.

The Intensity Graph

The Intensity graph allows you to change the brightness of the image, change the contrast of the image, and get some unique effects.

The Intensity graph is a function that lets you remap intensity values (the Value component in the HSV Colorspace) into other intensity values. The input and output values of this function both range from 0 to 255. The input values range along the x axis of this graph (the horizontal). For every input value (point along the x axis) there is a unique output value determined by the height of the graph at that point. In the graph's default state, the function is a straight line from bottom-left to top-right. In this case, each input value produces an equivalent output value, and the graph has no effect.

There are a number of 'handles' along the graph. These provide your major means of interacting with the graph. You can move them around arbitrarily, subject to these two constraints: the handles at the far left.

and far right of the graph can only be moved vertically, and handles must remain between their neighboring handles for the graph to remain a proper function.

The handles are normally connected by a spline curve. To see this, move one of the handles by clicking and dragging it. (Note that the x,y position of the current handle is displayed while the mouse button is held down.) The function will remain a smoothly curved line that passes through all the handles. You can change this behavior by putting the function into 'lines' mode. Press the button. The function will change to a series of line segments that connect the handles. Press the button to go back to 'spline' mode.

The next two buttons let you add or delete handles. The button will insert a handle into the largest 'gap' in the function. The button will remove a handle from the smallest 'gap' in the function. You can have as few as 2 handles, or as many as 16. Note that as the number of handles gets large, the spline will start getting out of control. You may wish to switch to 'lines' mode in this case.

The button puts everything back on a straight line connecting bottom-left to top-right (a 1:1 function). It does not change the number of handles, nor does it change the x -positions of the handles.

The button lets you set the function curve by entering a single number. The function is set equal to the gamma function:

y = 255 (i 255) 1/ g

where i is the input value (0-255), g is the gamma value, and y is the computed result (0-255).

There is a shortcut for the button. Type g while the mouse is inside the graph window.

Also, touching any of the handles after a command will put the graph back into its 'normal' mode. (Either 'spline' or 'lines' depending on which of the top two buttons is turned on.)

Generally, whenever you move a graph handle and let go of it, the image will be redrawn to show you the effects of what you've done. This can be time-consuming if you intend to move many points around. You can temporarily prevent the redisplay of the image by holding down a <shift> key. Continue to hold the <shift> key down while you move the handles to the new position. Release the <shift> key when you're done, and the image will be redisplayed.

The RGB Modification Tool

The RGB Modification tool is a collection of three graph windows, each of which operate on one of the components of the RGB colorspace. This tool lets you perform global color-correction on the image by boosting or cutting the values of one or more of the RGB color components. You can use this to correct for color screens that are 'too blue', or for color printers that produce 'brownish' output, or whatever.

The graphs work exactly as explained in "The Intensity Graph" .

Neat Trick: In addition to color-correction, you can use the RGB modification tool to add color to images that didn't have color to begin with. For instance, you can 'pseudo-color' a greyscale image.

An example of pseudo-coloring:

  1. Adjust the Red graph so that there is a strong red presence on the right side of the graph, and none on the left, or in the middle.
  2. Adjust the Green graph so that there is a strong green presence in the middle of the graph, and none on the left or right.
  3. Adjust the Blue graph so that there is a strong blue presence on the left side of the graph, and none on the left, or in the middle.
  4. The graphs should look roughly like this:

You now have a transformation that will take greyscale images and display them in pseudo-color, using a 'temperature' color scheme. Neato!

The Color Editor Controls

These buttons provide general control over the whole xv color editor window. You can display the image with or without color modification, save and recall presets, and undo/redo changes. Also, convenience controls are given for performing some of the most common operations on the Intensity graph.

Displays the image using the current HSV and RGB Modifications. Also turns the ' Display with HSV/RGB mods ' checkbox on. (See below.) This is only useful when the ' Auto-apply HSV/RGB mods ' checkbox is off.
Keyboard Equivalent: <Meta> a
Displays the image without any HSV or RGB Modifications. Also turns the ' Display with HSV/RGB mods ' checkbox off.
Undoes the last change to the HSV or RGB controls.

It may be helpful to think of xv as maintaining a series of 32 'snapshots' of the HSV and RGB controls. You are normally looking at the last frame in this series. The Undo control moves you backwards in the series.

Only available after you've hit Undo . Moves you forward in the 'snapshot' series described above. Note that if you have hit Undo a few times (i.e., you're now looking at some frame in the middle of the series), and you change an HSV or RGB control, all subsequent frames in the series are thrown away, and the current state becomes that last frame in the series.
Resets all HSV and RGB controls to their default settings. Doesn't affect the Colormap Editing tool. Note that these default settings can be changed using the Set command described below.
Keyboard Equivalents: R , <Meta> r , and <Meta> 0
Pressing any of these buttons recalls a preset (a complete set of values for the HSV and RGB controls). By default, the presets are:
  1. Binary intensity. Every color in the image is either at full brightness, or black. Gives images a neat 'neon' sort of look, much like the Saturday Night Live credits of the late-70's.
  2. Binary colors. The image will be shown using only the 8 binary combinations of red, green, and blue. (e.g. black, blue, green, cyan, red, magenta, yellow, white)
  3. Temperature pseudo-color. (For use on greyscale images) Maps intensity values 0-255 into a 'temperature' color scheme where blue is 'coldest' and red is 'hottest'.
  4. Map pseudo-color. (For use on greyscale images) Maps intensity values 0- 255 into something akin to the standard 'elevation map' color scheme (blue, green, yellow, brown)

Of course, you can replace these defaults with your own. See "Modifying xv Behavior" for more details.
Keyboard Equivalents: <Meta> 1 , <Meta> 2 , <Meta> 3 , and <Meta> 4

Used in conjunction with the Reset , 1 , 2 , 3 , or 4 buttons to store the current settings of the HSV and RGB controls into a preset. To do so, press the Set button, and then press one of the Reset , 1 , 2 , 3 , or 4 buttons. The current HSV and RGB control settings will be stored in that preset, as long as xv continues running. The values will be lost when the program exits. It is also possible to save these values permanently. See the CutRes button (below) and "Modifying xv Behavior" for more details.
Copies the current settings of the HSV and RGB controls, as text, into the X server's cut buffer. You can then use a text editor to paste these values into your ' .Xdefaults ' (or ' .Xresources ') file. This lets you save the current settings 'permanently'. See "Modifying xv Behavior" for more details.
This button closes the xv color editor window.
Brightens the image by moving all the handles in the Intensity graph up by a constant amount.
Darkens the image by moving all the handles in the Intensity graph down by a constant amount.
Increases the contrast of the image by moving handles on the left side of the Intensity graph down, and handles on the right side up.
Decreases the contrast of the image by moving handles on the left side of the Intensity graph up, and handles on the right side down.
Normalizes the image so that the darkest pixels in the image are given an intensity of '0', and the brightest pixels are given an intensity of '255'. Intermediate colors are interpolated accordingly. This forces the image to have the full (maximum) dynamic range.
Keyboard Equivalent: N
Runs a histogram equalization algorithm on the currently displayed region of the image. That is, if you're cropped, it will only run the algorithm on the cropped section. Note, however, that the only modification it makes to the image is to generate a bizarre corrective Intensity curve. As such, if you HistEq a section of the image, the rest of the image will probably not be what you'd want. Also note that the histogram curve will 'go away' if you touch any of the handles in the Intensity graph window, just like a 'gamma' curve would.
Keyboard Equivalent: H
The ' Display with HSV/RGB mods ' checkbox tells you whether or you're looking at a modified image (checked) or the 'raw', unmodified image (unchecked). The Apply and NoMod buttons change the setting of this checkbox, and you can also change the checkbox directly by clicking on it.
The ' Auto-apply HSV/RGB mods ' checkbox controls whether or not the program regenerates and redisplays the image after each change to an HSV or RGB control. By default, this checkbox is turned on, so that you can easily see the results of your modifications. However, if you want to make a large number of changes at once, it might be preferable to turn automatic redisplay off for a while, to speed things up.
The ' Auto-apply while dragging ' checkbox controls whether or not the image colors are changed automatically as you manipulate the various xv color editor dials and graphs. This button is normally turned on, but for it to have any effect, you must be in ' Read/Write Colors ' mode. See "Color Allocation Commands" and the ' -rw ' mode described in "Color Allocation Options" for more information.
The ' Auto-reset on new image ' checkbox controls whether or not the HSV and RGB controls are Reset back to their default values whenever a new image is loaded up. By default, this is also turned on, as when you're playing with the HSV/RGB controls, you probably only want to affect the current image, and not all subsequently loaded images as well.

This document was extracted from the PostScript documentation and formatted by Roy Johnson. Much of the process was automated, and may therefore have introduced errors. Corrections are appreciated.