アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

色の処理に特化した軽量ライブラリ「Chroma.js」

こんにちは、古見澤(コミザワ)です。最近は寒いですね。
自宅に加湿器を導入して潤いが増した一方、結露が酷くて窓際や玄関がカビそうで困ってます。

さて今回は Chroma.js という色に関するJSライブラリに触れる機会があったのですが、日本語の記事が殆ど見つからなかったため、この紹介をしようと思います。

Chroma.js とは



色を補正したり、色空間の変換をしたり、カラースケールを設定して色を得る事ができる、色に関する振る舞いに特化した軽量(32.8 KB)なJSライブラリです。
多くの色空間に対応しており、CSSJavaScriptで扱いやすい形で色情報を取得することができます。
ソースはgit上にあり、ライセンスは BSD license です。

Chroma.js

サンプル






下の例は色の補正機能を使い、X11カラーのpink(#ffc0cb)をベースに、明るさを下げ、彩度を上げ、出来上がった色を16進数で返しています。


var myColor = chroma('<script>displayColor('pink')</script>').darken().saturate(2).hex();
console.log(myColor); // "<script>displayColor('#ff6c93')</script>"

次の例は、テストの点数を表にしたときに背景色に使う色を取得するものです。
仮に60点を合格点として背景色を白とし、そこから0点に近づくほど濃い青色が、100点に近づくほど濃い赤色を返すサンプルです。


var scores = [80, 98, 92, 75, 60, 74, 68, 90, 55, 76, 38], // テストの点数
    scale = chroma.scale(['<script>displayColor('#0000FF')</script>', '<script>displayColor('#FFFFFF')</script>', '<script>displayColor('#FF0000')</script>']).domain([0, 60, 100]);
 
scores.forEach(function(value){
  var bgColor = scale(value);

  // 取得した色を使って描画したり、プロパティに代入したり
  
  // ひとまず表示してみる
  document.write('<span style="background-color:' + bgColor + '; padding:6px">' + value + '</span> ');
});

実行結果:


導入



npmでインストールできます。


npm install chroma-js

readmeには書いてありませんが、bowerにもありました。


bower install chroma-js

あとは本体である chroma.min.js だけ直接ダウンロードしても大丈夫。

主な機能



以下に一部取り上げます、全ての情報はドキュメントを参照ください。見た目にも綺麗です。

コンストラクタ





chroma('hotpink');              // X11カラーの名称には全て対応
chroma('#ff3399');              // RRGGBBの6桁、3桁も対応。
chroma('F39');                  // # はあっても無くてもよく、大文字小文字も区別しない
chroma(0xff3399);               // 16進数でもOK
chroma(255, 51, 153);           // RGBをそれぞれ1つずつ渡すのもOK
chroma([255, 51, 153]);         // RGBを配列にして渡すのもOK
 
chroma(330, 1, 0.6, 'hsl');     // 最後の引数に明示的な色空間の指定が可能 省略時はRGB
chroma.hsl(330, 1, 0.6);        // 色空間名のfunctionを通しても作成可能
 
chroma(80, 40, 130, 'lch');     // LCH
chroma.lch(80, 40, 130);        // 同等
 
chroma(130, 40, 80, 'hcl');     // 上のLCHとはHとLの順序が逆なだけで、他は同じ
chroma.hcl(130, 40, 80);        // 同等
 
chroma(0.2, 0.8, 0, 0, 'cmyk'); // CMYK
chroma.cmyk(0.2, 0.8, 0, 0);    // 同等
 
chroma(0.6, 0, 0.8, 'gl');      // RGBとほぼ同じだが、引数の値の範囲が 0..1 となる
chroma.gl(0.6, 0, 0.8);         // 同等
chroma.gl(0.6, 0, 0.8, 0.5);    // また、オプションとして4番目の引数にアルファチャンネルを指定できる

色を混ぜる




chroma.mix('<script>displayColor('red')</script>', '<script>displayColor('blue')</script>');        // <script>displayColor('#7f007f')</script> 赤に青を混ぜる
chroma.mix('<script>displayColor('red')</script>', '<script>displayColor('blue')</script>', 0.25);  // <script>displayColor('#bf003f')</script> 3番目の引数で割合を指定可能、省略時は0.5。
 
// 混ぜあわせた結果は色空間によって変わる。4番目の引数で色空間を指定可能、省略時はrgb。
chroma.mix('<script>displayColor('red')</script>', '<script>displayColor('blue')</script>', 0.5, 'rgb'); // <script>displayColor('#7f007f')</script> <script>displayScale(chroma.scale(['red','blue']).mode('rgb'))</script>
chroma.mix('<script>displayColor('red')</script>', '<script>displayColor('blue')</script>', 0.5, 'hsl'); // <script>displayColor('#ff00ff')</script> <script>displayScale(chroma.scale(['red','blue']).mode('hsl'))</script>
chroma.mix('<script>displayColor('red')</script>', '<script>displayColor('blue')</script>', 0.5, 'lab'); // <script>displayColor('#ca0088')</script> <script>displayScale(chroma.scale(['red','blue']).mode('lab'))</script>
chroma.mix('<script>displayColor('red')</script>', '<script>displayColor('blue')</script>', 0.5, 'lch'); // <script>displayColor('#fa0080')</script> <script>displayScale(chroma.scale(['red','blue']).mode('lch'))</script>
 
// blend functionという形で、いくつか最初から用意されているものもある。
// 利用可能なのは multiply, darken, lighten, screen, overlay, burn, dogde の7つ。
chroma.blend('<script>displayColor('4CBBFC')</script>', '<script>displayColor('EEEE22')</script>', 'multiply'); // <script>displayColor('#46ae21')</script> 乗算
chroma.blend('<script>displayColor('4CBBFC')</script>', '<script>displayColor('EEEE22')</script>', 'darken');   // <script>displayColor('#4cbb22')</script> 比較(暗)
chroma.blend('<script>displayColor('4CBBFC')</script>', '<script>displayColor('EEEE22')</script>', 'lighten');  // <script>displayColor('#eeeefc')</script> 比較(明)
chroma.blend('<script>displayColor('4CBBFC')</script>', '<script>displayColor('EEEE22')</script>', 'screen');   // <script>displayColor('#f3fafc')</script> スクリーン
chroma.blend('<script>displayColor('4CBBFC')</script>', '<script>displayColor('EEEE22')</script>', 'overlay');  // <script>displayColor('#8df5f9')</script> オーバーレイ
chroma.blend('<script>displayColor('4CBBFC')</script>', '<script>displayColor('EEEE22')</script>', 'burn');     // <script>displayColor('#3fb6e8')</script> 焼き込み
chroma.blend('<script>displayColor('4CBBFC')</script>', '<script>displayColor('EEEE22')</script>', 'dogde');    // <script>displayColor('#ffffff')</script> 覆い焼き

ランダムな色を作成する




chroma.random();

明るさの上げ下げ




chroma('<script>displayColor('hotpink')</script>').darken();    // <script>displayColor('#c93384')</script> 暗くする
chroma('<script>displayColor('hotpink')</script>').darken(2);   // <script>displayColor('#930058')</script> 暗くする、引数で調整可能。省略時は1。
chroma('<script>displayColor('hotpink')</script>').brighten();  // <script>displayColor('#ff9ce6')</script> 明るくする

彩度の上げ下げ




chroma('<script>displayColor('slategray')</script>').saturate();   // <script>displayColor('#4b83ae')</script> 彩度を上げる
chroma('<script>displayColor('slategray')</script>').saturate(2);  // <script>displayColor('#0087cd')</script> 彩度を上げる、引数で調整可能、省略時は1
 
chroma('<script>displayColor('hotpink')</script>').desaturate();  // <script>displayColor('#e77dae')</script> 彩度を下げる
chroma('<script>displayColor('hotpink')</script>').desaturate(2); // <script>displayColor('#cd8ca8')</script> 彩度を下げる、引数で調整可能、省略時は1
chroma('<script>displayColor('hotpink')</script>').desaturate(3); // <script>displayColor('#b199a3')</script> 同上

色情報の変更




// 絶対指定の他、相対指定も可能
chroma('<script>displayColor('skyblue')</script>').set('hsl.h', 0);         // HSLのHの値を0にする
chroma('<script>displayColor('hotpink')</script>').set('lch.c', 30);        // LCHのCの値を30にする
chroma('<script>displayColor('orangered')</script>').set('lab.l', '*0.5');  // LABのLの値を半分にする
chroma('<script>displayColor('darkseagreen')</script>').set('lch.c', '*2'); // LCHのCの値を2倍にする

情報の取得




// 色の特定パラメータを取得する場合
chroma('<script>displayColor('orangered')</script>').get('lab.l'); // 57.582
chroma('<script>displayColor('orangered')</script>').get('hsl.l'); // 0.5
chroma('<script>displayColor('orangered')</script>').get('rgb.g'); // 69
 
// 16進数の文字列を取得
chroma('<script>displayColor('orange')</script>').hex(); // "#ffa500"
 
// RGBか、HSL表記の文字列を返す
chroma('<script>displayColor('teal')</script>').css();            // "rgb(0,128,128)" 省略時はRGB
chroma('<script>displayColor('teal')</script>').alpha(0.5).css(); // "rgba(0,128,128,0.5)"
chroma('<script>displayColor('teal')</script>').css('hsl');       // "hsl(180,100%,25.1%)"
 
// 各色空間毎の値を配列で返す
chroma('<script>displayColor('orange')</script>').rgb();       // [255,165,0]
chroma('<script>displayColor('orange')</script>').hsl();       // [38.82,1,0.5]
chroma('<script>displayColor('orange')</script>').hsv();       // [38.82,1,1]
chroma('<script>displayColor('orange')</script>').hsi();       // [39.64,1,0.55]
chroma('<script>displayColor('orange')</script>').lab();       // [74.94,23.93,78.95]
chroma('<script>displayColor('skyblue')</script>').lch();      // [79.21,25.94,235.11]
chroma('<script>displayColor('skyblue')</script>').hcl();      // [235.11,25.94,79.21]

コントラストを取得




// 2色間のコントラストを取得。
// 例えば背景色と白色を比較し、値が小さい(=文字が見づらい)場合は文字色を白くするといった判定に使える
chroma.contrast('<script>displayColor('pink')</script>', '<script>displayColor('white')</script>'); // 1.5379867185268434
chroma.contrast('<script>displayColor('blue')</script>', '<script>displayColor('white')</script>'); // 8.592471358428805

コントラスト比は最低でも4.5:1を目安にすれば大丈夫そうです。

カラースケールの作成



カラースケールはこのライブラリの主要機能の一つで、冒頭のサンプルにおいてテスト点数に応じて様々な濃さの赤や青を取得する際に利用しました。
グラデーションやヒートマップのように、特定の色との間の微妙な色合いを求めるのに便利です。

基本的な使い方



chroma.scale でスケールを作成し、スケールに対して数値(ドメイン)を指定することで色を取り出します。


// 引数無しのデフォルトでは 白→黒 、0~1の範囲(ドメイン)で作成される。
f = chroma.scale(); <script>displayScale(chroma.scale())</script>
f(0.25);  // <script>displayColor('#bfbfbf')</script>
f(0.5);   // <script>displayColor('#7f7f7f')</script>
f(0.75);  // <script>displayColor('#3f3f3f')</script>

上の例だと、白(#FFFFFF)から黒(#000000)のスケールを定義し、0が白、1が黒となります。
つまり0.5は白と黒の丁度中間、0.75は中間と黒の間の色です。

スケール作成時の引数に配列を渡すことにより、スケールの色を定義できます。


chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('green')</script>']); <script>displayScale(chroma.scale(['yellow','green']))</script>

上の例では 黄 → 緑 に移り変わるカラースケールを定義しています。

スケールの範囲はデフォルトで0~1ですが、自分で定義することも可能です。
以下の例では 黄 ~ 緑 を 0 ~ 100の範囲で定義しています。色を取り出す時の引数の範囲が広がります。


chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('green')</script>'])).domain([0, 100]); <script>displayScale(chroma.scale(['yellow','green']))</script>

冒頭のサンプルでは、テストの点数と対応させるために、0~100に設定していました。

複数色からなるカラースケールと、ドメインの区切り設定



色は2色でなくてもよく、例えば以下の例では 黄 → 緑 → 白 という3色の定義です。


chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('green')</script>', '<script>displayColor('white')</script>']); <script>displayScale(chroma.scale(['yellow','green','white']))</script>

0で黄、0.5で緑、1で白。なので、0.25は黄と緑の中間、0.75は緑と白の中間色が取得できます。

また、以下のように色数に応じたdomainを明示的に指定することで、各領域の区切り位置をずらせます。


chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('green')</script>', '<script>displayColor('white')</script>']).domain([0, 0.2, 1]);

<script>displayScale(chroma.scale(['yellow','green','white']))</script> // 一つ上の例
<script>displayScale(chroma.scale(['yellow','green','white']).domain([0,0.2,1]))</script> // ずらした例

domainを指定しなかった場合、緑は0.5の位置でしたが、この場合は0.2の位置が緑になります。

色空間による違い



カラースケールの色変化は色空間によって変わります。利用する色空間を指定する場合はmode関数で指定します。
何も指定しない場合のデフォルトはrgbです。


chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('navy')</script>']); // 省略時はrgb <script>displayScale(chroma.scale(['yellow','navy']))</script>
chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('navy')</script>']).mode('lab');   <script>displayScale(chroma.scale(['yellow','navy']).mode('lab'))</script>
chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('navy')</script>']).mode('hsl');   <script>displayScale(chroma.scale(['yellow','navy']).mode('hsl'))</script>
chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('navy')</script>']).mode('lch');   <script>displayScale(chroma.scale(['yellow','navy']).mode('lch'))</script>


色の区切る個数を指定する



例えば 黄色から緑へのカラースケールを作るけど、使う色はグラデーションみたいではなく、5色だけでいいのに…という時は以下のように書きます


chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('green')</script>']).classes(5); <script>displayScale(chroma.scale(['yellow','green']).classes(5))</script>

更に、ぴったり5等分ではなく「10%、20%、40%、20%、10%」みたいに真ん中の層を厚くしたい!という時は、引数を配列にして区切る位置を指定します。


chroma.scale(['<script>displayColor('yellow')</script>', '<script>displayColor('green')</script>']).classes([0, 0.1, 0.3, 0.7, 0.9, 1]);
<script>displayScale(chroma.scale(['yellow','green']).classes(5))</script> // 1つ上の例
<script>displayScale(chroma.scale(['yellow','green']).classes([0,0.1,0.3,0.7,0.9,1]))</script> // ずらした例


最後に



単なるテキストデータでも、データに応じた色がつくだけで大分印象も変わります。
数字の羅列だけでは伝わりにくい情報も、色で直感的に伝えられるようになる例もあります。
そんなアクセント付けの時に便利なのではないでしょうか。
また、Web上から色を合成したり補正するサービスを作るのにも便利そうです。

Webデザイン 配色をイメージで学ぶ【基本11色】

こんにちは、高橋です。

近頃、ユーザが製品を経験してどれだけ満足を得れるのかといった仕組みが注目を浴びています。UXですね。配色もUXの範疇とすれば、理解を深めておいて損はないと思います。今回は基本的は色と使われるWebサイトのタイプも併せてザックリと紹介していきます。


・色紹介




◯赤(Red)



情熱や活気といった気持ちを高ぶらせる色です。
インパクトを与えたいイベント・キャンペーンサイトで使われています。またサイトカラーだけでなく、強調したいコンテンツ・危険を促す削除ボタン等にも使えます。艶のある赤は上品さを感じさせますが、使い過ぎると落ち着きのない雰囲気になってしまいまいます。反対に暗い赤は気持ちを落ち着かせる効果があります。


◯緑(Green)



健康や自然といった癒しを連想させる気持ちを落ち着かせる色です。
自然やエコをモチーフとしたサイトで使われています。また安心のカラーとも呼ばれ、保険に関するサイトでも使われています。また2009年の話ですが、緑のボタンはコンバーション率が高いなんて統計(http://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/)もあるようです。


◯青(Blue)



信頼や知性といった誠実な印象を与える色です。
信用のカラーとして多くの法人サイトでよく使用されており、コンセプトカラーとしては最も使用されている有彩色だと思います。ITとも相性が良いですね。ただ寒色は食欲を抑えますので、料理系のサイトとは相性が良くないです。ということは逆にダイエット系には向いているかもしれません。


◯黃(Yellow)



希望や快活といったとても元気なカラーです。
黄色は有彩色の中で最も明るく子供向けコンテンツに向いています!少し彩度を落とした黄色なら黒との相性が良く冒険や刺激といった雰囲気を連想させます。しかし、お金を扱うコンテンツではそういうつもりがなくても怪しい雰囲気になるかもしれませんので気をつけましょう。それから黄金色はビールを象徴する色であることは忘れてはいけないでしょう。


◯橙(Orange)



陽気や好奇心といった活発にさせる印象を与える色です。
最もバランス良く購買欲を高める色です。スーパーのチラシでは赤と黃の組み合わせが多いですが、これでは激安という印象が先行してチープな印象を与えてしまいます。その両方をうまい具合に表現してくれるオレンジはショッピングサイトでよく使われています。また明るい青とは南国をイメージさせるため夏のイベントサイトなど抜群の相性でしょう。


◯ピンク(Pink)



可愛らしさや幸せといった甘いイメージを与えるカラーです。
ふんわりとした明るいピンクは女性向けのサイトでよく使われてます。ただ、ピンクは開放感のある色ですので真面目なコンテンツでバシッとキメるのは難しかったりします。色からそれますが、その際は角のあるレイアウトで緊張感を出すと良いかもしれません。


◯茶(Brown)



木や土といったズッシリとしながらもぬくもりを感じさせるカラーです。
木の素材感を出したいサイトでよく使われています。また自然を連想させる緑との相性が良く、生命を表現しやすいと思います。また伝統的といった渋いイメージに最適です。


◯紫(Purple)



神秘や魅力といったムードを感じさせるカラーです。
Webデザインではあまり使う機会がないかもしれません。これはよく言われることですが、青と赤の二面性を持つカラーなので印象がその時の気持ちで変わったりして不安定です。それが逆に不思議と感じられるのが紫の魅力だと思います。占い系のコンテンツでは定番のように使用されます。また渋めの紫は和のイメージを持つため例えば京都に関連するコンテンツには使えると思います。


◯白(White)



純粋や平和といった神聖なイメージさせる色です。
潔癖なイメージから病院や医療機関を思い浮かべる人は多いと思います。また白は膨張色でありベースにするとそこに広い空間があるようにも感じられます。不動産関連のサイトもそうですが、間取り図が白塗りなのはそのためのように感じられます。


◯黒(Black)



恐怖や絶望といった不安をイメージさせる色です。
謎やホラーを題材としたコンテンツで使われます。ネガティブな印象の反面、デザインでは有彩色とのバランスを保つとても重要な色となります。また黒という性質上どんな色とも相性が良いです。ですが、カラーバランスが自然でもメインカラーが黒に近づいた時の雰囲気は思い描いているイメージと離れているかもしれません。黒をたくさん使うと途端に難しくなります。


◯灰(Gray)



無機質や調和といった控えめな印象の色です。
バランスが良くシンプルなサイトに仕上げたい時に便利で、多くのサイトで使用されています。また質感を硬くして艶を出せば途端に高級感が出ます。さらにWebサイトの『一工夫欲しいな』という場面にサッと馴染みます。表の偶数行のみ薄いグレーにする。無効なボタンなら濃いグレーにする。といった感じです。


・配色について



配色の選定は、例えばメインカラーを1つ選び類似色3つにアクセントカラー1つを探すといったルールはどうでしょうか。中々バランスのよい配色に仕上がると思います。



まずメインカラーを1つ選び(上品な赤)、それから類似色3つ(渋い赤、くすんだ赤、暗いオレンジ)にアクセントカラー1つ(深く暗い緑)を探す。


Web上に便利なジェネレータや参考になる配色が公開されているので積極的に活用しましょう。

◯ウェブ配色ツール Ver2.0


リアルタイムでプレビューが確認できていい感じ

http://www.color-fortuna.com/color_scheme_genelator2/


◯kuler


レートで並べたりするとイケてる配色がチェックできていい感じ

https://kuler.adobe.com/

・まとめ



とりあえず11色紹介してみましたが、どうでしょうか?面白かったなら良かったです。

色の性格をある程度把握していれば「ここのヘッダは青ベースだな〜」とか「ここの背景は#fdfcfcにノイズつけたぐらいが自然かなぁ」というのがパッと思い浮かびます。組み合わせによっては全く新しい印象を与えることもあるので色は奥が深いし面白いですね。

色が与えるイメージ

お久しぶりです。阿部です。

新潟県中越沖地震から1週間が経ちました。
私の実家が新潟県下越なので、震源地が新潟県だと知った時は驚きました。
弟から「地震あったのわかったぁ~?」という軽~いメールが来たので被害は無いようですが。
ここ数年の新潟県 上越中越地震に水害に…天災が多いですね。何とかならないものか。。

さてさて、所変わって東京は今週で梅雨明けですね。
今年は猛暑らしいですよ~。

夏といえば真夏の太陽!「オレンジ」とか「赤」というイメージ、ありませんか?
暑~い感じがしますよね。という事で、今回は「色が与えるイメージ」について書きたいと思います。

色は大きく分けると、白・黒・グレーなどのモノクロの色の「無彩色」と、赤・青・緑などカラー色の「有彩色」があります。
また、基本中の基本ですが、有彩色には「暖色」と「寒色」の2つの種類があります。

暖 色・・・暖かい印象を与える色。また、実寸より大きく近くに見える色。
       (赤、オレンジ、ピンクなど)
      

寒 色・・・寒い印象を与える色。また、実寸より小さく遠くに見える色。
       (青、水色など)
      

良く見かける図だと思いますが、円にするとこんな感じです。
      


大抵、暑いものは赤で、寒いものは青で表現されています。
例えば、「お湯が赤」で「水が青」だったり。
視覚的にそのもののイメージをつけるのは、形より色である事が多いですよね。

また、人それぞれ、受けるイメージは違うと思いますが、赤は情熱・力・積極的なイメージ、黄色は金運・希望・元気なイメージなど、ある程度、固定されたイメージがあります。
風水とか心理テストにもよく使われていますね。

代表的なものを挙げると、

赤・・・情熱・積極的・力・怒り など

黄・・・金運・活気・希望 など

緑・・・安全・調和・癒し など

青・・・誠実・真実・静けさ など

ピンク・・・愛・美・優しさ など

青は集中力UP、緑は目が良くなる、黄色は食欲旺盛になる、など身体に影響を与える事もあるようです。
毎日見るだけで痩せる色とかあればいいのになぁ。。。

ちなみに、アシアルのイメージカラーはオレンジ。
行動的、外交的、コミュニケーションの色です。

色は組み合わせ次第でどんなイメージでも与える事ができます。
抽象的なイメージだけでなく、重さや大きさの予測にも影響してきます。
不思議です~。色は無限大ですね。

皆様も是非、自分のイメージカラーなど見つけてみてはいかがでしょう!?