rgb.hsl - RGB値をHSL値に変換する

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのrgb.hsl()は、RGB値をHSL値に変換するメソッドです。

サンプルコード

// RGB値のインスタンスを作成
var rgb = d3.rgb( 211, 96, 21 ) ;

// RGB値をHSL値に変換した値を取得
var hsl = rgb.hsl() ;

// HSLの各値を確認
var H = hsl.h ;
var S = hsl.s ;
var L = hsl.l ;

デモ

HSL値をRGB値に変換するデモです。出力する値は、小数点第3位以下を切り捨てたものです。

RUN
HTML
CSS
JavaScript

#target { height: 100px ; line-height: 100px ; background: #000 ; margin: 0 auto ; color: #fff ; text-align: center ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; }

// クリックイベント1 d3.select( "#method1" ).on( "click", function() { // RGB値のインスタンスを作成 var rgb = d3.rgb( 211, 96, 21 ) ; // RGBをHSL値に変換した値を取得 var hsl = rgb.hsl() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", hsl ).text( "hsl( " + Math.floor( hsl.h * 100 )/100 + ", " + Math.floor( hsl.s * 100 )/100 + ", " + Math.floor( hsl.l * 100 )/100 + " )" ).style( "color", textColor( hsl ) ) ; } ) ; // クリックイベント2 d3.select( "#method2" ).on( "click", function() { // RGB値のインスタンスを作成 var rgb = d3.rgb( 38, 96, 161 ) ; // RGBをHSL値に変換した値を取得 var hsl = rgb.hsl() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", hsl ).text( "hsl( " + Math.floor( hsl.h * 100 )/100 + ", " + Math.floor( hsl.s * 100 )/100 + ", " + Math.floor( hsl.l * 100 )/100 + " )" ).style( "color", textColor( hsl ) ) ; } ) ; // クリックイベント3 d3.select( "#method3" ).on( "click", function() { // RGB値のインスタンスを作成 var rgb = d3.rgb( 244, 67, 54 ) ; // RGBをHSL値に変換した値を取得 var hsl = rgb.hsl() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", hsl ).text( "hsl( " + Math.floor( hsl.h * 100 )/100 + ", " + Math.floor( hsl.s * 100 )/100 + ", " + Math.floor( hsl.l * 100 )/100 + " )" ).style( "color", textColor( hsl ) ) ; } ) ; // クリックイベント4 d3.select( "#method4" ).on( "click", function() { // RGB値のインスタンスを作成 var rgb = d3.rgb( 155, 89, 182 ) ; // RGBをHSL値に変換した値を取得 var hsl = rgb.hsl() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", hsl ).text( "hsl( " + Math.floor( hsl.h * 100 )/100 + ", " + Math.floor( hsl.s * 100 )/100 + ", " + Math.floor( hsl.l * 100 )/100 + " )" ).style( "color", textColor( hsl ) ) ; } ) ; // クリックイベント5 d3.select( "#method5" ).on( "click", function() { // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", "#000000" ).text( "hsl( 1, 0.2, 0.1 )" ).style( "color", "#fff" ) ; } ) ; // 背景色に応じて文字色を白にするか黒にするか判断 function textColor( hsl ) { var rgb = hsl.rgb() ; return ( rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114 ) > 186 ? "#000" : "#fff" ; }

構文

hsl = rgb.hsl()

引数

引数はありません。

戻り値

項目	説明
hsl	RGB値をHSL値に変換した値が戻り値となります。