Color Picker Dialog

This dialog is used to select a color for a particular element. It can be accessed from different areas of the interface.

Option

Description

[Color Square and Vertical Bar]

The square displays a gradient of colors related to the one currently selected, which is indicated by the small circle. You can click in the square to choose a different color. You can also click in vertical color bar to change the square to a different range of colors.

Recent

Displays the most recent colors that you have used. To use one of these colors, click it.

Variables

Displays CSS variables (e.g., branding colors) in the project. To use one of these colors, click it.

Saved

Displays the colors that you have added by clicking the Save button Save the active file.. To use one of these colors, click it. The "Saved" list is a way to create a list of your favorite colors so that it is easier to find and select them in the future.

Named

Displays the named colors in the system. To use one of these colors, click it.

Web

Displays a list of web-safe colors. To use one of these colors, click it.

#

Displays the hexadecimal number for the color after you select it. For example, the hexadecimal number for "Blue" is #0000ff.

Save the active file.

Adds the selected color to the "Saved" list. This is a way to create a list of your favorite colors so that it is easier to find and select them in the future.

Adds a bar above the cursor. As you move the cursor over any area of your screen, the color changes in the bar to reflect the color that is directly behind the tip of the cursor. When you click, that color is loaded into the Color Picker dialog.

H [Hue]

Displays the percentage of hue for the color in the RGB model. Hue is the wavelength within the visible light spectrum.

S [Saturation]

Displays the percentage of saturation for the color in the RGB model. Saturation is the relative bandwidth of the visible output.

B [Brightness]

Displays the percentage of brightness for the color in the RGB model. Brightness is the intensity of the energy output.

R [Red]

Displays the amount of red in the selected color. (Each color is a combination of a certain amount of red, green, and blue.) You can manually change this number, which will result in a different color being selected.

G [Green]

Displays the amount of green in the selected color. (Each color is a combination of a certain amount of red, green, and blue.) You can manually change this number, which will result in a different color being selected.

B [Blue]

Displays the amount of blue in the selected color. (Each color is a combination of a certain amount of red, green, and blue.) You can manually change this number, which will result in a different color being selected.

Enable CMYK

Activates the C, M, Y, K fields below so that you can use the CMYK color model. CYMK is an acronym for the four primary colors used in printing (Cyan, Magenta, Yellow, and Key—or black). Whereas CMYK is often the preferred model for print-based output, the RGB (Red, Green, Blue) model is primarily intended for electronic content.

C [Cyan]

Displays the percentage of cyan that makes up the color.

M [Magenta]

Displays the percentage of magenta that makes up the color.

Y [Yellow]

Displays the percentage of yellow that makes up the color.

K [Key, or Black]

Displays the percentage of black that makes up the color.

Current

Displays the color currently applied to the element.

New

Displays the new color for the element as you choose it in the dialog.