画像を指定するだけ！非デザイナーでも簡単にそれっぽい配色ができるツールを作ってみた

TECHSCORE Advent Calendar 2015 の 3日目の記事です。

こんにちは。UIデザイナーのタカムラです。
いきなりですが、みなさんは自分の配色センスに自信がありますか？

特に、普段あまりデザインをしないという人はドキュメントやスライド作成などの際、どうやって色を決めたらいいか困ってしまうことが多いのではないでしょうか。
なんか使う色が多すぎてまとまらなかったり、逆にほぼモノクロになってしまったり・・・

というわけで、今回はHTML5周辺技術の個人的なおさらいを兼ね、デザイナーじゃない人でも簡単にイケてる配色を作れるツールを作ってみました。

できたものがこちらになります

早速ですが、百聞は一見に如かず、ということで完成品を見てみましょう。

デモページ

（※モダンなブラウザでご覧ください）

使い方はとても簡単。お好みの画像をドラッグ＆ドロップで放り込むだけ！
たったそれだけで、画像で使われている色を元に、いい感じのカラーパレットが（たぶん）できあがります。

ちなみに、こうした綺麗な配色の写真を元にカラーパレットを作って利用する方法は、完成系がイメージしやすいのでノンデザイナーの方にもお勧めです。

例えば自社プロダクトの関連資料で使う色を決めたいなら、自社や製品ロゴの画像を元にしたり、コーポレートサイトのキャプチャを元に作ると良いでしょう。
特にそういった縛りがないのであれば、単純に「キレイだなぁ」と思った画像を指定すればOKです！

色の値を拾うにはカラーチップをクリックしてください。クリップボードにコピーされます。
もちろんフォーマットは HEX、RGB、RGBA から選択可能です。（右上のセレクトボックス）

また、各色の使用割合に応じて Main, Sub, Accent のカテゴリに分けています。
色を適用する面積が広い場合は Main を、狭い場合は Accent を使うなどすると元の画像の印象を再現しやすいでしょう。

どうやって作ったか

全部解説すると長くなりそうなので、大きな流れとポイントだけまとめます。

Drag & Drop API と File API でローカルの画像を取得
その画像のピクセル情報を Canvas 経由で取得
解析は処理が重いので Web Workers で別スレッド処理
近似色は適当に丸めて、使用率が高い色を抽出
Worker から返ってきた結果を画面に出力

1. Drag & Drop API と File API でローカルの画像ファイルを取得

ブラウザ外から画像ファイルをドラッグ＆ドロップ（以下 D&D）で読み込みたかったので、HTML5 の Drag & Drop API を使いました。
モダンブラウザであれば、jQuery UI を使わずにD&Dを実装できるようになったので便利ですね！

D&Dの機能を入れるだけならば、それほどハマりどころはありません。
ただ、UIで適切なフィードバックを表示してあげないと、ドロップ可能な領域がわかりにくいので、そこはしっかりケアする必要があります。

また、ローカル画像ファイルの取得は window.URL.createObjectURL() が便利でした。
D&D APIから取得した file オブジェクトを渡すだけでURLが取得できるので、お手軽です。

2. その画像のピクセル情報を Canvas 経由で取得

画像ファイルの色を解析するうえでポイントになるところです。
ピクセル単位での情報を画像ファイルから取得するためには、いったん Canvas に描画する必要があります。

Canvas から得たピクセルの情報は画像左上から順に

[赤、緑、青、アルファ、赤、緑、青、アルファ...]

1	[赤、緑、青、アルファ、赤、緑、青、アルファ...]

のように一つの配列に入っているので、このデータを元にカラーパレットを作ります。

3. 解析は処理が重いので Web Workers で別スレッド処理

工程2で取得したピクセルのデータですが、サイズが

画像の幅 * 画像の高さ * 4

1	画像の幅 * 画像の高さ * 4

になるので大きな画像の場合、解析処理に数秒〜数十秒要します。

ですので、Web Workers で別スレッド処理してあげるといい感じです。
こういった画像解析は worker での処理にうってつけですね。

4. 近似色は適当に丸めて、使用率が高い色を抽出

RGBの値が1違うだけで別の色扱いすると、カラーパレットが同じような色で溢れかねないので、近い色はまとめてやります。
そのうえで色毎に出現回数をカウントしていき、よく使われている色とその割合を算出します。

あまり色数が多すぎても選ぶ際に迷ってしまうので、Main, Sub, Accent それぞれ最大で5色までピックアップするようにしています。

5. Worker から返ってきた結果を画面に出力

最後は worker から返してもらったカラーパレット情報を画面に出力するだけです。

おわりに

いかがでしたでしょうか？
「画像を用意するのすら面倒くさい！」という人のために、URL指定すると自動でWebページのキャプチャをとってくるようにするのもアリかもしれませんね。

また、「なんか思ってる色が抽出されなかった...」
というケースも残念ながら多少あったかと思います。
そのあたりは近似色の丸め方が洗練されれば改善されそうな感じがしています。今後の課題です。

クリスマスカードや年賀状等、ちょっとしたデザインで配色に迷った場合にぜひお使いください！