配色選びで悩みたくない！誰でも簡単に絶妙な配色が選べるツール15選

ホームページやブログ制作、提案書作成においても必ず必要になってくるのが「配色」です。
少しでも見た目を良くしたいと思うものですが、実際にデザインしてみるとシックリこないというような経験はないでしょうか。

配色をはじめ、デザイン作業はセンスが必要だと感じてしまいがちです。

そんな時にオススメしたいのが、様々なパターンを提案してくれる配色ツールです。
基本の1色から合うものを選んでくれるものや、ランダムに配色カラーパレットを生成してくれるものまで様々あります。配色ツールを使えば、誰でも簡単にかつプロのような配色が作れます。

今回は、配色パターンを検討する際に手助けをしてくれる便利なツールをご紹介します。
「なかなか配色が決まらない」と思った時はぜひ活用してみてはいかがでしょうか。

デザイン作業を効率化する便利な配色ツールまとめ

1.Adobe Color CC

https://color.adobe.com/ja/create/color-wheel/

Photoshop、Illustratorの提供元としておなじみのAdobeのツールです。
様々な配色ツールの中でも知名度が高く、定番の一つとなっています。
自社ソフトとの連携機能が大きな特徴で、Adobe Creative CloudのアカウントIDがあればPhotoshop、Illustratorとの連携が可能です。

色管理が簡単になりますので、これらソフトを使っている方であればまずはオススメしたいツールです。

2.0 to 255

http://www.0to255.com/

選択した一色を基準としたグラデーションを作成することができる配色ツールです。
「PICK A COLOR」から色を選ぶだけで、微妙に彩度や明度が異なる色のグラデーションが手軽にできます。

また「RANDOM COLOR」を選べば、ツールが指定したランダムな色のグラデーションが作れます。まとまり感のある配色にしたい時に重宝するツールです。

3.Coolors

https://coolors.co/

スペースキーを押すとランダムに5色の素敵な配色を作成するツールです。
自分好みに近いカラーパレットが表示されたら、ロックしたり微調整することで、より好きな配色にカスタマイズすることが可能です。

色のアイデアが浮かばない時などにオススメですので、使用してみてはいかがでしょうか。

4.HUE/ 360

https://hue360.herokuapp.com/

任意の色を選択すると、その色に合うものを自動的に生成してくれるツールです。
自動生成された色から絞り込んでいくことで自分好みの配色が作れます。
専門的な知識がない方、配色が苦手な方でも組み合わせの良い配色を使用することができます。

非常にシンプルな作りながら、色相や彩度の段階数をカスタマイズできるなど柔軟性も抜群です。

5.color hailpixel

http://color.hailpixel.com/

マウスポインターを動かすと、様々な色を表示・切り替えてくれるツールです。決まった色の座標でクリックすると色が保持されていきます。

また、選んでいった色はURLパラメーターに保存されますので、他の人に共有することも可能です。
動的で分かりやすく、誰にでも使いやすいシンプルさが魅力ですので、直感的に使えるツールを求めている方にはオススメです。

6.Color Scheme Designer3

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

色相環から色を生成してくれるツールです。配色の型を選択したあと、ピッカーを動かして色を決定していきます。
選んだ色に基づいて適した色を提案してくれますので、簡単に組み合わせの良い配色ができます。

7.CLOUR CODE

http://colourco.de/

color hailpixelと似たような操作感を持つツールです。異なる点として、生成後の色をless形式のファイルなどでダウンロードできます。

パターンの微調整も簡単に行えるうえ、様々なカラーパターンを作ることができます。
沢山のパターンを見たい方、アイデアが欲しい方にぴったりのツールとなっています。

8.Browse Palettes

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

世界中のユーザーが利用している、配色を投稿・閲覧することができるサービスです。300万デザイン以上（執筆時）の素敵なカラーパレットをいつでも見ることができます。

様々なイメージの配色が揃うこと、コメントや気に入った人の数が確認できるのもポイントです。ちょっと配色イメージを変えたい時や、普段とは違う雰囲気にしたい時に使えます。

9.Color Hexa

http://www.colorhexa.com/

カラーコードを指定すると、色に関しての情報を表示してくれるというユニークなツールです。CMYKやRGBの数値、Webセーフカラーであるかどうか、補色や類似色といった情報を一気に調べることが可能です。

配色を検討する際に何らかの情報を参考にしたい方には、ぜひ一度お試しいただきたいツールとなっています。

10.Material UI Colors

http://www.materialui.co/colors

最近注目を集めている「マテリアル・デザイン」で使用可能な配色を見ることができるツールです。メインカラーを含め、全てを一覧で見ることができる上に、クリックするだけでカラーコードがコピーできるという優れものです。

また、スウォッチもダウンロードすることができます。マテリアル・デザインを採用している方必見の配色ツールとなっています。

11.Bada55

http://bada55.io/

ユニークな名前の配色を多数集めているサービスです。例えばTOTORO、CSS、DIESELなど、様々なモチーフから着想を得た配色が並んでいます。

なかなか色が決まらない時やアイデアが出てこない時に見れば、ヒントが得られるのではないでしょうか。

12.配色の見本帳

http://ironodata.info/

Webセーフカラーを中心に、色々な配色カラーパレットを提案してくれるツールです。
色の法則に基づいて提案し、デザイン素人の方でも素敵な配色を利用することができます。
プロ向けに色数値情報も公開しているため、本格的なデザイン作業にも対応可能です。

また、国産のツールなので、英語が苦手な方でも使えるという点も一つのポイントとなっています。

13.Color Palette Generator

http://www.degraeve.com/color-palette/

指定した写真に合わせたカラーパレットを自動生成してくれるツールです。
写真はアップロードも可能ですし、URLを指定することもできます。

写真や画像を用意するだけ、という仕組みのため分かりやすいのが特徴です。
例えば、デザインやブランドのイメージがすでに決定している時などに重宝します。

14.ウェブ配色ツール Ver2.0

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

テーマカラーに合わせた配色を作ってくれるツールです。
最大の特徴はサンプルページのプレビューがついていることで、選択した配色をサンプルで確認しながら色を選ぶことができます。

また、ロゴの色や配色の方向、色相差を設定することも可能です。
作った配色は部位ごとに色コードを表示してくれますので、そのままホームページのデザインに使えます。

15.NIPPON COLORS

http://nipponcolors.com/

撫子、中紅、今様といった日本ならではの伝統色を使いたい場合にはこちらがオススメです。
色を選択するとゆっくりと背景色が変わり、RGB・CMYKの数値を表示してくれます。

和風のデザインをおこないたい時には大変便利なツールとなっています。
ページ自体も明朝体フォントなどを使い、和の雰囲気漂う素敵なデザインです。