ローディング中

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

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

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

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

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

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

Adobe Color CC

スクリーンショット 2016 10 23 午後10 44 23
Adobeが提供しているツール▶Adobe Color CC

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

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

スクリーンショット 2016 10 23 午後10 47 26

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

Color Hunt

スクリーンショット 2016 10 23 午後10 44 40
▶Color Hunt

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

日本の伝統色

スクリーンショット 2016 10 23 午後11 26 23
▶日本の伝統色

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

の要素をプラスしたい!

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

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

FireShot Capture 3  和の色  色の名前と色見本  http irononamae web fc2 com colorlist wa html
▶和の色 – 色の名前と色見本

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

Paletton.com

9904f2b4f21f27651e644578804c9b66
▶Paletton.com

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

スクリーンショット 2016 10 23 午後11 31 46

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

スクリーンショット 2016 10 23 午後11 32 48

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

colourcode

スクリーンショット 2016 10 23 午後11 38 13
▶colourcode

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

COLOURlovers

Dce4254689510f0fff2f80ac27bdf386
▶COLOURlovers

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

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

F966dadf2a34f7def2bc01260c0afd53

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

3f6efae4104c0b6ea9afe90ebae5d38d

0to255

FireShot Capture 1  0to255  A simple tool that helps web designers find   http www 0to255 com
▶0to255

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

FireShot Capture 2   234525 on 0to255  http www 0to255 com 234525

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

HUE / 360

FireShot Capture 4   HUE  360  The Color Scheme Application  http hue360 herokuapp com
▶HUE / 360

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

FireShot Capture 5   HUE  360  The Color Scheme Application  http hue360 herokuapp com

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

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

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

Material UI Colors

FireShot Capture 6  Material Design Colors Material Colors Co  https www materialui co colors
▶Material UI Colors

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

Color Lisa

FireShot Capture 7  Color Lisa  Color palette masterpieces of the wor  http www colorlisa com
▶Color Lisa

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

FireShot Capture 8  Color Lisa  Color palette masterpieces of the wor  http www colorlisa com

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

FireShot Capture 9  Color Lisa  Color palette masterpieces of the wor  http www colorlisa com

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

COLORION

FireShot Capture 10  Curated Color Palettes with Search and Tags Support  http www colorion co
▶COLORION

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

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

Pictaculous

FireShot Capture 12  Pictaculous  A Color Palette Generator  courte  http www pictaculous com
▶Pictaculous

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

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

スクリーンショット 2017 04 22 午後5 49 30

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

Hues

FireShot Capture 11  Sporting Hues  http www simeon ws hues
▶Hues

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

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

material design palette

FireShot Capture 14  Material Design Color Palette Generator    https www materialpalette com
▶material design palette

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

このように幾つか色を選択すると
FireShot Capture 15  Material Design Color Palet  https www materialpalette com deep purple red

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

Colours

FireShot Capture 16  Colours  http webcolourdata com
▶Colours

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

Googleで試してみましょう。

FireShot Capture 17  Colours  http webcolourdata com profile 5573

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

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

Print 1822209 640

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

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

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.