2016/03/10色を操作できる多機能なJavaScriptのライブラリ、chroma.jsの使い方をまとめています。2016年3月現在、この記事は私的なメモ仕様なので、説明が簡素になっています。chroma.jschroma.jsのウェブサイト。ライブラリの各APIのドキュメントが紹介されています。src="/js/chroma.js"></script>APIこの章の目次chromachroma.temperaturechroma.mixchroma.blendchroma.randomchroma.contrastcolorchroma最初のステップとして、操作する色のインスタンスを作成しましょう。chromaというコンストラクタを利用します。配列でRGB値chroma.hslHSL値でインスタンスを作成します。S値とL値はパーセンテージではなく、0〜1の少数で表現して下さい。chromaの第4引数にhslを指定しても同じです。;chroma.hsvHSV値でインスタンスを作成します。;chroma.labLAB値でインスタンスを作成します。;chroma.lchLCH値でインスタンスを作成します。;chroma.hclHCL値でインスタンスを作成します。;chroma.cmykCMYK値でインスタンスを作成します。;chroma.glGL値でインスタンスを作成します。第4引数で透明度を指定できます。;chroma.temperatureケルビンの色温度で表現した色を取得します。temperature()メソッドを利用して下さい。引数には温度を表す0〜20000の数値を指定します。#ffe3cd色温度を確認するRUNHTMLCSSJavaScript<p>左側0k〜右側10000kまでの色温度です。10000k以上は色はほとんど変わりません。;chroma.mixchroma.mix()は、2つの色を合成するメソッドです。第3引数には0〜1の間の数値で混合比を指定できます。混合比は低い数値ほど、最初に指定した方の色に近くなります。第4引数には色空間を指定できます。色空間によって、合成のアルゴリズムが違うため、結果の色が変わります。(#b94389)chroma.blendchroma.blend()は、2つの色をブレンドするメソッドです。第1引数と第2引数にブレンドしたい色を、第3引数にはブレンド方法をキーワードで指定します。指定できるブレンドモードはmultiply、darken、lighten、screen、overlay、burn、dodgeです。#f79938chroma.randomchroma.random()は、ランダムで1つの色を取得するメソッドです。#???chroma.contrastchroma.contrast()は、2つの色のコントラスト比を取得します。4.5以上が閲覧するのに適したコントラスト比と言われています。背景色と文字色を組み合わせるのに白がいいか、黒がいいか、の判定などに有用です。(適切)colorchroma()で作成したインスタンスに対して実行することで、各色空間の値を取得できます。ここではcolorという変数に代入したと仮定して説明していきます。color.alpha透明度を取得したり、変更します。引数を指定した場合は変更で、指定しなかった場合は取得です。0.5color.darken色を暗くします。引数に数値を指定することで、その度合いが変わります。#680000color.brighten色を明るくします。引数に数値を指定することで、その度合いが変わります。#ffc174color.saturate色の彩度(鮮やかさ)を上げます。引数に数値を指定することで、その度合いが変わります。この計算はLCH色空間で行なわれます。#ef4400color.desaturatedesaturate()とは逆に、色の彩度(鮮やかさ)を下げて脱色します。引数に数値を指定することで、その度合いが変わります。#b17350color.setset()を利用すると、RGBのG値だけ、LCHのC値だけ、といった変換が可能になります。第1引数には対象となる色空間のプロパティ、第2引数には変更後の数値、または、文字列で演算子を指定します。#d35615color.getget()を利用すると、RGBのG値だけ、LCHのC値だけ、といったように部分的な値の取得ができます。引数には対象となる色空間のプロパティを指定して下さい。71.85433917952032color.luminance0を最も明るい、1を最も暗いと位置付けた、任意の色の明るさを数値で取得できます。0.1135102019276686逆に引数にレベルを指定して、色を取得することもできます。#eff3f8通常、明るさと暗さの判定は、RGBの色空間を基に行なわれていますが、第2引数で色空間を指定することで、その色空間において計算が行なわれます。結果も変わってきます。#afbbd8color.hexHEX(16進数)で色の値を取得します。#d36015color.nameカラーネームで色の値を取得します。相当するカラーネームが存在しない場合は、HEX(16進数)が返ります。redcolor.cssスタイルシートの値として指定するための文字列を取得します。引数を指定しなかった場合はRGB、hslと指定した場合はHSVとなります。hsl(0,100%,50%)color.rgbRGBで色の値(配列)を取得します。0]color.hslHSLで色の値(配列)を取得します。0.5]color.hsvHSVで色の値(配列)を取得します。0.5]color.hsiHSIで色の値(配列)を取得します。0.3333333333333333]color.labLABで色の値(配列)を取得します。67.20319651585301]color.lchLCHで色の値(配列)を取得します。67.20319651585301]color.hclHCLで色の値(配列)を取得します。53.24079414130722]color.temperature色の温度を取得します。1000color.glGLで色の値(配列)を取得します。1]スポンサーリンクTwitterFacebookGoogle+はてブpocketLINE更新履歴2016年3月10日コンテンツを公開しました。Arai足立区竹ノ塚在住の男。ウェブとラーメンが大好きです。@arayutwこのブログについてSYNCERシンカーはSYNC(同期)とER(する者)で「知識や感動を同期するブログ」という意味の造語です。みなさんと共に進化(しんか)していきたいという思いも込めてます。Reserved.https://syncer.jp/一番上に戻る。