配色パレットの作成 — 色相環から組み合わせを導く
基準の色を1つ決めると、色相環の位置関係から6種類の配色を作ります。補色、類似色、三色配色など、古くから使われてきた法則をそのまま使えます。
配色を感覚だけで決めると、似た色ばかりになるか、ばらばらになるかのどちらかに寄りがちです。色相環の上で角度を決めて選ぶと、意図のある組み合わせになります。
基準色は、ブランドの色、写真から取った色、伝えたい印象の色。どれでもかまいません。そこから何度離れた色を使うかで、配色の性格が決まります。
6つの配色
| 配色 | 色相環での位置 | 印象 |
|---|---|---|
| 補色 | 正反対（180度） | 強い対比。目を引く |
| 類似色 | 隣り合う（±30度） | まとまりがある。穏やか |
| 三色配色 | 正三角形（120度ずつ） | バランスが取れて鮮やか |
| 分裂補色 | 補色の両隣 | 対比を残しつつ和らぐ |
| 四色配色 | 長方形の4点 | 変化に富む。扱いは難しい |
| 単色配色 | 同じ色相で明度だけ変える | 最も安全。地味になりやすい |
60・30・10の割合
色を選んだ後は、どれをどれだけ使うかです。目安として、主となる色を60%、支える色を30%、強調の色を10%にすると落ち着きます。
多くの失敗は、強い色を使いすぎることで起きます。補色の組み合わせを半々で使うと画面が振動して見えます。片方を背景に薄く敷き、もう片方をボタンや見出しだけに使うと同じ配色でも読みやすくなります。
迷ったら単色配色から始めてください。同じ色相の濃淡だけで組み立てると失敗しにくく、強調に1色足すだけで十分に見えます。
画面で使うときの注意
配色が決まったら、文字と背景のコントラスト比を確認してください。見栄えのよい組み合わせでも、本文に使うと読めないことがあります。基準は4.5対1です。
色だけで情報を区別しないでください。グラフの系列を色分けするなら、線の種類や記号も変えます。色覚のタイプによっては、補色として選んだ2色が同じに見えることがあります。
色覚シミュレータで確認すると、実際にどう見えるかが分かります。
よくある質問
何色まで使ってよいですか？
画面全体で3色前後が扱いやすい範囲です。それ以上は色ごとの意味づけが難しくなります。
補色を使うと目が疲れます。
面積の割合を見直してください。半々ではなく、片方を薄く広く、もう片方を狭く濃く使います。
HEXやRGBで書き出せますか？
各色のコードを表示するのでコピーして使えます。
選んだ色は保存されますか？
保存されません。すべてブラウザの中で処理されます。