Color Picker Dialog Box

Article
09/12/2011

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

Used to assign style attributes to HTML elements.

To access this dialog box

In Microsoft Visual Web Developer, in Design view, select a control or HTML element that renders markup (such as a Table control or an HTML <input> button).
Open the Style Builder dialog box by performing one of the following actions:
- In Design view, select the control or element, click Format, and then click Style.
- In Design view, right-click the control or element and click Style.
- Select the control or element, 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 cascading style sheet (CSS), place the insertion point between the braces ({ }) of a CSS style, and then choose Build Style on the Style menu.
The Style Builder dialog box opens.
Select any of the tabs in the Style Builder dialog box that contain a Color drop-down list, and click the ellipsis (…) button next to the box.

The Color Picker dialog box opens.

Tasks

Walkthrough: Creating and Modifying a CSS File

UI Elements

Web Palette
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 (...) next to the Color field to open the Color Picker dialog box. On its Web Palette tab, choose a light blue color swatch and click 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; } 
```
For more information, see Web Palette Tab, Color Picker Dialog Box.
Named Colors
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 (...) next to 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 close the Style Builder dialog box, the following attribute:colorname pair is inserted between the braces ({ }) of your BODY style:
```
BODY { BACKGROUND-COLOR: lightblue; } 
```
For more information, see Named Colors Tab, Color Picker Dialog Box.
System Colors
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 (...) next to 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 close 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 on 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.

For more information, see System Colors Tab, Color Picker Dialog Box.
Custom Colors
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, and then choose the ellipsis button (...) next to 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; } 
```
For more information, see Custom Color Tab, Color Picker Dialog Box.
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 close the Style Builder dialog box.

Color Picker Dialog Box

To access this dialog box

Tasks

UI Elements

See Also

Reference

Concepts

Additional resources