In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > ActiveX > HtmlDlgSafeHelper objects > methods > ChooseColorDlg (HtmlDlgSafeHelper)

ChooseColorDlg method (HtmlDlgSafeHelper)

Browser support:

Displays the standard Windows Color dialog box in Internet Explorer.

For other system dialogs, use the ShowBrowserUI method in Internet Explorer.

Syntax:

object.ChooseColorDlg ([initColor]);

You can find the related objects in the Supported by objects section below.

Parameters:

initColor

Optional. An RGB color value that will be the initial color in the color dialog. If not defined, the initial color will be black (#000000).

The format of this value can be a hexadecimal string ('rrggbb' or '#rrggbb'), a string that contains an RGB method ('RGB(red, green, blue)'), or an integer that represents the decimal form of the color in reverse byte order (256*256*green + 256*blue + red).

For example, the following values represent the same color: '80FF00', '#80FF00', 'RGB(128, 255, 0)', 0*256*256 + 255*256 + 128.

Return value:

If the user chooses the OK button, it returns the selected RGB color value, in other cases (Cancel or Close), it returns the initial color value.

The returned value is an integer that identifies the decimal form of the color (256*256*red + 256*blue + green). It is not possible to detect whether the user has clicked on the Cancel button or the OK button with the initial color.

Example HTML code 1:

This example illustrates the use of the ChooseColorDlg method:

<head>
    <script type="text/javascript">
        function OpenColorDialog (button) {
            try {
                var dlgHelper = document.getElementById ("dlgHelper");
                var initColor = button.style.backgroundColor;
                var color = dlgHelper.ChooseColorDlg (initColor);

                var b = color % 256;
                color = (color - b) / 256;
                var g = color % 256;
                color = (color - g) / 256;
                var r = color;
                var newColor = "rgb(" + r + ", " + g + ", " + b + ")";
                button.style.backgroundColor = newColor;
            }
            catch (e) {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
        <!-- The Dialog Helper Object for the ChooseColorDlg method -->
    <object id="dlgHelper" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></object>
    Click on the button below and choose a color with the color dialog box:<br />
    <button onclick="OpenColorDialog (this)" style="width:120px; background-color:rgb(128,255,0);"></button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example has the same functionality as the previous one, but it is simpler. The color value returned by the ChooseColorDlg method can be used without conversion. This format is supported by the backgroundColor style property in Internet Explorer.

<head>
    <script type="text/javascript">
        function OpenColorDialog (button) {
            try {
                var dlgHelper = document.getElementById ("dlgHelper");
                var initColor = button.style.backgroundColor;
                var newColor = dlgHelper.ChooseColorDlg(initColor);
                button.style.backgroundColor = newColor;
            }
            catch (e) {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
        <!-- The Dialog Helper Object for the ChooseColorDlg method -->
    <object id="dlgHelper" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></object>
    Click on the button below and choose a color with the color dialog box:<br />
    <button onclick="OpenColorDialog (this)" style="width:120px; background-color:rgb(128,255,0);"></button>
</body>