HSVをRGBに変換する方法
JavaScriptを使って、カラーコードのHSVをRGBに変換します。
サンプルコード
H(0〜360)、S(0〜1)、V(0〜1)を指定して、0〜255のRGB値を取得します。ここでは円柱モデルを採用しています。
JavaScript
function hsv2rgb ( hsv ) {
var h = hsv[0] / 60 ;
var s = hsv[1] ;
var v = hsv[2] ;
if ( s == 0 ) return [ v * 255, v * 255, v * 255 ] ;
var rgb ;
var i = parseInt( h ) ;
var f = h - i ;
var v1 = v * (1 - s) ;
var v2 = v * (1 - s * f) ;
var v3 = v * (1 - s * (1 - f)) ;
switch( i ) {
case 0 :
case 6 :
rgb = [ v, v3, v1 ] ;
break ;
case 1 :
rgb = [ v2, v, v1 ] ;
break ;
case 2 :
rgb = [ v1, v, v3 ] ;
break ;
case 3 :
rgb = [ v1, v2, v ] ;
break ;
case 4 :
rgb = [ v3, v1, v ] ;
break ;
case 5 :
rgb = [ v, v1, v2 ] ;
break ;
}
return rgb.map( function ( value ) {
return value * 255 ;
} ) ;
}
hsv2rgb( [ 20.104, 0.749, 1 ] ) ; // [ 255,128.001058,64.005 ]
デモ
好きなCMY値を指定して、CMYK値を確認してみて下さい。
function hsv2rgb ( hsv ) {
var h = hsv[0] / 60 ;
var s = hsv[1] ;
var v = hsv[2] ;
if ( s == 0 ) return [ v * 255, v * 255, v * 255 ] ;
var rgb ;
var i = parseInt( h ) ;
var f = h - i ;
var v1 = v * (1 - s) ;
var v2 = v * (1 - s * f) ;
var v3 = v * (1 - s * (1 - f)) ;
switch( i ) {
case 0 :
case 6 :
rgb = [ v, v3, v1 ] ;
break ;
case 1 :
rgb = [ v2, v, v1 ] ;
break ;
case 2 :
rgb = [ v1, v, v3 ] ;
break ;
case 3 :
rgb = [ v1, v2, v ] ;
break ;
case 4 :
rgb = [ v3, v1, v ] ;
break ;
case 5 :
rgb = [ v, v1, v2 ] ;
break ;
}
return rgb.map( function ( value ) {
return value * 255 ;
} ) ;
}
var a = hsv2rgb( [ 20.104, 0.749, 1 ] ) ;
a =
関連記事
- RGBをHSVに変換する方法
- カラーコードをRGBからHSVに変換します。
- HSLをRGBに変換する方法
- カラーコードをHSLからRGBに変換します。
- CMYをCMYKに変換する方法
- カラーコードをCMYからCMYKに変換します。
- 配列から要素を削除する方法
- 配列から先頭、末尾、または指定位置の要素を削除します。
- RGBをCMYに変換する方法
- カラーコードをRGBからCMYに変換します。
- CMYをRGBに変換する方法
- カラーコードをCMYからRGBに変換します。