配色の知識が無くても大丈夫!パパッと素敵な配色を提案してくれる「Coolors」が便利!

配色ってとっても難しいですよね。自分のイメージどおりの配色をするだけでも難しいのに、
トーンを合わせて、類似色相で統一して…なんて専門的な知識を学び始めたら更に難しい…!
今回はそんな配色の悩みをパパッと解決してくれるサイト「Coolors」をご紹介します!

▼「Coolors」とは?

h1

「Coolors」とは、配色パターンを提案してくれるサイトのこと。
そういった配色パターンを提案してくれるサイトは沢山ありますが、その中でも比較的簡単に、感覚的に使うことが出来るサイトだと思います。
おそらく言語での配色検索はできませんが、次々といい感じの配色パターンを出してくれます。
いつも似たようなトーンの配色に偏ってしまう方などにも、様々なイメージの配色をランダムで提案してくれるのでおすすめです。

「Coolors」はこちら

 

▼「Coolors」の使い方

まず「Coolors」を開きます。
TOP画面はこんな感じ。なんだか英語がいっぱいですがとりあえず「GENERATOR」というところをクリックします。

h1

するとこんな感じでパッと配色パターン一面の画面に切り替わります。
スペースキーを押すと、次々と新しい配色を提案してくれます。うっかり飛ばし過ぎたら「UNDO」から戻ることができます。

h2

ちなみに「GENERATOR」ではなく「BROWSER」にすると、

H17

このようにサムネイル形式で配色パターンを見ることができます。
お好みの方で使ってみてくださいね。

 

▼「Coolors」でできること

次々と様々な配色を提案してくれる「Coolors」は操作は単純なのにとっても機能的。
更に便利に使ってみましょう。

 

1.カラーモードを変更できる

配色パターンの上にマウスを置くと、こんな感じで配色の詳細が出てきます。

h4

デフォルトだとカラーモードがHSB(色相・彩度・明度によって色を決める際に使うモード)になっているので、今回はCMYKに変更。
他にもRGB、PMS、COPICなどのカラーモード設定が可能です。COPICだと、COPICの色番号が表示されます。

 

2.ベースカラーを決められる

ある色を固定すると、その色に合った配色を提案してくれます。
固定したい色のバーをクリックすると、カギのアイコンが施錠されます。これで色固定の完了です。

h5

色固定が完了してからスペースキーで配色を切り替えると、固定した色は変わらずにその色に合った配色を提案してくれます。
固定できる色数は2色でも3色でも大丈夫です。使いたい色が一色でも決まっている時などは、その色を固定してからの方が使いやすいでしょう。
ちなみにカラーコードの部分をクリックすると、カラーコードを入力して色を変更する事ができます。

h6

 

 

3.配色パターン全体の色相・彩度・明度・色温度を調節できる

上部バーの「REFINE」をクリックすると、こんなバーが出てきます。
ここで配色パターン全体の色相、彩度、明度、色温度を調節することができます。

h7

 

 

 

4.配色を様々な形式で保存できる

この配色パターンに決めた!となったら、「EXPORT」で保存してみましょう。

H8
保存の形式は6種類。PNGやPDFでの保存が簡単で良いと思います。
H9

COPICで保存すると、こんな感じで保存されます。
これを印刷しておけば、コピックを買う時のメモにもなりそうですね。

h10

 

 

5.画像から色を抽出することができる

最後に、画像から色を取る方法をご紹介します。
例えば、この画像の配色が良いなあと思ったら。

h11

(掲載元)

配色バーのカメラのアイコンをクリックします。
そして「BROWSE IMAGE」をクリックし、先程の画像を選択。

h15

AOUTをクリックすると、勝手に画像から色が抽出され、配色パターンの提案をしてくれます。
再度AOUTをクリックすると、また違った配色パターンができあがります。

h16

 

また、自分で画像の中の好きな色を選択して配色パターンを作ることもできます。
画像の上のサークルをずらすと、色を抽出することができます。

h12

配色パターンが決まったら、OKをクリックして完成です。
この機能は画像全体の配色を抽出することができるのでとっても便利です。
もし配色のイメージが決まっているなら、(例えば冬っぽい配色など)そのイメージに合った画像を探し、
そこから配色パターンを作ることもできますね。

 

 

▼おわりに

いかがでしたか?これでもう配色に迷うこともなくなるはず…!
特に画像から配色を作れる機能が便利ですね。この画像綺麗だな〜と思ったら、気軽に色を抽出してみるのも配色の練習になりそうです。
いつもと違った配色をしたい時、なかなか配色が決まらない時、是非デザイン制作に役立ててみてくださいね!

記事をシェアする!