Monday, 29 March 2021

How to determine color of the pixel or What degree range of Hue correspond to certain color?

Is there some convention to divide the HSL color circle into degree ranges to define basic colors?

For example, degrees 80-150 would be considered green, degrees 210-280 as blue, and so on.

I'd like to automatically detect pixel's color belonging to some "color-group" and found that HSL is very good to determine the tone. For my purpose is enough to define boundaries for red, orange, yellow, green, cyan, blue, magenta, pink.

Is there already a solution for such dividing?

EDIT

I add more reasoning and examples before putting a bounty on...

My final idea is to index our images' stock by their dominant color, so I could include color as one query parameter.

I have defined some boundaries how to divide HSL color wheel:

  1-15 red
  16-50 orange
  51-72 yellow
  73-155 green
  156-185 cyan
  186-268 blue
  269-310 magenta
  311-344 pink
  345-359 red

I have a function to determine pixel's color:

function getPixelTone(pixel) {
  let [ hue, sat, light ] = rgbToHsl( ...pixel );
  sat   = parseInt(sat);
  light = parseInt(light);

  if ( light < 3 || sat < 50  && light < 5 ) {
    return 'black';
  }

  if ( light > 96 ) {
    return 'white';
  }

  if ( hue === 0 || isPixelGray(pixel) ) {
    return 'gray';
  }

  if ( (hue > 0 && hue < 16 ) || (hue > 344 && hue < 360 ) ) {
    if ( light > 55 ) {
      return 'pink';
    }

    if ( light < 34 || ( sat < 30 && light < 80 ) ) {
      return 'brown';
    }  

    return 'red';
  }

  if ( hue > 15 && hue < 51 ) {
    if ( light < 34 ) {
      return 'brown';
    }  
    return 'orange';
  }
  if ( hue > 50 && hue < 73 ) {
    return 'yellow';
  }
  if ( hue > 72 && hue < 156 ) {
    return 'green';
  }
  if ( hue > 155 && hue < 186 ) {
    return 'cyan';
  }
  if ( hue > 185 && hue < 269 ) {
    return 'blue';
  }
  if ( hue > 268 && hue < 311 ) {
    return 'magenta';
  }
  if ( hue > 310 && hue < 345 ) {
    return 'pink';
  }

  return 'color';

}

Function rgbToHsl is from module rgb-to-hsl, function isPixelGray is defined like:

function isPixelGray(pixel) {
  if ( Math.max(pixel) - Math.min(pixel) < 3 ) {
    return true;
  }
  return false;
}

So all the purpose of my question is to quantize pixel into one of the simplest perceived colors. I think those colors would be: red, orange, yellow, green, cyan, blue, magenta, pink, brown, black, and white, it could include also beige if it can determine easily.

What is the best way to determine the pixel belonging to one of these colors?

PS I chose HSL colorspace as a base, because it has advantages before the RGB, from my point of view. But it has not to be this way.



from How to determine color of the pixel or What degree range of Hue correspond to certain color?

No comments:

Post a Comment