RGB-to-HSV Color Conversion

JavaScript FAQ | JavaScript Colors FAQ  

Question: How do I convert a color from RGB model to HSV model in JavaScript?

Answer: The HSV (Hue, Saturation, Value) color model is often used by graphics designers, in addition to other well-known color models such as RGB (Red, Green, Blue) and CMYK (Cyan, Magenta, Yellow, blacK). Below is a simple RGB-to-HSV color converter function. Try it now - input the RGB values (in the range 0 to 255) and click Convert to HSV:

R: G: B: H: S: V:
The hue (H) varies on the 360-degree hue circle (also known as the color wheel), red being 0, yellow 60, green 120, cyan 180, blue 240, and magenta 300. The S and V range from 0 to 1. Here is the source code of the RGB-to-HSV converter function.
function rgb2hsv (r,g,b) {
 var computedH = 0;
 var computedS = 0;
 var computedV = 0;

 //remove spaces from input RGB values, convert to int
 var r = parseInt( (''+r).replace(/\s/g,''),10 ); 
 var g = parseInt( (''+g).replace(/\s/g,''),10 ); 
 var b = parseInt( (''+b).replace(/\s/g,''),10 ); 

 if ( r==null || g==null || b==null ||
     isNaN(r) || isNaN(g)|| isNaN(b) ) {
   alert ('Please enter numeric RGB values!');
   return;
 }
 if (r<0 || g<0 || b<0 || r>255 || g>255 || b>255) {
   alert ('RGB values must be in the range 0 to 255.');
   return;
 }
 r=r/255; g=g/255; b=b/255;
 var minRGB = Math.min(r,Math.min(g,b));
 var maxRGB = Math.max(r,Math.max(g,b));

 // Black-gray-white
 if (minRGB==maxRGB) {
  computedV = minRGB;
  return [0,0,computedV];
 }

 // Colors other than black-gray-white:
 var d = (r==minRGB) ? g-b : ((b==minRGB) ? r-g : b-r);
 var h = (r==minRGB) ? 3 : ((b==minRGB) ? 1 : 5);
 computedH = 60*(h - d/(maxRGB - minRGB));
 computedS = (maxRGB - minRGB)/maxRGB;
 computedV = maxRGB;
 return [computedH,computedS,computedV];
}

See also:
  • JavaScript Colors FAQ
  • RGB to Hex color converter
  • RGB to CMYK color converter  
  • Hex to RGB color converter
  • Hex to CMYK color converter
  • Changing the page background color
  • Changing the color of HTML elements
  • Predefined color names (alphabetical list)
  • Applying another stylesheet to my page
  • Changing the mouse cursor style
  • Copyright © 1999-2012, JavaScripter.net.