title: jQuery: HEX to RGB calculation different between browsers?
body: <p>The following piece of code works perfectly in all browsers, bar IE. As usual.
  This is what needs to happen:</p>
  
  <ol>
  <li>When hovering over a link, get that
  link colour.</li>
  <li>Get the RGB value of that colour,
  seeing as the base CSS will always
  be set to a HEX value;</li>
  <li>Use the new RGB value and do a calculation to determine a lighter shade of that colour</li>
  <li>Animate that new lighter shade in over a period of 0.5 secs</li>
  <li>When moving the mouse away, restore
  the colour to the original value</li>
  </ol>
  
  <p>As I said, so far the code works absolutely fine, except in IE. Can anyone with a fresh set of eyes (and an intact hairline) take a look at this? Can it be done different?</p>
  
  <pre><code>function getRGB(color) {
      // Function used to determine the RGB colour value that was passed as HEX
      var result;
  
      // Look for rgb(num,num,num)
      if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
  
      // Look for rgb(num%,num%,num%)
      if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];
  
      // Look for #a0b1c2
      if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
  
      // Look for #fff
      if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return [parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16), parseInt(result[3] + result[3], 16)];
  }
  
  
  var $oldColour;
  // Get all the links I want to target
  $('a').not('aside.meta a.notes_link, aside.meta ul li a, section.social_media a, footer a').hover(function() {
      //code when hover over
      //set the old colour as a variable so we can animate to that value when hovering away
      $oldColour = $(this).css('color');
  
      //run the getRGB function to get RGB value of the link we're hovering over
      var rgb = getRGB($(this).css('color'));
  
      for (var i = 0; i &lt; rgb.length; i++)
          //for each of the 3 HEX values, determine if the value + an increment of 30 (for a lighter colour) is lighter than the max (255)
          //if it is, use the HEX value plus the increment, else use the max value
          rgb[i] = Math.min(rgb[i] + 30, 255);
  
          //join the new three new hex pairs together to form a sinle RGB statement
          var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  
      //animate the text link color to the new color.
      $(this).animate({'color': newColor}, 500);
  
  }, function() {
      //code when hovering away
      //animate the colour back using the old colour determined above
      $(this).animate({'color': $oldColour}, 500);
  });
  </code></pre>
  
  <p>I look forward to hearing from you Guru's.</p>