Share via


More Colors and Color Dialog Boxes

 

The More Colors and Color dialog boxes enable you to choose and create color values for CSS style rules that determine the font, background, or border color of page elements.

To access the More Colors dialog box

  1. Choose the New Style or Modify Style dialog box.

  2. Choose the More Colors dialog box.

These steps are detailed below.

1. To access the the New Style or Modify Style dialog box, use one of the following methods:

  • From the Format menu, choose Build Style.

  • Right-click a style sheet in the editor, and then from the shortcut menu, choose Build Style.

  • In the Style Sheet Toolbar, choose Build Style.

2. To access the More Colors dialog box, use one of the following methods:

  • Choose the Font category, and then click the square icon next to color.

  • Choose the Background category, and then click the square icon next to background-color.

  • Choose the Border category, and then click one of the square icons under border-color.

More Colors Dialog Box Elements

The More Colors dialog box has the following UI elements.

  • Value
    Displays the hexadecimal RGB code for the selected color.

  • Name
    Displays the color name if the color has one.

  • Custom
    Opens the Color dialog box, which enables you to select a color or create a palette of colors

  • Select
    Changes the pointer to an eyedropper tool that enables you to select any color on the screen and then assign it to a page element.

  • New
    Displays the color that is selected in the dialog box, but which has not yet been assigned to the page element.

  • Current
    Displays the color that is currently assigned to the page element.

Creating a Custom Color with the Color Dialog Box

To create a custom color

  1. In the More Colors dialog box, click **Custom... **.

    The Color dialog box is displayed.

  2. Do one of the following:

    • Use the color matrix and the saturation gradient to create a color by clicking inside the matrix. Then use the saturation gradient pointer to select a saturation level.

    • Enter the HSL or RGB values for the custom color.

    The custom color is displayed in the Color/Solid box.

  3. If you want to create more colors, click Add to Custom Colors to add the color to the Custom colors palette. You can then repeat step 2 to create other colors.

  4. Click OK to assign the color to the page element that you have selected on the page.

    Note

    A custom color is displayed by using your monitor's display settings. It can look different on another user's monitor. You might reserve custom colors for use in Web projects that are designed for groups of users who use the same (or predictable) display settings.

How Styles are Applied

If the page element does not have any CSS rules applied to it, the style rule is created as an inline style. If a CSS style rule exists for the page element, the style information is written to the existing style rule.

Note

Inline style rules override style rules that are in a style element on the page or style rules that are in an external CSS file.

See Also

How to: Set Web Server Control Color Properties