HSLをRGBに変換する方法
JavaScriptを使って、カラーコードのHSLをRGBに変換します。
サンプルコード
H(0〜360)、S(0-1)、L(0-1)を指定して、0〜255のRGB値を取得します。
JavaScript
function hsl2rgb ( hsl ) {
var h = hsl[0] ;
var s = hsl[1] ;
var l = hsl[2] ;
var max = l + ( s * ( 1 - Math.abs( ( 2 * l ) - 1 ) ) / 2 ) ;
var min = l - ( s * ( 1 - Math.abs( ( 2 * l ) - 1 ) ) / 2 ) ;
var rgb ;
var i = parseInt( h / 60 ) ;
switch( i ) {
case 0 :
case 6 :
rgb = [ max, min + (max - min) * (h / 60), min ] ;
break ;
case 1 :
rgb = [ min + (max - min) * (120 - h / 60), max, min ] ;
break ;
case 2 :
rgb = [ min, max, min + (max - min) * (h - 120 / 60) ] ;
break ;
case 3 :
rgb = [ min, min + (max - min) * (240 - h / 60), max ] ;
break ;
case 4 :
rgb = [ min + (max - min) * (h - 240 / 60), min, max ] ;
break ;
case 5 :
rgb = [ max, min, min + (max - min) * (360 - h / 60) ] ;
break ;
}
return rgb.map( function ( value ) {
return value * 255 ;
} ) ;
}
hsl2rgb( [ 20.104, 0.749, 0.5 ] ) ; // [ 222.997, 95.998, 32.0025 ]
デモ
好きなHSL値を指定して、RGB値を確認してみて下さい。
function hsl2rgb ( hsl ) {
var h = hsl[0] ;
var s = hsl[1] ;
var l = hsl[2] ;
var max = l + ( s * ( 1 - Math.abs( ( 2 * l ) - 1 ) ) / 2 ) ;
var min = l - ( s * ( 1 - Math.abs( ( 2 * l ) - 1 ) ) / 2 ) ;
var rgb ;
var i = parseInt( h / 60 ) ;
switch( i ) {
case 0 :
case 6 :
rgb = [ max, min + (max - min) * (h / 60), min ] ;
break ;
case 1 :
rgb = [ min + (max - min) * (120 - h / 60), max, min ] ;
break ;
case 2 :
rgb = [ min, max, min + (max - min) * (h - 120 / 60) ] ;
break ;
case 3 :
rgb = [ min, min + (max - min) * (240 - h / 60), max ] ;
break ;
case 4 :
rgb = [ min + (max - min) * (h - 240 / 60), min, max ] ;
break ;
case 5 :
rgb = [ max, min, min + (max - min) * (360 - h / 60) ] ;
break ;
}
return rgb.map( function ( value ) {
return value * 255 ;
} ) ;
}
var a = hsl2rgb( [ 20.104, 0.749, 0.5 ] ) ;
a =
関連記事
- RGBをHSVに変換する方法
- カラーコードをRGBからHSVに変換します。
- 要素の位置座標を取得する方法
- 指定した要素の位置座標を取得します。
- ラジオボタンの値を取得する方法
- どのラジオボタンが選択状態かを取得するには、要素のcheckedプロパティを確認します。
- ランダムの数(乱数)を作る方法
- ランダムで数を作成します。
- RGBをHSLに変換する方法
- カラーコードをRGBからHSLに変換します。
- HSVをRGBに変換する方法
- カラーコードをHSVからRGBに変換します。