WEBのカラーパレットツールで配色をしよう
色のセンスは重要だと感じたことはありませんか?
例えばSNSの自分のホームのデザインを考える時、イメージ通りの配色にならなかった・・・という事があります。ホームをお洒落にすることで、フォロワーの方々に与える印象も変わってくるので上手くできないとガッカリします。
しかし配色にはセンスも入り、センスないから諦めた・・・というユーザーの方も。
![](http://cdn2.aprico-media.com/production/imgs/images/000/043/457/original.jpg?1573650798)
そんなユーザーの方におすすめなのがWEBカラーパレットツールです。
WEBカラーパレットツールは様々な配色を提案してくれたり、まとめてくれているとても便利なサイトです。
色の配色が苦手というユーザーの方はぜひ1度使ってみてください。今回はそんな便利なWEBカラーパレットツールの中でもおすすめの12選を紹介します。
WEBのカラーパレットツール12選
それではおすすめのWEBカラーパレットツール12選を紹介します。すべて無料で登録等も不要なので、お気軽にご利用ください。
1.PALETTABLE
![PALETTABLEは最大5色まで組み合わせ](http://cdn2.aprico-media.com/production/imgs/images/000/043/445/original.jpg?1573641294)
使い方はとても簡単で、画面に表示される色に対して「Dislike(嫌い)」または「Like(好き)」を選択していくだけです。
「Dislike(嫌い)」を選択した場合、次の色の候補が表示されます。色が実際に表示されることで自分のイメージにピッタリな色を見つけやすく、自分のイメージ通りの配色ができます。何となくこんな色合いにしたいとイメージがある方はぜひお試しください。
2.LOLCOLORS
![可愛いしずくのデザインで4色の組み合わせを提案](http://cdn2.aprico-media.com/production/imgs/images/000/043/446/original.jpg?1573641794)
この色のカラーコードは何?と気になった場合は、しずくにカーソルを合わせてください。するとカーソルを合わせたしずくの色のカラーコードが表示されます。
3.COOLORS
![COOLORSはランダムで5色の色を選んでくれる](http://cdn2.aprico-media.com/production/imgs/images/000/043/447/original.jpg?1573642677)
5色の中に気に入った色があった場合は、ロックすることもできます。スペースキーを押すとそのロックした色に合う配色を提案してくれるので、どんどん自分好みの配色になっていきます。
4.HELLO COLOR
![HELLO COLOR](http://cdn2.aprico-media.com/production/imgs/images/000/043/448/original.jpg?1573643306)
2色でおしゃれな配色がしたいというユーザーにおすすめなのが、HELLO COLORです。こちらは2色の配色を提案してくれます。
使い方はサイトを開いて、画面をクリックするだけです。カラーコードが知りたい時は画面の真ん中より少し下の部分にその色のカラーコードが表示されています。
5.Color Lisa
![Color Lisa](http://cdn2.aprico-media.com/production/imgs/images/000/043/449/original.jpg?1573644043)
ピカソやゴッホの他に、日本の作品では葛飾北斎の神奈川沖浪裏の配色がありました。配色を知ることでその作品のまた新たな一面を知れ面白いと思います。
6.Color Hunt
![Color Huntは4色の配色を提案](http://cdn2.aprico-media.com/production/imgs/images/000/043/450/original.jpg?1573644532)
トレンドや人気順に並べ替えることもでき、今どんな配色が流行しているのか知ることができます。
7.BrandColors
![BrandColors](http://cdn2.aprico-media.com/production/imgs/images/000/043/451/original.jpg?1573645250)
中には自分の知りたい有名サービスのカラーが見つからない・・・という時があります。そんな時は上の検索BOXにInstagramの色が知りたいなら「Instagram」と入力してください。すると検索結果に表示されます。ただし、日本語では検索できないようなので注意してください。
8.COLORION
![COLORIONは5色または4色の配色](http://cdn2.aprico-media.com/production/imgs/images/000/043/452/original.jpg?1573647161)
フルカラーの配色を探したい、マテリアルデザインの配色が知りたい場合は上のメニューの「PALETTES」をクリックしてください。すると「FULL COLOR」「MATERIAL DESIGN」「FLATUI DESIGN」というカテゴリーが表示されるので、探したい配色のジャンルを選んで探してください。
9.Random Color Palettes
![Random Color Palettesは5色の配色](http://cdn2.aprico-media.com/production/imgs/images/000/043/453/original.jpg?1573647727)
Random Color Palettesはhttps://randomcolorpalettes.com/#fff699-#b1aaef-#caef5b-#154572-#fc8aabの様にURLにカラーコードが入っているのでSNSなどで誰かと共有することも可能です。
10.ColorDrop.io
![ColorDrop.ioは4色の配色を提案](http://cdn2.aprico-media.com/production/imgs/images/000/043/454/original.jpg?1573648776)
通常は新しい順にカラーパレットが並んでいますが、左上にある「New」をクリックすれば人気順かランダムに並び替えることも可能です。
11.配色パターン見本40選
![配色パターン見本40選](http://cdn2.aprico-media.com/production/imgs/images/000/043/455/original.jpg?1573649515)
細かいカテゴリーに分けられており「万人受けする配色」「親近感を感じさせる配色」「クール系の配色パターン」「元気・アクティブ系の配色パターン」「かわいい系の配色パターン」などの中から探すことができます。気に入った配色パターンをクリックすると右側の「配色プレビュー」に反映されます。
12.Gradient Generator
![Gradient Generatorは好きな色を2色選んでグラデーションのカラーパレットを作成](http://cdn2.aprico-media.com/production/imgs/images/000/043/456/original.jpg?1573650168)
グラデーションもスライダーを動かすと0~40までの好きな段階に調節できます。
例えば赤と青を選んだ場合、赤が強いグラデーション、青が強いグラデーションなども自分好みに簡単に調整できます。グラデーションのWEBカラーパレットツールをお探しの方はぜひお試しください。