デザインをする上で一番大切なのが「配色」と言っても過言ではないでしょう。
素晴らしいデザインは総じて配色も素晴らしいという前提に成り立っています。
素人がプロの配色センス、配色技術を得るには理論を学んだり、多くの経験が必要となるでしょう。
ですが、ノンデザイナーでもサクッと配色を決められるような便利なオンラインツールが今は沢山インターネット上に公開されています。
オンラインツールを使えば配色の理論が分からなくても、センスが無くても、素人でも誰でもプロ並みの配色を行うことができるようになります。
- 配色がいまいちわからない
- デザイナーがいない
- 多くのパターンを用意したい
- いつも似たようなパターンばかりでバリエーションを増やしたい
今回はそんな様々な用途で活躍するオンライン配色ツールをまとめました。
目次
配色が誰でも簡単にできるオンラインツール集
Adobe Color CC
Adobeが提供しているツール▶Adobe Color CC
お気に入りの配色を保存したり、Photoshopなどと連携することが出来る便利ツールです。
ご存知の方も多いので割愛しようか悩みましたがやっぱり最高に使い勝手が良いのでご紹介します。
カラールールから類似色やコンパウンド、シェードなど、好みのルールを選択し
あとはグリグリするだけで配色を選び出してくれます。
また探索のタブをクリックすると
このように数多くの人気配色パターンを確認することができます。
とにかく悩んだらAdobe Color CCでお気に入りを探すだけでも解決する場面も多そうですね。
Color Hunt
Adobe Color CCの探索をもっとわかりやすくしたようなサイトのColor Hunt
色の知識がない人でも、とりあえず気に入ったパターンを見つけて使えば良い感じに配色できてしまうでしょう。
デザインの知識がない人などは特にこのようなサイトで感覚的にピックアップした配色が良い感じになることも多いため。
難しいツールよりもColor Huntのようなツールが良いかもしれませんね。
日本の伝統色
日本の伝統的な色を使いたい！
和の要素をプラスしたい！
そんな時に役に立つのが日本の伝統色
好きな色をクリックすると背景がふわっと切り替わり、色を表示してくれます。
RGBとCMYKどちらも数値を表示してくれるためどんな場面でも使い易いですね。
和の色 – 色の名前と色見本
配色とは違いますが、和の色のカラーコードや名前を色の名前と色見本でも確認することができます。
え！こんなにも名前がついてるの？！と驚くほど多くの色に様々な名前がつけられているので見るだけでも楽しめます。
Paletton.com
直感的に操作することができるPaletton.com
選択した色を中心とした配色を提案してくれるツールです。
このツールの優れているポイントが、配色を使った例を出力してくれるところにあります。
このようなアーティステックなグラフィックや
WEBデザインやフライヤー作成の参考になるような例まで出力してくれます。
colourcode
最後に紹介するのがcolourcode
こちらも例に漏れずとても直感的に使うことのできるサイトです。
他のサイトにはない機能としてsass、lessファイルで出力可能という点にあります。
コーディングでばりばりsassを使う人も少なくないと思いますので、こういった機能は本当に便利で仕方ありません。
デザイナーさんに頭下げて、これで！配色！作って！頼む！
といえば、カラーセッティングの手間が省けますね。
COLOURlovers
配色のコミュニティサイトCOLOURlovers。
世界中の方々が、自分のお気に入りの配色を投稿しています。
気に入ったデザインなどが見つかったら
このようにカラーコードがどうなっているかを確認することができます。
0to255
カラーコードを入力するとグラデーションを作成してくれるオンラインツールの0to255
グラデーションのカラーコードって意外とキレイに作っていくのって面倒だったりしますよね。
0to255ならこのように、キレイにグラデーションにして全てのコードを表示してくれます。
HUE / 360
好きな色をクリックすると、その色に合う色を表示してくれるHUE /360
こんな感じで一目で分かるようになっています。
配色の理論などが分からなくて、こうやって表示されるとすごく分かりやすく
「あ、これが反対色なんだ。」
とか分かって良いのではないでしょうか。
Material UI Colors
Google Material Design Guide Lineの配色をまとめて確認することができる▶Material UI Colors。
配色ツールとは違いますが、カラーパレットとしてとても優秀なので、掲載しました。
Color Lisa
世界中の偉大な画家が描いた作品から、配色をまとめたオンラインサイトのColor Lisa
日本でも有名な画家の配色が数多く掲載れており、参考にすることが出来ます。
試しにピカソを選んでみましょう。
このような配色が選ばれました。
COLORION
4000を超える配色パターンが掲載されているCOLORION。
クリックするだけでコピーできたり、人気順で閲覧できたりとかなり使い勝手の良い配色サイトです。
人気の配色をみているだけでも、様々なアイデアが湧いてきそうですね。
Pictaculous
画像をアップロードすると、使われている配色を抜き出してくれる便利サイト▶Pictaculous。
試しに弊社サイトの背景をアップロードしてみた所。
このようにバッチリ吐き出してくれました。
Hues
NBAやMLBといったスポーツチームのチームカラーの配色を一挙に掲載しているHues。
スポーツ大好きな方には生唾ものではないでしょうか。
スポーツチームのカラーってアパレルやグッズ作成のときなど、参考になる機会も多くあるのでチェックしていて損はないでしょう。
material design palette
メインの色とアクセントカラーを選択するとそれに合う配色と、プレビューを表示してくれるオンラインツール。material design palette
このように幾つか色を選択すると
UIと配色と合わせてプレビューしてくれます。
デザイン前の参考になりとても便利ですね。
Colours
URLを入力すると、そのサイトで使われている色の配色を抜き出してくれるColours
Googleで試してみましょう。
するとこのように、どういった色が主に使われているかなど表示してくれます。
配色に困ったらツールを使って解決しよう！
本職のデザイナーであっても、配色に困ることは珍しくありません。
- いつもとは違った色を使いたい
- どんな色が流行ってるか確認したい
など、多くの場面で配色ツールを活用する場面が訪れるでしょう。
配色に困ったら是非活用してみてくださいね。
