Share via

Color Picker Dialog Box

  • Article

Used to assign style attributes to HTML elements. To access the Color Picker dialog box, set the targetSchema property of your document to a browser that supports HTML 4 and later, and then open the Style Builder dialog box in any of the following ways:

  • If you are editing an HTML document in Design view, select an element in the Document Outline window, and then choose Build Style on the Format menu.
  • Select any element displayed on the Design view surface, select its style property in the Properties window, and then choose the ellipsis button (...).
  • If you are working in the Document Styles window, select an Element, a Class, or an Element ID, and then choose the Build Style icon.
  • If you are editing a CSS style sheet, place the cursor between the braces ( { } ) of a CSS style, and then choose Build Style on the Style menu.

On the Style Builder dialog box, select Font or Background or Edges in the left pane, and then choose the ellipsis button (...) beside the Color field. This opens the Color Picker dialog box.

Web Palette Tab

When you select a color swatch on this tab, its hexadecimal RGB code appears in the Color field, and the selected attribute:RGBcolor pair will be inserted into your CSS style definition when you close the Style Builder dialog box.

For example, while editing an HTML page in Design view, select the <BODY> element in the Document Outline window and choose Build Style on the Format menu. Select Background and choose the ellipsis button (...) beside the Color field to open the Color Picker dialog box. On its Web Palette tab, choose a light blue color swatch and choose OK. When you close the Style Builder dialog box, an attribute:RGBcolor pair like the following is inserted between the braces ( { } ) of your BODY style:

BODY { BACKGROUND-COLOR: #99ffff; }

Named Colors Tab

When you select a color swatch on this tab, its color name and hexadecimal RGB code appear in the Color field. When you select a Basic or Additional named color, an attribute:colorname pair is inserted into your CSS style definition.

For example, while editing an HTML page in Design view, select the <BODY> element in the Document Outline window and choose Build Style from the Format menu. Select Background and choose the ellipsis button (...) beside the Color field to open the Color Picker dialog box. On the Named Colors tab, select the LightBlue (#add8e6) color in the bottom row. When you quit the Style Builder dialog box, the following attribute:colorname pair is inserted between the braces ( { } ) of your BODY style:

BODY { BACKGROUND-COLOR: lightblue; }

System Colors Tab

When you select a color, a system color category appears in the Color field and an attribute:category pair will be inserted into your CSS style definition when you close the Style Builder dialog box.

For example, while editing a CSS style sheet, place the cursor between the braces ( { } ) of a CSS style for the <BODY> element and choose Build Style from the Format menu. Select Background and choose the ellipsis button (...) beside the Color field to open the Color Picker dialog box. On its System Colors tab, select the Background color category, and choose OK. When you quit the Style Builder dialog box, the following attribute:colorname pair will be inserted into your BODY style:

BODY { BACKGROUND-COLOR: background; }

Note   When you use a system color, you are not specifying the color to be displayed. The background color varies from system to system, depending upon which desktop color the user has chosen. In general, you should use System Color categories only on Web projects designed for groups of users who share common and predictable Display settings.

Custom Color Tab

To create a custom color, drag the sliders for the primary colors red, green, and blue until the desired hue appears in the Preview field. Its RGB color code, displayed in the Color field, will be inserted into your CSS style definition when you close the Style Builder dialog box. The decimal values displayed to the right of each slider range from 0 (no color) to 255 (maximum color); the default value for each is 255.

Note   A custom color is displayed using your monitor's current Display settings. It can look different in another user's monitor and Web browser. You might wish to reserve Custom Colors for use on Web projects designed for groups of users who share common and predictable Display settings.

For example, while editing a CSS style sheet, place the cursor between the braces ( { } ) of a CSS style for an INPUT.button style class, select Background in the Build Style dialog box, then choose the ellipsis button (...) beside the Color field to open the Color Picker dialog box. On its Custom Color tab, leave the Red and Green sliders set at their default values of 255, and drag the Blue slider left to 102. When you close the Style Builder dialog box, the following attribute:RGBcolor pair will be inserted between the braces ( { } ) of your style:

INPUT.button { background-color: #ffff66; }
  • Color
    Displays the hexadecimal RGB code for the selected color.
  • OK
    Closes the Color Picker dialog box and adds the selected attribute:color pair to the CSS markup to be inserted when you quit the Style Builder dialog box.

See Also

Working with CSS Styles | Building CSS Styles | Inserting CSS Styles from the Document Styles Window | Web Palette Tab, Color Picker Dialog Box | Named Colors Tab, Color Picker Dialog Box | System Colors Tab, Color Picker Dialog Box | Custom Color Tab, Color Picker Dialog Box