chroma.jsについて

はじめに

色を扱うことの出来る、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

少し触っただけでも、色に関するあらゆる操作ができそうですが

色空間についての知識があるとより使いこなせそうなので、もう少し勉強が必要だなあ。。。

と思いました