How to Get the Hue of a #Xxxxxx Colour

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

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!

Finding the Hue for a pixel in an image

You could let ImageMagick (installed on most Linux distros and available for OSX and Windows) tell you the answer by creating a single pixel RGB image and converting to HSL colorspace:

convert xc:"#ffffff" -colorspace hsl -format "%[pixel:p{0,0}]" info:

hsl(0%,0%,100%)

or

convert xc:"rgb(127,34,56)" -colorspace hsl -depth 8 txt:

# ImageMagick pixel enumeration: 1,1,255,hsl
0,0: (96.0784%,57.6471%,31.7647%)  #F59351  hsl(96.0784%,57.6471%,31.7647%)

Convert hex color value ( #ffffff ) to integer value

The real answer is to use:

Color.parseColor(myPassedColor) in Android, myPassedColor being the hex value like #000 or #000000 or #00000000.

However, this function does not support shorthand hex values such as #000.

HEX to HSL convert javascript

You forgot to multiply the hue by 360.

s = s*100;
s = Math.round(s);
l = l*100;
l = Math.round(l);
h = Math.round(360*h);

var colorInHSL = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';

RGB to Color Name Mapping (Approximate Color Mapping)

I am not sure if it is the best way, but if I ever had to do something like this, I think I would first convert these hex values to hsl.

Then you would have to check for saturation and luminance in order to find grays and add more granularity in your findings.

Here is a rough proof of concept using only 6 base colors and with a stolen code from an older question to do this hex => hsl conversion.

inp.oninput = e => {  if (!inp.checkValidity()) return;  var val = inp.value;  if (val.length !== 3 && val.length !== 6) return;  var color = hexToName(inp.value);  if (color) {    inp.style.backgroundColor = '#' + val;    log.textContent = color;  }}

function hexToName(hex) {  // first get hsl correspondance  var hsl = hexToHsl(hex);  if(!hsl){    return;  }  // get the base color  var color = getColorName(hsl[0] * 360);  // check saturation and luminosity  // needs more granularity, left as an exercise for the reader  if (hsl[1] < .5) {    return hsl[2] <= .5 ? hsl[2] === 0? 'black' : 'darkgray' : hsl[2] === 1 ? 'white': 'gray';  }  return hsl[2] <= .5 ? color : 'light' + color;}function getColorName(hue) {  // here you will need more work:  // we use fixed distance for this simple demo  var names = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta'];  var angles = [0, 60, 120, 180, 240, 300];  var match = angles.filter(a =>    a - 60 <= hue && a + 60 > hue  )[0] || 0;  return names[angles.indexOf(match)];}// shamelessly stolen from https://stackoverflow.com/a/3732187/3702797function hexToHsl(hex) {  if (hex.length === 3) {    hex = hex.split('').map(c => c.repeat(2)).join('');  }  if (hex.length !== 6) {    return;  }  var r = parseInt(hex[0] + hex[1], 16);  var g = parseInt(hex[2] + hex[3], 16);  var b = parseInt(hex[4] + hex[5], 16);
  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];}

#<input id="inp" type="text" pattern="[0-9a-fA-F]+"><pre id="log"><pre>

---

Related Topics