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

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

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位以下を切り捨てています。

RUN
HTML
CSS
JavaScript

<div id="target">hsl( 24, 0.82, 0.45 )</div> <p><a id="method1">明るくする</a></p> <p><a id="method2">弱めに明るくする</a></p> <p><a id="method3">リセット</a></p>

#target { height: 100px ; line-height: 100px ; background: rgb( 211, 96, 21 ) ; 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 ; }

// HSL値のインスタンスを作成 (3つの引数を使ってHSL値を指定) var hsl = d3.hsl( 24, 0.82, 0.45 ) ; // クリックイベント1 d3.select( "#method1" ).on( "click", function() { // 色を明るくして取得 var brightColor = hsl.brighter() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", brightColor ).text( "hsl( " + brightColor.h + ", " + brightColor.s + ", " + Math.floor( brightColor.l * 100 ) / 100 + " )" ).style( "color", textColor( brightColor ) ) ; // インスタンスを更新 hsl = d3.hsl( brightColor ) ; } ) ; // クリックイベント2 d3.select( "#method2" ).on( "click", function() { // 色を明るくして取得 var brightColor = hsl.brighter( 0.2 ) ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", brightColor ).text( "hsl( " + brightColor.h + ", " + brightColor.s + ", " + Math.floor( brightColor.l * 100 ) / 100 + " )" ).style( "color", textColor( brightColor ) ) ; // インスタンスを更新 hsl = d3.hsl( brightColor ) ; } ) ; // クリックイベント3 d3.select( "#method3" ).on( "click", function() { // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", "#d36015" ).text( "hsl( 24, 0.82, 0.45 )" ).style( "color", textColor( "#fff" ) ) ; // インスタンスを更新 hsl = d3.hsl( 24, 0.82, 0.45 ) ; } ) ; // 背景色に応じて文字色を白にするか黒にするか判断 function textColor( brightColor ) { brightColor = d3.rgb( brightColor.toString() ) ; return ( brightColor.r * 0.299 + brightColor.g * 0.587 + brightColor.b * 0.114 ) > 186 ? "#000" : "#fff" ; }

構文

brightColor = hsl.brighter( k )

引数

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

戻り値

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