MEMOPATCHをご覧になっている方のほとんどがWebデザインやUIデザインに関わっている方だと思います。そして多くのデザイナーが頭を悩まされるのが配色ではないでしょうか？。そこで今回は配色の参考やインスピレーションを得られるツールを6つご紹介します！

COLRD

http://colrd.com/
大まかな色から、その色が使われている写真やカラーパレット、グラデーション、パターンを探す事ができるサイトです。カラーパレット、グラデーション、パターンにはそれぞれに使える便利な機能があるのでご紹介します。

・カラーパレット

検索して出てきたカラーパレットは編集可能で、Photoshop用にカラーパレットをダウンロードできる（.acoファイル)

・グラデーション

検索して出てきたグラデーションはcssのコードを生成することができる

・パターン

パターンはそのまま使えるパターン素材（繰り返し可能な正方形画像）をダウンロード可能

Designspiration

http://designspiration.net/
キーワードと色からデザイン性の高いグラフィックを探せるサイトです。
色は5色まで同時選択可能です。

shutterstock labs

http://www.shutterstock.com/labs/spectrum/
キーワードを入力し、色を選択することで、そのキーワードでその色の画像が出てくる。（例: 赤いリンゴ）
キーワードを同じままで色を変更することも可能。

画像はshutterstockへリンクしているのでライセンスがある人はそのまま購入が可能。

TinEye Labs

http://labs.tineye.com/multicolr/
色を複数選択し（5色まで）、その色が使われているFlickrの画像を検索することができます。さらに色の割合を調整（赤30%:青70%など）することが可能で、それに合った画像が表示されます。写真はFlickrから引っ張っているので多種多様な写真を見ることができます。

design seeds

http://design-seeds.com/
色やテーマを選ぶ事で6色で構成されたカラーパレット+それが使われている写真（ビジュアル）を探す事ができるサイトです。


（↑色やテーマを選択する画面）

Pictaculous

http://www.pictaculous.com/
画像をアップロードすることでその画像に使われている色を抽出できるツール。雰囲気が気に入った写真をアップロードして、どんな色が使われているかを調べてみるとおもしろいかもしれません。試しに僕の机から見えるGoodpatchのオブジェクトの写真を撮影してアップロードしてみると下の様な結果になりました。

 

以上です！
今回ご紹介したツールを触ってみると、考えつかなかったような色の組み合わせを発見することができました。さらに多くのツールが写真やグラフィックで色の組み合わせ結果を表示してくれるのでちょっとした息抜きにもなるかもしれませんね！みなさんの参考になれば幸いです！

Share on

Goodpatch
Goodpatch公式アカウントです。