Get RGB color code from HEX color code

This Javascript program generate the RGB color code of given HEX color code. Code is simple and understandable. Copy and paste in note pad and save as filename.html and then run. Enter hex code in textbox and click the button.


Below is the code:-


<html>

<head>

<title>Hex To Decimal</title>
<script type="text/javascript" language="javascript">
function addSeprators(ctrl)
{
   if(ctrl.value.length == 2)
   {
        ctrl.value = ctrl.value + "-";
   }
   
   if(ctrl.value.length == 5)
   {
        ctrl.value = ctrl.value + "-"; 
   }
   
   return ctrl.value;
}


function getRGBCode()
{


    var hexVal = document.getElementById('hex').value.toUpperCase();   
    var hexArr = new Array();
    var rgbVal = "";


      hexArr = hexVal.split('-');
      rgbVal = parseInt(hexArr[0],16) +"-"+ parseInt(hexArr[1],16) +"-"+ parseInt(hexArr[2],16); // parseInt(val, 16) returns decimal value of hex code.
    document.getElementById('colorDiv').style.background = "#"+hexArr[0]+hexArr[1]+hexArr[2];
    alert("Hex color code : " +hexVal+"\n\rRGB color code : " +rgbVal);
    
}


</script>
</head>

<body>

</body>
Enter Hex color code : 
<input type="text" name="hex" id="hex" maxlength="8" style="text-transform:uppercase;" onkeyup="return addSeprators(this);"/>
<input type="button" value="Hex To Dec" onclick="getRGBCode();" />
<div id="colorDiv" style="width:100px; height:25px;"></div>
</html>

Demo :-

http://www.navvtech.com/demo/colors/h2d.html

Comments

Post a Comment

Popular posts from this blog

Get Query String Values With Javascript

Image
JavaScript Code To  Retrieve Query String Values This topic shows you how you can retrieve the query string values from a URL using JavaScript. The code is simple and understandable. Below is the complete code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Query String using Javascript</title> <script type="text/javascript" language="javascript">     function getquerystring()     {         var qsarr = new Array();                  var qs = location.search.substring(1);         var singleqs = new Array();         var str ="";         qsarr = qs.split('&');         for( i=0; i<qsarr.length; i++)         {             singleqs = qsarr[i].split('=');             str += 'Query String Name
Read more

Change Css Class of li in ul onclick

Image
Below is the simple and a short code to change or set the background color of item in menu onclick or active tab of menu (i.e. li of ul) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>List Item</title> <style type="text/css"> ul {     list-style-type:none;     float:left;     border-bottom: solid 2px Red;     padding-right:40px; } ul li {     float:left;     width:auto;     padding:8px;     display:block;     cursor:pointer; } </style> <script type="text/javascript" language="javascript">     function checklist(ctrl)     {                 var list = document.getElementById("menu").getElementsByTagName('li&#
Read more

Change Text Color with Javascript

Below is the simple and sweet code of changing text color after fraction of second automatically. Copy n Paste and run... <html> <head> <title>Text Color Change</title> <script type="text/javascript" language="javascript"> elmColor = 0;     function changeColor(elmColor)     {                    switch(elmColor)         {             case 0:             document.getElementById('colorChange').style.color = '#000000';             elmColor++;              break;                          case 1:             document.getElementById('colorChange').style.color = '#ff0000';              elmColor++;             break;                          case 2:             document.getElementById('colorChange').style.color = '#00ff00';              elmColor++;             break;                          case 3:             document.getElementById('colorChange').style
Read more