Calculate Color Contrast in JavaScript

2 posts, 1 answers
  1. Judy
    Judy avatar
    2 posts
    Member since:
    May 2008

    Posted 16 Oct 2008 Link to this post

    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.
  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 20 Oct 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top