トレンドに沿った配色パターンを提案するWebサービスは、これまでも多数リリースされてきました。

参考:
誰でもプロ並みの色調が作れる無料のカラーパレットサービス厳選8選｜ferret フェレット

実際、複数色の配色バランスを考えるのは、デザイナーでもない限り非常に難しい作業となります。
配色は直感的・感覚的に見える反面、システマティックに構築することもできるので、一般的なホームページであれば、カラーコードをもとに機械的に生成された配色を利用するのも一つの方法です。

しかし、こうした単純なアルゴリズムによる配色は単調になりがちです。
そこで登場したのが、*ディープラーニングを活用したカラーパレットジェネレーター「Colormind」*です。

今回は、*AIがカラーパレットを選んでくれるカラーパレット作成ツール「Colormind」*の使い方をご紹介します。

ディープラーニングを使ったカラーパレットツールとは？

colormind.png
Source: Colormind Blog

「Colormind」が他のカラーパレットツールと大きく異なるのは、*「カラー・クオンタイゼーション」*と呼ばれるディープラーニング技術が活用されている点です。

「カラー・クオンタイゼーション」(英：color quontization)とは、簡単に言えば複数の似通った色を同じグループに分類していく技術です。
この技術自体は古くから存在しており、コンピューターが遅くてメモリが高価であった時代に、極力色の数を使わずに表現する方法として取り入れられていました。

Colormindでは、このカラー・クオンタイゼーション技術を活用し、写真や動画の色を分析してカラーパレットを作成し、学習することが可能です。
例えば、下にある夜景をカラーパレット化すると、以下のようになります。

night.png
▲ 夜景からカラー・クオンタイジングによってカラーパレットを作成した例 (Source: Colormind Blog)

しかし、カラー・クオンタイゼーションを活用してカラーパレットを生成するのに複数のカラーパレットが生成できてしまうことがあり、最終的にAIがどのカラーパレットを提案するかはアルゴリズム上非常に難しい部分でもあります。

つまり、人間でも砂浜の写真を見たときに、「青っぽい」と感じるひともいれば、「水色っぽい」「白っぽい」と感じるひともいるように、写真からどのような色味を感じるかは人それぞれなのです。

mmqc.png
▲ 「MMQC」とはカラー・クオンタイゼーションによってカラーパレットを生成したものですが、それでは実際的に使いにくいため、AIのアルゴリズムによって使いやすくしたものが「Generative」なカラーパレットです。(Source: Colormind Blog)

その意味では、人間がデザインしたカラーパレットというのは、非常に高いレベルの構造をしています。
例えば、左から右へ流れるグラデーションが最たる例で、デザイナーであれば、似たような色彩を2色ピックアップし、直感的に合う組み合わせを見つけ出すことができます。

こうした色の組み合わせを自動的に生成するのは「なりゆき」で「でたらめ」に感じるかもしれませんが、Colormindではそれをディープラーニングにより解決しようとしています。

algorythm.png
Source: Colormind Blog

実際のところ、１枚の写真には複数の画素が含まれており、どのようにカラー・クオンタイズを行うかによって複数の色味の組み合わせが出来上がります。

many.png
Source: Colormind Blog

Colormindでは、ディープラーニングを用いて、最終的にどのカラーパレットが「人間にとってよりよく見えるか」を学習することができるので、最終的に「よい」パレットと「悪い」パレットの評価を学びます。
この点が、ほかのカラーパレットジェネレーターと大きく異なる点です。

良い組み合わせだけを提案してくれるcolormindの魅力

写真から色を抽出するようなアプリケーションといえばAdobe Color CCのようなサービスもありますが、Colormindならもっと簡単に行うことができます。

Colormindは、バンクーバーを拠点に活動しているアプリケーションデベロッパーのジャック・シャオ氏によって開発されました。
シャオ氏の開発したAIアルゴリズムは、映画やテレビゲーム、ファッションからアートまで、さまざまなものを素材に学習したカラーパレットの提案を行います。

このシステムを思いついたとき、シャオ氏はMMQC(いわゆるカラー・クオンタイゼーション)に着目をし、画像から主だった配色を引っ張ってこれるようにしました。
しかし、こうした色味は機械的で、デザインで実用的だとは言えなかったので、カラーパレットのバランスを取るためにディープラーニングを活用することにしました(これをGenerative-MMQCと呼びます)。

この技術では、クオンタイジングを使って抽出した色をランダムに並び替え、「『よい』パレット」のふるいにかけて分類を行います。
また、人間によってピックアップされた配色も学ぶことができ、ランダムにピックアップすることで生成されるイケてない(ダサい)コントラストの見た目のカラーデザインを避けることができます。

実際にColormindを使ってみよう

Colormindには、Bootstrapのテンプレートを使って色味を確認することができるWebsite Colors、Bootstrapを使ったダッシュボードで色味を確認することができるPaper Dashboardと同じくマテリアルデザインを使ったMaterial Dashboardがありますが、最も注目したいのは、カラー・クオンタイゼーション技術を使ったImage Upload機能です。

upload.png

使い方は簡単で、「Image Upload」ボタンを押して、カラーパレットを生成したい写真を1枚選ぶだけです。
色味の配列はセミランダムになっているので、「Generate」を押すことで何度でもランダムに色の配列を変えることができます。

blue.jpeg

pattern.png

カラーコードを見たりする機能はまだ実装されていない部分は不便ですが、確かに他のジェネレーターよりもより人間的な感覚を感じられるのではないでしょうか。
ぜひ、いろんな写真を使ってカラーパレットを生成してみてください。

まとめ

一見すると何の変哲もないカラーパレット生成ツールのように見えますが、実は見えないところでAIが活躍しています。

AIやディープラーニングを使ったカラーツールには、ほかにもモノクロの写真に自動で色をつけていくAutomatic ColorizationやColorful Image Colorization、早稲田大学が開発したAutomatic Image Colorizationなどがすでに先行していますが、これからさらに発展していきそうな分野です。