【配色ツール】初心者もプロ級!色選びのおすすめツール7選(無料)

2020年11月10日

Webサイトにどんな色を使うかは、サイトのブランディングやユーザーイメージを左右する大切な要素です。

  • 直感的に操作できる
  • 専門知識がいらない
  • 無料で使える

この3点を基準に、「初心者でも無料でプロ並みのカラーコーディネートが出来るツール」を目的別に厳選しました。

それではさっそく見ていきましょう😄

原色大辞典

原色大辞典

直感的、視覚的に操作ができるので、とにかく使いやすいサイト。

画面上のお気に入りの色を選ぶと、カラーコードや関連の色を表示してくれます。

とにかく色の種類が多いので、最初に使うサイトとしてもお勧めです。

まずは、好きなカラーコードを見つけてみませんか😄

配色パターンの見本から選びたい

色の組み合わせを提示してほしい、好きな色に合う色を知りたい

Coolors

公式サイト

5色の組み合わせを考えてくれるサイトです。

スペースキーを押すごとに、新しいカラーパレットが表示されていきます。

好きな組み合わせになるまで押し続けましょう。

気に入った色は鍵マークをクリックしてロックすると、その色に合うパターンを提示してくれます。

ピンクとターコイズをロックしているところ。

完成したパターンは、右上の「Export」ボタンから画像やコードとして出力することができます。

PALETTABLE

公式サイト

「Like」か「Dislike」を選んでいくだけで、自動的に5色のパターンを作成してくれる、面白いツールです。

色を選んでいくだけでも楽しいので、試してみる価値あり😁

こちらも完成したパターンのExportが可能です。

実際に使用した時のイメージも見たい

色だけを並べられても、実際に使用した時のイメージがわかない、サイトに適応した時の雰囲気も見たい

配色パターン見本40選:ベストな色の組み合わせを探せるツール

公式サイト

クール系、かわいい系などテーマごとにパターンを提示してくれます。

気になる組合せをクリックで選ぶごとに、右側の配色プレビューから実際の見え方を確認することができます。

Happy Hues

公式サイト

こちらも上と同様に使うことができます。

ただ、海外のサイトなので配色の雰囲気が変わります。ぜひこちらもチェックしてみてください。

Colormind

公式サイト

  1. オリジナルの配色パターンを決めて
  2. サイトにどう適応されるか見れる

と、いいとこ取りのサイトです。

実際にホームページにした時の雰囲気がかなり分かりやすくなっています。

グラデーション

オリジナルのグラデーションを作ってみたい

Eggradients

公式サイト

グラデーションの配色を探すことができる珍しいツールです。

背景やCSSボタン、更には立体的なものへのインスピレーションにもおすすめできます。

種類が豊富な上、色の系統から探すことが出来るのも便利。

見ているだけで楽しいので、すぐに時間が経ってしまいます。

最後に

以上!

配色は、雰囲気を左右する重大な要素です。

楽しんで見ていただけたら最高にハッピーです。

それでは良いデザイナーライフを😄

スポンサーリンク