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 cascading style sheet (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 want 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, 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.

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 dialog box 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.

To access this dialog box

  1. 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).

  2. 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 CSS style sheet, 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.

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

  4. Click the Custom Color tab.

Tasks

UI Elements

  • 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 close the Style Builder dialog box.

See Also

Concepts

ASP.NET Web Server Controls and CSS Styles

Reference

Web Palette Tab, Color Picker Dialog Box

Named Colors Tab, Color Picker Dialog Box

System Colors Tab, Color Picker Dialog Box