配色に困った時考えること

「個々の色具合だけで考えない」

配色を考える場合特に大事なのは、いつも「個別で見た場合と、全体で見た場合の両方を考える」こと。

「『トンマナ』という考え方を取り入れる」

統一されたトーン（色調）とマナー（配置・配色のルール）でデザインに一貫性を持たせることを「トンマナ（「トーン＆マナー」の略語）」という。

• とりあえず白黒で全部作ってから背景色を敷き、それに合わせて似合う色を決める。
  →別エントリで紹介したやり方。形を優先して作ってから色決めをするので迷う範囲が狭くなるというメリットが。
• 配色のお手本にするものを横に置き、色づかいを参考にしつつ決める。
  →配色辞典やお気に入りのチラシやWebサイトなど何でもOK。
• 写真やイラストを配置しているなら、そこで使われているのと同じ色を使ってみる。
  →写真やイラストを「様々な色を持ったオブジェクト」と考え、その中で多く使われている色を選んで使うやり方。
• 色の３要素（色相・明度・彩度）のうち2つの要素は同じにして、残り1つの要素を変えながら色のバリエーションを作る。
  →使う複数の色どうしに統一感を持たせるために効果的な方法。
• 中心になる色と補助になる色、アクセントで使う差し色を３色だけ決めて配色。（メインカラー／サブカラー／アクセントカラー）
  →色そのものを決めるためのものではないが、最低限の色数で配色するための定番的な方法。
• 色以外の方法（大きさやレイアウト）で目立たせることも考えてみる。
  →特に「目立たせる」という目的で色決めをする場合に必要な考え方。

原色大辞典
8種類の色見本と色に関する各種サービスから構成されている、定番の色見本サイト。

配色の見本帳
選んだ色をキーカラーにして、色の法則から多彩な配色イメージを提案します。

シーン別配色見本32パターン
シーンごとにまとめられている配色パターンが32あり、簡単に色についての解説も加えられています。

ColorHunt
シンプルな配色ルールで組み合わされた美しいカラーパレットがたくさんコレクションされています。

Adobe ColorCC
Adobeの定番ツール。カラーホイールの操作で色の組み合わせを直感的に試せます

materialpalette
パレット上の2色の組み合わせを選んでプレビューを表示させます。画面右下に選んだ色について情報が記憶されます。

shade
カラーコードで指定した色をベースカラーにして、グラデーションを作ることができるグラデーション向けツール。

Material Mixer
UIデザインなどで使いやすい、類似色を自動で提案してくれるツール。Googleのマテリアルデザイン用配色がもとになっています。