プログラミング向上雑記

プログラミングが趣味のだらだら学生。自作したプログラムの紹介やいまハマってることなんかを適当に書いていったりいかなったり。Twitterはこちら→ @niishi_8

人工知能がつくるカラーパレット?!Colormindの使い方をまとめてみた!ディープラーニングがこんなところにも【Colormind】

f:id:kirari0831:20170301151920g:plain

Colormind

配色について困ったことありませんか?私は配色センスが皆無なのでよくカラーパレットの自動生成ツールを使うのですが、人工知能がカラーパレット生成をしてくれるサイトを見つけたので早速使ってみました。

 ということで、今回はディープラーニングを用いてカラーパレットを生成してくれるWebサイト、Colormindについて簡単に紹介していきます。

 

colormind.io

 

 

 

使い方

ランダム生成

f:id:kirari0831:20170301120041p:plain

 ホーム画面の"Generate"ボタンを押すと上にあるカラーパレットが適当に生成されます。ランダムに色を生成しますが、調和のとれた色が提案されるようになっています。

f:id:kirari0831:20170301121015g:plain

 生成されたカラーパレットの中から気に入った色をロックすることもでき、ロック状態で新たに色を生成するとその色を基にしたカラーパレットを生成してくれます。細かな色調節ができますが、このサービスの特徴はお手軽に自動生成してくれることなので説明は省きます。

 

f:id:kirari0831:20170301123436g:plain

またロックする色の順番も意味があり、ロックされた色の間を補完するように新しい色が生成されるようになります。

f:id:kirari0831:20170301123837p:plain

ホームページの方でもロックする箇所の違いによる色の生成法の違いについて載っています。ロックされた色の間以外の場所はロックされた色からグラデーションがかるように色が生成されるようです。

画像から生成

画像からカラーパレットを生成することも可能で、Uploadを選択し、Image uploadから自分の好きな画像を選択します。画像のアップロードができたらGenerateを押し、カラーパレットを生成します。

Colormindを含めた3つのカラーパレット生成ツールを使用し実際にカラーパレットを生成してみて、生成される色の違いや使ってみた感じを比較してみました。

題材として以下の画像を用いました。

f:id:kirari0831:20170301125932j:plain

目に留まるのは中央の光に当たって輝くまぶしい緑。そして、それを際立たせる天井の暗い木の色と床の畳。和風で心落ち着くような画像ですが、一体どんなカラーパレットができるのでしょうか。

Colormind

まずは今回紹介したColormindで生成してみました。

f:id:kirari0831:20170301130343p:plain

画像にある色の特徴を上手く捉えて、かつ、統一感のあるカラーパレットがすぐにできました。気に入らない場合はもう一度Generateを押すと再生成してくれます。

先ほど述べたロック機能や手動での色編集はできませんが、提案されるカラーパレットの完成度が高いので特段必要にもならないでしょう。

Coolors

今まで自分がよく使っていたほかのカラーパレット生成サイトの一つCoolorsでも試してみました。

f:id:kirari0831:20170301131312p:plain

こちらも良い色合いのものを生成することができました。しかし、Coolorsでの生成法は画像内にあるピクセルの色をランダムで抽出してくるといったもので、統一感のないものだったり画像のイメージとは違うカラーパレットが生成されることが多く、何度も再生成しなければいけないことがあります。個人差はあるとでしょうが、Colormindに比べてカラーパレットの生成回数が多くなると思います。

 

f:id:kirari0831:20170301131907p:plain

※同じ画像でもこんなカラーパレットを生成することも……

 

ColorFavs

同じくこちらも今まで私がよく使っていたカラーパレット生成サイトです。再び同じ画像で生成してみましょう。

f:id:kirari0831:20170301132125p:plain

嘘だろ、おい……

少なくとも自分の琴線には触れないカラーパレットが生成されました。

ちなみに何度生成しても同じカラーパレットしか出てきません。またほか二つの物に比べて画像アップロードから色が生成されるまでの時間がかなり長いです。

 

まとめ

今回は人工知能がカラーパレットを作ってくれるColormindについて紹介しました。

簡単お手軽に統一感ある綺麗なカラーパレットを作ってくれるのはかなり魅力的でした。今まではCoolorsとかColorFavsを使って配色を考えていたのですが、これからはColormindも使っていこうと思います。

どういう仕組みでディープラーニングが使われているのかなどの説明はColormindのブログの方に載っています。興味のある方は下にリンクを張っておくのでぜひ見てみてください。もし、仕組みの方についてもブログ書いてほしいというコメントなどがあればそちらも書いてみようかなあと思っています。

colormind.io

 

おまけ:いろいろな画像のカラーパレット

Colormindを用いて色々な画像でカラーパレットを作ってみました。

f:id:kirari0831:20170301134205j:plain

f:id:kirari0831:20170301134212p:plain

 

 

f:id:kirari0831:20170301134555j:plain

f:id:kirari0831:20170301134548p:plain

 

 

f:id:kirari0831:20170301133826j:plain

f:id:kirari0831:20170301133839p:plain

 

 

f:id:kirari0831:20170301133728j:plain

f:id:kirari0831:20170301133734p:plain

 

 

f:id:kirari0831:20170301134003j:plain

f:id:kirari0831:20170301134010p:plain