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.
Advertisement
Answer
Color Name & Hue is the first search result for “rgb to hue name.” It’s a web app that does exactly what you want:
With this little tool you can either enter RGB (Red-Green-Blue) values, HSB (Hue-Saturation-Brightness) numbers or a hexadecimal code for a color, to find its closest match of a named color and its corresponding hue… The list of colors comprises 1640 different color names extracted from several sources on the web.
The color name is matched to one of the following main color hues: Red, Orange, Yellow, Green, Blue, Violet, Brown, Black, Grey, and White.
- The stand-alone Color Name & Hue tool is available here. You can try
nts
,nts.name()
directly from the browser dev console. - The relevant JS source file is ntc.js (Technically no license?)
- The file above is a modified version of Chirag Mehta’s ntc.js. (Creative Commons license, but lacks main hue classification. More details and usage instructions.)
Usage instructions for ntc js (Name that Color JavaScript):
var match = ntc.name("#6195ED"); rgb = match[0]; // RGB value of closest match ("#6495ED") name = match[1]; // Color name ("Cornflower Blue") shade_rgb = match[2]; // RGB value of color's shade ("#0000FF") shade_name = match[3]; // Color's shade ("Blue") exactmatch = match[4]; // True if exact color match (false)
If you just want the RGB hex values for the names:
// From https://www.color-blindness.com/color-name-hue-tool/js/ntc.js shades: [ ["FF0000", "Red"], ["FFA500", "Orange"], ["FFFF00", "Yellow"], ["008000", "Green"], ["0000FF", "Blue"], ["EE82EE", "Violet"], ["A52A2A", "Brown"], ["000000", "Black"], ["808080", "Grey"], ["FFFFFF", "White"] ], names: [ ["35312C", "Acadia", "Brown"], ["75AA94", "Acapulco", "Green"], ["C0E8D5", "Aero Blue", "Green"], // Many colors omitted... ["DDC283", "Zombie", "Yellow"], ["A29589", "Zorba", "Brown"], ["17462E", "Zuccini", "Green"], ["CDD5D5", "Zumthor", "Grey"] ]