The graphic below is a summary of the color selection components.

 

The components are further detailed with examples following this summary.

 

 

 

 

Standard Color Palette

 Shows a palette of available colors that can be clicked to be used as substitute colors for either the foreground or background of an image.

 

Pick Color from Screen

 Provides an color picker (eyedropper) tool to pick the color from the image by clicking directly on the color desired.

Click the color picker to select a color from anywhere on the image, or choose a color from the color palette using the tool or the mouse cursor.

The color picker can be used with either the Foreground or the Background color.

 

Add to/Remove from Custom Colors

  To keep a color selected for later use, click the + to add the selected color to the custom colors list and enlarge the palette. If one of the custom colors below the standard palette is selected, this button changes to a “-“ sign for removing that color from custom colors palette.

 

Use Foreground Color 

 Sets the Foreground and Line color to be used by the various painting tools. Either click a color in the standard color palette shown, or use the color picker (eyedropper) tool to pick the color from the image. (The “picked” color can also be added to the custom colors below the palette.)

The current Foreground color is shown in the top square to the left. When it is selected, the white arrow points to the left. The Foreground and Background  colors can be swapped by clicking this same arrow.

 

Use Background Color

 Set the Background and Fill color to be used by the various painting tools. Either click a color in the standard color palette shown, or use the color picker (eyedropper) tool to pick the color from the image. (The “picked” color can also be added to the custom colors below the palette.)

The current Background/Fill color is shown in the bottom square to the right. When it is selected, the white arrow points down. The Background and Foreground colors can be swapped by clicking this same arrow.

 

Swap Colors

 Click this arrow to swap the Foreground and Background colors.

 

Pin Colors

 Click this pin to use the same color selections for all images.

 

Make Background Transparent

 Click this square to save the file with a transparent background.  This is only available for certain file formats that support a transparency value, such as GIF or PNG. The color you have chosen as the background color from the color palette will be the color used for transparent areas.  

 

A (Opacity) and RGB Selection

A, R, G, B labels to the left of color component sliders are also active and change mode when clicked.

 

A – Alpha component or color opacity

Click “A” to toggle the opacity (alpha) only editing mode. When activated, drawing tools will affect the opacity of pixels only, without affecting color (RGB).

Choose the opacity of the selected color with the “A” Slider, ranging from 0 (transparent) to 252 (opaque). Opacity determines the transparency of the background color, which determines how much color shows through the image.

(Opacity information is only saved to PNG and GIF files; it is discarded in other file formats.)

A 255 value of Alpha means completely opaque – nothing shows through it. When background color has an Alpha value less than 255 (32-bits per pixel images only), you decrease its opacity.

Example: If Alpha = 0, anything you draw will make the image background completely transparent . You can then draw on it with foreground colors and an Alpha larger than 0.

·         When Background color is selected, it disappears for images that use less than 32 bits per pixel. For these images, background alpha cannot be changed since all pixels are completely opaque. However, you can make one background color completely transparent for these images with the “Make background transparent” tool.

 

·         When you draw with Foreground color, alpha decides only how much of the current color is mixed with what is in the image. This is like painting with water colors – as you add more water (lower Alpha value) the painting reveals what’s underneath.

 

To see which parts of “canvas” are transparent, it’s best to change the smooth image space of the HyperSnap window to something that has a pattern, such as a cross-hatch or checker-board pattern. (You can do this under the Setup tab with the “Backgr.” Button.)

Example 1:

The image here has a white-light gray checker-board pattern background, with a red color ellipse shape on top.

 

But since Alpha is set to 128 (50% opacity), the HyperSnap checkered workspace shows through the red.

In the bottom right corner a rounded rectangular shape has an Alpha = 0, completely transparent, which means the checkered workspace below shows through the image with no color.

Example 2:

If you click the “A” label next to Alpha slider the drawing mode switches to “Alpha only editing mode”.

Since drawing with background color now affects the opacity of the image pixels only, leaving the color values unchanged, the first image changes to the one shown here

The ellipse with Alpha = 128 no longer shows the red color, while the rectangular Alpha = 0 remains essentially the same.

RGB/HSL + Color component sliders

Click either R, G, or B (Red, Green, or Blue), to change to H, S, L (Hue, Saturation and color Lightness or Luminance). Click them again to toggle back to RGB.

Slide the Color Component Sliders to the left or right to choose the level of RGB or HSL you need. You can also click the number values to set those from 0 to 255,  if you prefer.          

§  When you have a color selected, such as red, and want to make it lighter or darker, switch to HSL mode and move the L slider.

§  If you want the color to become more or less saturated (more or less grey, instead of showing actual red), move the S slider.

§  If you want to set all possible colors with the current lightness and saturation, move the H slider.

The easiest way to see how these look is to choose colors for Foreground and Background, then use these sliders to see how it changes.

Examples:

 

 

 

         

 

 

 

 

HTML Code

Click the “HTML:” label to copy the RGB code encoded for HTML editing to the clipboard, and easily paste the value into HTML code editor.

 

Shows the related HTML Color number based on RGB settings. (HTML colors are most often used for websites or programs on the web.)

 

 

More colors and options 

 Click to display the alternative colors dialog box where you can use the color picker (eyedropper) tool to choose your own colors from two color displays.

1.    A Standard color matrix array.

 

2.    A Custom color display where you can mix almost any color.