デザイン決めの時に注意したい8個のポイントとオススメの無料カラーツール19選

色選びで活用したい配色ツール

1. Adobe Color CC

https://color.adobe.com/ja/

Adobe Color CCは、Adobeが提供するツールです。補色、類似色などのカラールールは全部で7つ揃っており、ルールを決定するだけで、誰でも簡単に適切な色の組み合わせが作成できます。画像からもカラーパレットを作成できるのが便利です。
　　

2. ColorHexa

http://www.colorhexa.com/

配色を考える時に合わせて使いたいのがColorHexaです。
このツールは、検索窓にカラーコードを入れ検索すると、色に関しての情報を表示してくれます。
色をじっくり選びたい方は、ぜひ合わせて使ってみてはいかがでしょうか。
　　

3. Nippon Color

http://nipponcolors.com/

日本ならではの伝統色をデザインに使いたい時に役立つのが、Nippon Colorです。色を選択すると背景色が変化するため、実際に使った時のイメージが確認できます。
　　

4. Palettable

http://www.palettable.io/

Palettableは、好き・嫌いを選択するだけで直感的に色の組み合わせが選べるツールです。とにかくシンプルな設計ですので、誰にでも使いこなしやすいのではないでしょうか。配色の知識が無い方、難しいツールが苦手という方にオススメします。
　　

5. Paletton

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

カラールールに沿った、適切な色の組み合わせを選ぶためのツールで、マウスでクリックするだけで自動的に色を選択してくれますのでお手軽です。カラーホイール側で選んだ色は右側のパレットに表示されるので、イメージを確認することが可能です。
　　

6. COLOURlovers

http://www.colourlovers.com/palettes/most-loved/all-time/grid

COLOURloversは、配色のインスピレーションを得たい時、参考になるサービスです。世界中のユーザーが作成した魅力的なカラーパレットを閲覧することができます。各配色には名前がついており、コメント、いいね数、閲覧数も表示してあります。
　　

7. 0 to 255

http://www.0to255.com/

0 to 255では、選択した色を基準にグラデーションを表示してくれます。グラデーションのコードはクリックするだけでコピーができ便利です。類似の色が必要という時に使ってみてはいかがでしょうか。
　　

8. Coolors

https://coolors.co/

スペースキーを押すたびに色が変化し、オシャレな配色を自動で作ってくれるツールです。気に入った色があれば固定したり、微妙に色を編集することもできます。合わせたイメージを見ながら配色を決めたい、という方にオススメです。
　　

9. 和の色 – 色の名前と色見本

http://irononamae.web.fc2.com/colorlist/wa.html

日本の伝統色を一覧で表示しているサービスです。和風のデザインを考える際に使えます。
　　

10. HUE/360

http://hue360.herokuapp.com/

HUE/360は、選択した色を基準にぴったりの配色が作れるツールです。絞り込まれた色の中から選んでいけば、配色の知識があまり無い方、配色のセンスに自信がない方でもあっという間にカラーパレットができ上がります。
　　

11. Coleure

https://www.coleure.com/

ブロック状に色が並んだUIがポップで素敵なツールです。色をミックスしたり、好きな色を追加したりと、楽しみながら色を選択することができます。また、色の上にテキストを乗せた場合の見た目が確認できるのが便利です。
　　

12. Bada55

http://bada55.io/

様々な色、名前を掲載しており、一覧表示で見ることができるサービスです。アイデアが浮かばない時、いつもと変わった色が使いたい、という時に参考にしてみるとインスピレーションが浮かんでくるのではないでしょうか。
　　

13. Hello Color

http://jxnblk.com/hello-color/?c=9d6734

Hello Colorは、クリックするだけで自動的に色の組み合わせを生成してくれる、お手軽な配色ツールです。画面全体でチェックできるので、色を実際に使用した時のイメージが掴みやすい印象があります。
　　

14. Colorion

http://www.colorion.co/

Colorionは、膨大な量の配色を集めたサービスです。お気に入りの色を選んで選択すればコピーできたり、ブックマークしておくこともできます。どうしても色のイメージが浮かばないという時に役立つのではないでしょうか。
　　

15. Hues

http://www.simeon.ws/hues/

3色の組み合わせを一覧表示しているユニークなサービスです。
配色の参考にしてみてはいかがでしょうか。
　　

16. ウェブ配色ツール

http://www.color-fortuna.com/color_scheme_genelator2/

1色を選択することで、その色を基準に自動で配色を作ってくれるツールで、実際に色を使った場合の完成イメージをリアルに確認できるのが特徴的です。
　　

17. materialpalette

https://www.materialpalette.com/

materialpaletteは、選んだ2色から自動的に相性のいいパターンを表示してくれるツールです。制作したカラーパレットは、CSS、SVG、PNGといった形式でダウンロードができます。
　　

18. 配色の見本帳

http://ironodata.info/

単に色の組み合わせを決めるだけではなく、色に関する情報が確認したいときにぴったりのツールです。好きな色を選択すると、色の詳細情報のほか、カラー分析、相性の良い色を知ることができます。
　　

19. uiGradients

https://uigradients.com/#Alihossein

uiGradientsは、様々なグラデーションを見ることができます。大半のツールでは一般的にカラーコードが確認できますが、こちらはカラーコードだけではなく、CSS情報も確認することが可能です。