hsl.brighter - HSL値を明るくする

投稿日: / 更新日:

d3.jsのhsl.brighter()は、HSL値を明るくするためのメソッドです。引数をkとした場合に0.7 ^ -kの計算が適用されます。

サンプルコード

// HSL値のインスタンスを作成
var hsl = d3.hsl( 24, 0.82, 0.45 ) ;

// HSL値を明るくして取得
var brightColor = hsl.brighter() ;

// HSL値を明るくして取得 (効果はいつもの半分だけでいい)
var brightColor = hsl.brighter( 0.5 ) ;

// HSLの各値を取得
var H = brightColor.h ;
var S = brightColor.s ;
var L = brightColor.l ;

// 直接スタイルに指定しても可
d3.select( "#target" ).style( "background", brightColor ) ;

デモ

hsl( 24, 0.82, 0.45 )を指定したインスタンスを作成してあります。ボタンを押すとbrighter()を実行します。もう1つのボタンは引数に0.2(初期値は1)を指定して、弱めに明るくします。なお、出力されるHSL値は、小数点第3位以下を切り捨てています。

構文

brightColor = hsl.brighter( k )

引数

項目説明
k引数をkとした場合に0.7 ^ -kの計算が、L値にかけられる。引数を指定しない場合の初期値は1

戻り値

項目説明
brightColorHSL値を含んだオブジェクトリテラル({ h:n, s:n, l:n })が戻り値となる。