はじめに
色を扱うことの出来る、Javascriptライブラリーのchroma.jsについて調べることがありましたので、書きました
内容は公式ドキュメントと大差ありません
概要
- Javascriptでの色の扱いが便利になるライブラリー、カラーマップなども手軽に作成出来る
ドキュメント兼ホームページ
Github
ライセンスが若干特殊っぽい
Apache2.0のライセンスを持った色が同梱されてる？
この辺は少し注意した方が良さそうかも
インストール
- npmの場合
npm install chroma-js
import chroma from "chroma-js";
- CDNのURL
https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js
基本機能を触ってみる
ドキュメントによると
- さまざまなフォーマットから色を読み取ることが出来る
- 色の解析と操作
- 色をさまざまな形式に変換する
- 異なる色空間での線形およびベジェ補間ができる
とのこと
単純な読み取り/操作/出力のチェーンの例
const col = chroma('pink').darken().saturate(2).hex();
console.log(col);
"#ff6d93"
これは、ピンク色で、暗め、彩度を2くらいの色を16進数でという命令
また、地図やデータビジュアライゼーションのカラーパレットに使用するために、様々な方法（例えば、HSVの色が等距離にならないようにする方法）で美しい色を生成することができる
とのこと
const cols = chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6);
console.log(cols);
["#fafa6e","#9cdf7c","#4abd8c","#00968e","#106e7c","#2a4858"]
これは、#fafa6eから#2A4858までのカラースケールをLCH色空間で6段階作成するという命令
LCHについて
様々な色空間
ちなみにざっくりこんな指定もできてしまう
const output = document.getElementById('output');
const cols = chroma.scale(['blue', 'green', 'yellow', 'red']).mode('lab');
for( var i = 0; i <=1; i = i + 0.1) {
output.innerHTML +=
"<div class='color' style='background-color: " + cols(i) + ";'></div>"
}
上記のplayground
少し触っただけでも、色に関するあらゆる操作ができそうですが
色空間についての知識があるとより使いこなせそうなので、もう少し勉強が必要だなあ。。。
と思いました