chroma.jsの使い方まとめ (色を操作するライブラリ)

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

アイキャッチ画像

色を操作できる多機能なJavaScriptのライブラリ、chroma.jsの使い方をまとめています。2016年3月現在、この記事は私的なメモ仕様なので、説明が簡素になっています。ご了承下さい。

chroma.js: chroma.jsのウェブサイト。ライブラリの各APIのドキュメントが紹介されています。

デモ

RUN
HTML
CSS
JavaScript

API

chroma

最初のステップとして、操作する色のインスタンスを作成しましょう。chromaというコンストラクタを利用します。

// 色のインスタンスを作成する
var chroma = chroma( "#D36015" ) ;

// 他の指定方法
// chroma( "pink" ) ;		// カラーネーム
// chroma( 211, 96, 21 ) ;	// 3つの引数でRGB値
// chroma( [ 211, 96, 21 ] ) ;	// 配列でRGB値

chroma.hsl

HSL値でインスタンスを作成します。S値とL値はパーセンテージではなく、0〜1の少数で表現して下さい。chromaの第4引数にhslを指定しても同じです。

// 色のインスタンスを作成する
var chroma = chroma.hsl( 24, 0.82, 0.45 ) ;

// 下記でも同じ
var chroma = chroma( 24, 0.82, 0.45, "hsl" ) ;

chroma.hsv

HSV値でインスタンスを作成します。

// 色のインスタンスを作成する
var chroma = chroma.hsv( 24, 0.9, 0.8 ) ;

// 下記でも同じ
var chroma = chroma( 24, 0.9, 0.8, "hsv" ) ;

chroma.lab

LAB値でインスタンスを作成します。

// 色のインスタンスを作成する
var chroma = chroma.lab( 54, 41, 58 ) ;

// 下記でも同じ
var chroma = chroma( 54, 41, 58, "lab" ) ;

chroma.lch

LCH値でインスタンスを作成します。

// 色のインスタンスを作成する
var chroma = chroma.lch( 54, 72, 54 ) ;

// 下記でも同じ
var chroma = chroma( 54, 72, 54, "lch" ) ;

chroma.hcl

HCL値でインスタンスを作成します。

// 色のインスタンスを作成する
var chroma = chroma.hcl( 54, 72, 54 ) ;

// 下記でも同じ
var chroma = chroma( 54, 72, 54, "hcl" ) ;

chroma.cmyk

CMYK値でインスタンスを作成します。

// 色のインスタンスを作成する
var chroma = chroma.cmyk( 0, 0.54, 0.9, 0.17 ) ;

// 下記でも同じ
var chroma = chroma( 0, 0.54, 0.9, 0.17, "cmyk" ) ;

chroma.gl

GL値でインスタンスを作成します。第4引数で透明度を指定できます。

// 色のインスタンスを作成する
var chroma = chroma.gl( 0.8, 0.37, 0.08, 0.5 ) ;

// 下記でも同じ
var chroma = chroma( 0.8, 0.37, 0.08, 0.5, "gl" ) ;

chroma.temperature

ケルビンの色温度で表現した色を取得します。temperature()メソッドを利用して下さい。引数には温度を表す0〜20000の数値を指定します。

// 温度を指定して色を取得
var color = chroma.temperature( 1000 ) ;		// #ff3a00
var color = chroma.temperature( 2000 ) ;		// #ff8a13
var color = chroma.temperature( 5000 ) ;		// #ffe3cd

色温度を確認する

RUN
HTML
CSS
JavaScript

<p>左側0k〜右側10000kまでの色温度です。10000k以上は色はほとんど変わりません。</p> <div> <ul id="target"></ul> </div> <script src="/js/chroma.js"></script>

ul { overflow: hidden ; list-style-type: none ; margin: 0 ; padding: 0 ; } li { float: left ; height: 100px ; margin: 0 ; } div { position: relative ; width: 90% ; margin: 0 auto ; }

var ul = document.getElementById( "target" ) ; var df = document.createDocumentFragment() ; var width = ul.parentNode.clientWidth / 10000 + "px" ; for( var i=0; 10000>i; i++ ) { var li = document.createElement( "li" ) ; li.style.backgroundColor = chroma.temperature( i ) ; li.style.width = width ; df.appendChild( li ) ; } ul.appendChild( df ) ;

chroma.mix

chroma.mix()は、2つの色を合成するメソッドです。第3引数には0〜1の間の数値で混合比を指定できます。混合比は低い数値ほど、最初に指定した方の色に近くなります。第4引数には色空間を指定できます。色空間によって、合成のアルゴリズムが違うため、結果の色が変わります。

// 茶色と青色を合成
var color = chroma.mix( "#D36015", "#2660A1" ) ;		// #7c605b

// 茶色と青色を合成 (混合比を指定)
var color = chroma.mix( "#D36015", "#2660A1", 0.2 ) ;		// #b06031

// 色空間を指定して合成
var color = chroma.mix( "#D36015", "#2660A1", 0.5, "rgb" ) ;		// RGB (#7c605b)
var color = chroma.mix( "#D36015", "#2660A1", 0.5, "hsl" ) ;		// HSL (#b31eb9)
var color = chroma.mix( "#D36015", "#2660A1", 0.5, "hsv" ) ;		// HSV (#b41fba)
var color = chroma.mix( "#D36015", "#2660A1", 0.5, "lab" ) ;		// LAB (#996162)
var color = chroma.mix( "#D36015", "#2660A1", 0.5, "lch" ) ;		// LCH (#b94389)
var color = chroma.mix( "#D36015", "#2660A1", 0.5, "hcl" ) ;		// HCL (#b94389)

chroma.blend

chroma.blend()は、2つの色をブレンドするメソッドです。第1引数と第2引数にブレンドしたい色を、第3引数にはブレンド方法をキーワードで指定します。指定できるブレンドモードはmultiply、darken、lighten、screen、overlay、burn、dodgeです。

// 茶色と青色をブレンド
var color = chroma.blend( "#D36015", "#2660A1", "multiply" ) ;		// #1f240d
var color = chroma.blend( "#D36015", "#2660A1", "darken" ) ;		// #266015
var color = chroma.blend( "#D36015", "#2660A1", "lighten" ) ;		// #d360a1
var color = chroma.blend( "#D36015", "#2660A1", "screen" ) ;		// #d99ba8
var color = chroma.blend( "#D36015", "#2660A1", "overlay" ) ;		// #b4481a
var color = chroma.blend( "#D36015", "#2660A1", "burn" ) ;		// #000000
var color = chroma.blend( "#D36015", "#2660A1", "dodge" ) ;		// #f79938

chroma.random

chroma.random()は、ランダムで1つの色を取得するメソッドです。

// ランダムの色を取得
var color = chroma.random() ;		// #???
var color = chroma.random() ;		// #???
var color = chroma.random() ;		// #???
var color = chroma.random() ;		// #???
var color = chroma.random() ;		// #???

chroma.contrast

chroma.contrast()は、2つの色のコントラスト比を取得します。4.5以上が閲覧するのに適したコントラスト比と言われています。例えば、背景色と文字色を組み合わせるのに白がいいか、黒がいいか、の判定などに有用です。

// 文字色を黒とした場合、背景色との組み合わせは適切か？
var color = chroma.contrast( "black", "white" ) ;		// 21 (適切)
var color = chroma.contrast( "black", "purple" ) ;		// 2.22 (見づらい)
var color = chroma.contrast( "black", "brown" ) ;		// 2.96 (見づらい)
var color = chroma.contrast( "black", "pink" ) ;		// 13.65 (適切)

color

chroma()で作成したインスタンスに対して実行することで、各色空間の値を取得できます。ここではcolorという変数に代入したと仮定して説明していきます。

color.alpha

透明度を取得したり、変更します。引数を指定した場合は変更で、指定しなかった場合は取得です。

// 変更
var newColor = chroma( "#d36015" ).alpha( 0.5 ) ;	// 透明度を0.5に設定した新しいインスタンスを取得

// 取得
var alpha = newColor.alpha() ;		// 0.5

color.darken

色を暗くします。引数に数値を指定することで、その度合いが変わります。

// 暗くする
var newColor = chroma( "#d36015" ).darken() ;	// #9b3200

// 弱めに暗くする
var newColor = chroma( "#d36015" ).darken( 0.5 ) ;	// #b74900

// 強めに暗くする
var newColor = chroma( "#d36015" ).darken( 2 ) ;	// #680000

color.brighten

色を明るくします。引数に数値を指定することで、その度合いが変わります。

// 明るくする
var newColor = chroma( "#d36015" ).brighten() ;	// #ff9046

// 弱めに明るくする
var newColor = chroma( "#d36015" ).brighten( 0.5 ) ;	// #f0782e

// 強めに明るくする
var newColor = chroma( "#d36015" ).brighten( 2 ) ;	// #ffc174

color.saturate

色の彩度(鮮やかさ)を上げます。引数に数値を指定することで、その度合いが変わります。この計算はLCH色空間で行なわれます。

// 鮮やかにする
var newColor = chroma( "#d36015" ).saturate() ;	// #e15400

// 弱めに鮮やかにする
var newColor = chroma( "#d36015" ).saturate( 0.5 ) ;	// #da5a00

// 強めに鮮やかにする
var newColor = chroma( "#d36015" ).saturate( 2 ) ;	// #ef4400

color.desaturate

desaturate()とは逆に、色の彩度(鮮やかさ)を下げて脱色します。引数に数値を指定することで、その度合いが変わります。

// 脱色する
var newColor = chroma( "#d36015" ).desaturate() ;	// #c36a36

// 弱めに脱色する
var newColor = chroma( "#d36015" ).desaturate( 0.5 ) ;	// #cb6527

// 強めに脱色する
var newColor = chroma( "#d36015" ).desaturate( 2 ) ;	// #b17350

color.set

set()を利用すると、RGBのG値だけ、LCHのC値だけ、といった変換が可能になります。第1引数には対象となる色空間のプロパティ、第2引数には変更後の数値、または、文字列で演算子を指定します。

// RGB値のG値を0に変更
var newColor = chroma( "#d36015" ).set( "rgb.g", 0 ) ;	// #d30015

// LCH値のC値を0に変更
var newColor = chroma( "#d36015" ).set( "lch.c", 0 ) ;	// #828282

// RGB値のB値を2倍に変更
var newColor = chroma( "#d36015" ).set( "rgb.g", "*2" ) ;	// #d3c015

// RGB値のB値をマイナス10
var newColor = chroma( "#d36015" ).set( "rgb.g", "-10" ) ;	// #d35615

color.get

get()を利用すると、RGBのG値だけ、LCHのC値だけ、といったように部分的な値の取得ができます。引数には対象となる色空間のプロパティを指定して下さい。

// RGB値のG値を取得
var newColor = chroma( "#d36015" ).get( "rgb.g" ) ;	// 96

// LCH値のC値を取得
var newColor = chroma( "#d36015" ).get( "lch.c" ) ;	// 71.85433917952032

color.luminance

0を最も明るい、1を最も暗いと位置付けた、任意の色の明るさを数値で取得できます。

// #d36015の明るさは？
var luminance = chroma( "#d36015" ).luminance() ;	// 0.2226876902098625

// #2660a1の明るさは？
var luminance = chroma( "#2660a1" ).luminance() ;	// 0.1135102019276686

逆に引数にレベルを指定して、色を取得することもできます。

// #d36015の明るさを0.5にすると？
var luminance = chroma( "#d36015" ).luminance( 0.5 ) ;	// #a6bed8

// #d36015の明るさを0.9にすると？
var luminance = chroma( "#d36015" ).luminance( 0.9 ) ;	// #eff3f8

通常、明るさと暗さの判定は、RGBの色空間を基に行なわれていますが、第2引数で色空間を指定することで、その色空間において計算が行なわれます。結果も変わってきます。

// RGBの場合
var luminance = chroma( "#d36015" ).luminance( 0.5 ) ;	// #a6bed8

// HSLの場合
var luminance = chroma( "#d36015" ).luminance( 0.5, "hsl" ) ;	// #9bbfe8

// LABの場合
var luminance = chroma( "#d36015" ).luminance( 0.5, "lab" ) ;	// #afbbd8

color.hex

HEX(16進数)で色の値を取得します。

// 色をHEXで取得
var color = chroma( "#d36015" ).hex() ;	// #d36015

color.name

カラーネームで色の値を取得します。相当するカラーネームが存在しない場合は、HEX(16進数)が返ります。

// 色をカラーネームで取得
var color = chroma( "#d36015" ).name() ;	// #d36015 (カラーネームなし)
var color = chroma( "#ff0000" ).name() ;	// red

color.css

スタイルシートの値として指定するための文字列を取得します。引数を指定しなかった場合はRGB、hslと指定した場合はHSVとなります。

// RGBでCSSの値を取得
var color = chroma( "#d36015" ).name() ;	// rgb(211,96,21)
var color = chroma( "#ff0000" ).name() ;	// rgb(255,0,0)

// HSLでCSSの値を取得
var color = chroma( "#d36015" ).name( "hsl" ) ;	// hsl(23.68,81.9%,45.49%)
var color = chroma( "#ff0000" ).name( "hsl") ;	// hsl(0,100%,50%)

color.rgb

RGBで色の値(配列)を取得します。

// 色をRGBで取得
var color = chroma( "#d36015" ).rgb() ;	// [211, 96, 21]
var color = chroma( "#ff0000" ).rgb() ;	// [255, 0, 0]

color.hsl

HSLで色の値(配列)を取得します。

// 色をHSLで取得
var color = chroma( "#d36015" ).hsl() ;	// [23.684210526315795, 0.8189655172413792, 0.4549019607843137]
var color = chroma( "#ff0000" ).hsl() ;	// [0, 1, 0.5]

color.hsv

HSVで色の値(配列)を取得します。

// 色をHSVで取得
var color = chroma( "#d36015" ).hsv() ;	// [23.684210526315795, 0.8189655172413792, 0.4549019607843137]
var color = chroma( "#ff0000" ).hsv() ;	// [0, 1, 0.5]

color.hsi

HSIで色の値(配列)を取得します。

// 色をHSIで取得
var color = chroma( "#d36015" ).hsi() ;	// [23.06984031831889, 0.8079268292682926, 0.4287581699346405]
var color = chroma( "#ff0000" ).hsi() ;	// [0, 1, 0.3333333333333333]

color.lab

LABで色の値(配列)を取得します。

// 色をLABで取得
var color = chroma( "#d36015" ).lab() ;	// [54.31540852261051, 41.77540565981408, 58.4624797702212]
var color = chroma( "#ff0000" ).lab() ;	// [53.24079414130722, 80.09245959641109, 67.20319651585301]

color.lch

LCHで色の値(配列)を取得します。

// 色をLABで取得
var color = chroma( "#d36015" ).lch() ;	// [54.31540852261051, 41.77540565981408, 58.4624797702212]
var color = chroma( "#ff0000" ).lch() ;	// [53.24079414130722, 80.09245959641109, 67.20319651585301]

color.hcl

HCLで色の値(配列)を取得します。

// 色をHCLで取得
var color = chroma( "#d36015" ).hcl() ;	// [54.45162148849488, 71.85433917952032, 54.31540852261051]
var color = chroma( "#ff0000" ).hcl() ;	// [39.99901061253297, 104.55176567686985, 53.24079414130722]

color.temperature

色の温度を取得します。

// 色の温度を取得
var color = chroma( "#d36015" ).temperature() ;	// 2045
var color = chroma( "#ff0000" ).temperature() ;	// 1000

color.gl

GLで色の値(配列)を取得します。

// 色の温度を取得
var color = chroma( "#d36015" ).gl() ;	// [0.8274509803921568, 0.3764705882352941, 0.08235294117647059, 1]
var color = chroma( "#ff0000" ).gl() ;	// [1, 0, 0, 1]