This is a migrated thread and some comments may be shown as answers.

Calculate Color Contrast in JavaScript

1 Answer 69 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Judy
Top achievements
Rank 1
Judy asked on 16 Oct 2008, 05:00 PM
Hi!

I'm trying to calculate the color contrast and brightness difference using JavaScript.

I was wondering how I can get the R, G, B values respectively? I know in c# codebehind, I can retrieve R, G, B values by:
RadColorPicker1.SelectedColor.R
RadColorPicker1.SelectedColor.G
RadColorPicker1.SelectedColor.B

Thanks for all your help.

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetie
Telerik team
answered on 20 Oct 2008, 04:10 PM
Hello Judy,
You can get the selected color using the get_selectedColor client method of the RadColorPicker and then calculate the R, G and B values.

For example:
<body>  
    <form id="form1" runat="server">  
        <script type="text/javascript">          
        function getDec(hexChar)  
        {  
            switch(hexChar)  
            {  
                case '0'return 0;  
                case '1'return 1;  
                case '2'return 2;  
                case '3'return 3;  
                case '4'return 4;  
                case '5'return 5;  
                case '6'return 6;  
                case '7'return 7;  
                case '8'return 8;  
                case '9'return 9;  
                case 'A'return 10;  
                case 'B'return 11;  
                case 'C'return 12;  
                case 'D'return 13;  
                case 'E'return 14;  
                case 'F'return 15;  
            };  
        }  
          
        function hexToDec(hex)   
        {  
            var colorChars=hex.split('');              
            var dec = (getDec(colorChars[0]) * 16) + getDec(colorChars[1]);  
            return dec;  
        }  
          
        function Calculate(sender, args)  
        {  
            var colorPicker = $find('<%= RadColorPicker1.ClientID %>');  
            var selectedColor = colorPicker.get_selectedColor();  
 
            // remove the '#'  
            selectedColor = selectedColor.substring(selectedColor.indexOf('#') + 1);  
              
            var r = hexToDec(selectedColor.substr(0, 2));  
            var g = hexToDec(selectedColor.substr(2, 2));  
            var b = hexToDec(selectedColor.substr(4, 2));  
              
            alert(r + "---" + g + "---" + b);  
        }  
        </script>  
      
        <asp:ScriptManager ID="ScriptManager1" runat="server" />  
        <telerik:RadColorPicker ID="RadColorPicker1" runat="server">  
        </telerik:RadColorPicker>  
          
        <button id="button1" runat="server" onclick="Calculate(); return false">Calculate</button>  
    </form>      
</body> 

Best wishes,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
ColorPicker
Asked by
Judy
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Share this question
or