RGBをHSVに変換する方法
JavaScriptを使って、カラーコードのRGBをHSVに変換します。
サンプルコード
0〜255のRGB値を指定して、H(0〜360)、S(0-1)、V(0-1)の値を取得します。HSVには円柱モデルと円錐モデルがあり、Sの計算方法が違います。ここでは円柱モデルを採用しています。
JavaScript
function rgb2hsv ( rgb ) {
var r = rgb[0] / 255 ;
var g = rgb[1] / 255 ;
var b = rgb[2] / 255 ;
var max = Math.max( r, g, b ) ;
var min = Math.min( r, g, b ) ;
var diff = max - min ;
var h = 0 ;
switch( min ) {
case max :
h = 0 ;
break ;
case r :
h = (60 * ((b - g) / diff)) + 180 ;
break ;
case g :
h = (60 * ((r - b) / diff)) + 300 ;
break ;
case b :
h = (60 * ((g - r) / diff)) + 60 ;
break ;
}
var s = max == 0 ? 0 : diff / max ;
var v = max ;
return [ h, s, v ] ;
}
rgb2hsv( [ 255, 128, 64 ] ) ; // [ 20.104, 0.749, 1 ]
デモ
好きなRGB値を指定して、HSV値を確認してみて下さい。
function rgb2hsv ( rgb ) {
var r = rgb[0] / 255 ;
var g = rgb[1] / 255 ;
var b = rgb[2] / 255 ;
var max = Math.max( r, g, b ) ;
var min = Math.min( r, g, b ) ;
var diff = max - min ;
var h = 0 ;
switch( min ) {
case max :
h = 0 ;
break ;
case r :
h = (60 * ((b - g) / diff)) + 180 ;
break ;
case g :
h = (60 * ((r - b) / diff)) + 300 ;
break ;
case b :
h = (60 * ((g - r) / diff)) + 60 ;
break ;
}
var s = max == 0 ? 0 : diff / max ;
var v = max ;
return [ h, s, v ] ;
}
var a = rgb2hsv( [ 255, 128, 64 ] ) ;
a =
関連記事
- ランダムの数(乱数)を作る方法
- ランダムで数を作成します。
- HEXをRGBに変換する方法
- カラーコードをHEXからRGBに変換します。
- UNIXタイムスタンプを取得する方法
- JavaScriptでPHPのtime()、strtotime()と同じようにUNIX TIMESTAMPを取得します。
- CMYをCMYKに変換する方法
- カラーコードをCMYからCMYKに変換します。
- HSVをRGBに変換する方法
- カラーコードをHSVからRGBに変換します。
- RGBをHSLに変換する方法
- カラーコードをRGBからHSLに変換します。