How do you get the hue of a #xxxxxx colour?

Question

How do you extract the hue component of a color given as #rrggbb?

Answer 1

If you search for how to convert RGB to HSL, you'll find a number of algorithms, including in the Wikipedia article linked by Sergey.

First, extract the RGB components of the hex color notation.

var color='#c7d92c'; // A nice shade of green. var r = parseInt(color.substr(1,2), 16); // Grab the hex representation of red (chars 1-2) and convert to decimal (base 10). var g = parseInt(color.substr(3,2), 16); var b = parseInt(color.substr(5,2), 16); 

That'll get you the byte (0-255) representation of your color. In this case, 199, 217, 44.

You can then use the formulae from the Wikipedia article to calculate hue, or shamelessly steal someone else's code:

function rgbToHsl(r, g, b){     r /= 255, g /= 255, b /= 255;     var max = Math.max(r, g, b), min = Math.min(r, g, b);     var h, s, l = (max + min) / 2;      if(max == min){         h = s = 0; // achromatic     }else{         var d = max - min;         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);         switch(max){             case r: h = (g - b) / d + (g < b ? 6 : 0); break;             case g: h = (b - r) / d + 2; break;             case b: h = (r - g) / d + 4; break;         }         h /= 6;     }      return [h, s, l]; } 

(See the source page for documentation and a hslToRgb() function.)

We can now put those two snippets together and get the hue:

var hue = rgbToHsl(r, g, b)[0] * 360; 

The [0] is to grab the hue – the function returns an array ([h,s,l]). We multiply by 360 since hue is returned as a value between 0 and 1; we want to convert it to degrees.

With the example color of #c7d92c, hue will be ~66.24. Photoshop's color picker says the hue of that color is 66° so it looks like we're good!

Answer 2

The wikipedia article has a formula which looks like something that can easily be implemented:

http://en.wikipedia.org/wiki/Hue#Computing_hue_from_RGB

Edit: here's a function which uses those formulas:

function getHue(color) {   var r = parseInt(color.substring(0,2),16)/255;   var g = parseInt(color.substring(2,4),16)/255;   var b = parseInt(color.substring(4,6),16)/255;    var hue;   if ((r >= g) && (g >= b)) {       hue = 60*(g-b)/(r-b);   } else if ((g > r) && (r >= b)) {       hue = 60*(2 - (r-b)/(g-b));   }   //... continue here   return hue; }  alert(getHue('FF0000')); // correctly returns 0 alert(getHue('408000')); // correctly returns 90 alert(getHue('0000FF')); // not implemented yet 

Just continue using the formulas from the table in that wikipedia article for other angles.