Share via

Custom Color Tab, Color Picker Dialog Box

  • Article

To create a custom color, drag the sliders for the primary colors red, green, and blue until the desired color 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.

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, 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.

Note   The Preview field displays a bright shade of yellow, and the RGB color code #ffff66 is displayed in the Color field, the equivalent of 255,255,102.

When you close the Style Builder dialog box, the following attribute:RGBcolor pair is inserted between the braces ( { } ) of your style:

INPUT.button { background-color: #ffff66; }

A color selected on one tab of the Color Picker is automatically selected on all tabs. In this case, an identical bright yellow swatch is selected on the Web Palette tab, and the RGB code #ffff66 appears in the Color field. This particular yellow is a Web-safe color.

  • Red
    The default value is 255 (maximum red). Drag the red slider to the left to reduce the amount of red in your custom color. The minimum value is 0 (no red).
  • Green
    The default value is 255 (maximum green). Drag the green slider to the left to reduce the amount of green in your custom color. The minimum value is 0 (no green).
  • Blue
    The default value is 255 (maximum blue). Drag the blue slider to the left to reduce the amount of blue in your custom color. The minimum value is 0 (no blue).
  • Preview
    As you drag sliders, the preview pane displays the resulting color.
  • Color
    Displays the hexadecimal RGB code for the resulting 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

Color Picker Dialog Box | 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