CompuPic Help - Using the Color Picker

The Color Picker allows you easily pick any color from the full color spectrum. You can select a color using the hue wheel and saturation triangle, or enter the exact hex or RGB values for an exact match. | --></phtml>

The CompuPic Color Picker The steps just below will give you a quick run-down of how to use the color picker. For more information on the various parts of the color picker, look further down the page.

Choosing a Color - Overview

1. | Move the knob on the outer hue wheel to the color you would like. This selects the hue of the color.
2. | Move the small circle in the saturation triangle to the shade of the color you would like. This sets the saturation of the color.
3. | The resulting color will be shown in the triangle in the upper right corner of color picker.
4. | The exact RGB (red, blue, green) or hex (hexidecimal, as used by web page HTML) values will be shown in the boxes at the bottom of the color picker. You may also type in exact values in the boxes. These numbers range from 0 to 255. The type of value you see will depend on which mode you are in (RGB or hex), as indicated by the color mode buttons.

The Hue Wheel

</phtml> | The hue wheel is used to select the hue of the color. It is easiest to set this first. Move the knob on the hue wheel to the desired hue. You'll notice the inner triangle change as you move the knob.

The Saturation Triangle

</phtml> | The saturation triangle is located inside the color wheel and is used to select the saturation, or shade, of the of the hue you selected with the hue wheel. To use the saturation triangle, move the small circle to the shade you desire. You'll notice the preview triangle changes depending on what you select.

The three points of the triangle represent black, white and the fully saturated hue selected with the hue wheel. Choosing a point along the left edge of the saturation triangle will always produce a shade of gray.

The Preview Triangle

</phtml> | The preview triangle in the upper right corner shows you the current color. You don't need to do anything to the preview triangle, it will automatically update as you use the color picker. If the selection point in the saturation triangle is at the left edge, this preview will not change.

Many first time users do not understand that they need to select a point in the saturation triangle to change the selected color from black.

Color Selection Eye Dropper

</phtml>

In the upper left corner of the color picker is the color selection eye dropper. The eye dropper may be used to select colors found in the image, or anywhere on your screen.

To select a color using the eye dropper, click the eye dropper button in the upper left corner of the color picker. Your cursor will change to an eye dropper. As you move your cursor around the screen, the value displayed in the color picker will represent the color where your cursor is located. To select a color, simply click your left mouse button. The current color will be selected, and will exit the eye dropper mode.

Color Mode Buttons

</phtml>

The color mode buttons are located just below the color wheel. The color mode buttons allow you to control how the color value is represented: as an RBG value or a hexidecimal value.

To switch color modes, simply click the button for the mode you would like to enter. Note that these color modes control only how the color value is displayed; the color you've selected will not be changed. You may change color modes at any time.

Hex Values

</phtml>

When the color picker is in 'hex' mode, there will be a single color value field at the bottom of the color picker. This field will display the hexidecimal value for the currently selected color.

Hex values are used by web pages when defining color, and are often preceded by a number sign.

To select a particular color which you already have the hex value for, simply enter the color's hex value in the color value field while in hex mode. You may also enter a specific color name (such as 'blue') into the value field.

RGB Values

</phtml> | When in RGB color mode, the three text boxes at the bottom of the color picker display the red, green, and blue (RGB) values for the current color. If you're going to need to match this color later, record these numbers so you can get an exact match. To select a color using it's RGB values, simply enter the three numbers into the text fields.