誰でもプロ並みの配色ができるツールを16個集めてみました。

デザインをする上で一番大切なのが「配色」と言っても過言ではないでしょう。
素晴らしいデザインは総じて配色も素晴らしいという前提に成り立っています。
素人がプロの配色センス、配色技術を得るには理論を学んだり、多くの経験が必要となるでしょう。

ですが、ノンデザイナーでもサクッと配色を決められるような便利なオンラインツールが今は沢山インターネット上に公開されています。
オンラインツールを使えば配色の理論が分からなくても、センスが無くても、素人でも誰でもプロ並みの配色を行うことができるようになります。

  • 配色がいまいちわからない
  • デザイナーがいない
  • 多くのパターンを用意したい
  • いつも似たようなパターンばかりでバリエーションを増やしたい

今回はそんな様々な用途で活躍するオンライン配色ツールをまとめました。

配色が誰でも簡単にできるオンラインツール集

Adobe Color CC

誰でもプロ並みの配色ができるツールを16個集めてみました。
Adobeが提供しているツール▶Adobe Color CC

お気に入りの配色を保存したり、Photoshopなどと連携することが出来る便利ツールです。
ご存知の方も多いので割愛しようか悩みましたがやっぱり最高に使い勝手が良いのでご紹介します。
カラールールから類似色やコンパウンド、シェードなど、好みのルールを選択し
あとはグリグリするだけで配色を選び出してくれます。

また探索のタブをクリックすると

誰でもプロ並みの配色ができるツールを16個集めてみました。

このように数多くの人気配色パターンを確認することができます。
とにかく悩んだらAdobe Color CCでお気に入りを探すだけでも解決する場面も多そうですね。

Color Hunt

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶Color Hunt

Adobe Color CCの探索をもっとわかりやすくしたようなサイトのColor Hunt
色の知識がない人でも、とりあえず気に入ったパターンを見つけて使えば良い感じに配色できてしまうでしょう。
デザインの知識がない人などは特にこのようなサイトで感覚的にピックアップした配色が良い感じになることも多いため。
難しいツールよりもColor Huntのようなツールが良いかもしれませんね。

日本の伝統色

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶日本の伝統色

日本の伝統的な色を使いたい!

の要素をプラスしたい!

そんな時に役に立つのが日本の伝統色
好きな色をクリックすると背景がふわっと切り替わり、色を表示してくれます。
RGBとCMYKどちらも数値を表示してくれるためどんな場面でも使い易いですね。

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

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶和の色 – 色の名前と色見本

配色とは違いますが、和の色のカラーコードや名前を色の名前と色見本でも確認することができます。
え!こんなにも名前がついてるの?!と驚くほど多くの色に様々な名前がつけられているので見るだけでも楽しめます。

Paletton.com

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶Paletton.com

直感的に操作することができるPaletton.com
選択した色を中心とした配色を提案してくれるツールです。
このツールの優れているポイントが、配色を使った例を出力してくれるところにあります。

誰でもプロ並みの配色ができるツールを16個集めてみました。

このようなアーティステックなグラフィックや

誰でもプロ並みの配色ができるツールを16個集めてみました。

WEBデザインやフライヤー作成の参考になるような例まで出力してくれます。

colourcode

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶colourcode

最後に紹介するのがcolourcode
こちらも例に漏れずとても直感的に使うことのできるサイトです。
他のサイトにはない機能としてsass、lessファイルで出力可能という点にあります。
コーディングでばりばりsassを使う人も少なくないと思いますので、こういった機能は本当に便利で仕方ありません。
デザイナーさんに頭下げて、これで!配色!作って!頼む!
といえば、カラーセッティングの手間が省けますね。

COLOURlovers

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶COLOURlovers

配色のコミュニティサイトCOLOURlovers
世界中の方々が、自分のお気に入りの配色を投稿しています。

気に入ったデザインなどが見つかったら

誰でもプロ並みの配色ができるツールを16個集めてみました。

このようにカラーコードがどうなっているかを確認することができます。

誰でもプロ並みの配色ができるツールを16個集めてみました。

0to255

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶0to255

カラーコードを入力するとグラデーションを作成してくれるオンラインツールの0to255
グラデーションのカラーコードって意外とキレイに作っていくのって面倒だったりしますよね。

誰でもプロ並みの配色ができるツールを16個集めてみました。

0to255ならこのように、キレイにグラデーションにして全てのコードを表示してくれます。

HUE / 360

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶HUE / 360

好きな色をクリックすると、その色に合う色を表示してくれるHUE /360

誰でもプロ並みの配色ができるツールを16個集めてみました。

こんな感じで一目で分かるようになっています。
配色の理論などが分からなくて、こうやって表示されるとすごく分かりやすく

「あ、これが反対色なんだ。」

とか分かって良いのではないでしょうか。

Material UI Colors

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶Material UI Colors

Google Material Design Guide Lineの配色をまとめて確認することができる▶Material UI Colors
配色ツールとは違いますが、カラーパレットとしてとても優秀なので、掲載しました。

Color Lisa

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶Color Lisa

世界中の偉大な画家が描いた作品から、配色をまとめたオンラインサイトのColor Lisa
日本でも有名な画家の配色が数多く掲載れており、参考にすることが出来ます。

誰でもプロ並みの配色ができるツールを16個集めてみました。

試しにピカソを選んでみましょう。

誰でもプロ並みの配色ができるツールを16個集めてみました。

このような配色が選ばれました。

COLORION

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶COLORION

4000を超える配色パターンが掲載されているCOLORION
クリックするだけでコピーできたり、人気順で閲覧できたりとかなり使い勝手の良い配色サイトです。

人気の配色をみているだけでも、様々なアイデアが湧いてきそうですね。

Pictaculous

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶Pictaculous

画像をアップロードすると、使われている配色を抜き出してくれる便利サイト▶Pictaculous

試しに弊社サイトの背景をアップロードしてみた所。

誰でもプロ並みの配色ができるツールを16個集めてみました。

このようにバッチリ吐き出してくれました。

Hues

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶Hues

NBAやMLBといったスポーツチームのチームカラーの配色を一挙に掲載しているHues
スポーツ大好きな方には生唾ものではないでしょうか。

スポーツチームのカラーってアパレルやグッズ作成のときなど、参考になる機会も多くあるのでチェックしていて損はないでしょう。

material design palette

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶material design palette

メインの色とアクセントカラーを選択するとそれに合う配色と、プレビューを表示してくれるオンラインツール。material design palette

このように幾つか色を選択すると
誰でもプロ並みの配色ができるツールを16個集めてみました。

UIと配色と合わせてプレビューしてくれます。
デザイン前の参考になりとても便利ですね。

Colours

誰でもプロ並みの配色ができるツールを16個集めてみました。
▶Colours

URLを入力すると、そのサイトで使われている色の配色を抜き出してくれるColours

Googleで試してみましょう。

誰でもプロ並みの配色ができるツールを16個集めてみました。

するとこのように、どういった色が主に使われているかなど表示してくれます。

配色に困ったらツールを使って解決しよう!

誰でもプロ並みの配色ができるツールを16個集めてみました。

本職のデザイナーであっても、配色に困ることは珍しくありません。

  • いつもとは違った色を使いたい
  • どんな色が流行ってるか確認したい

など、多くの場面で配色ツールを活用する場面が訪れるでしょう。
配色に困ったら是非活用してみてくださいね。

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →