配色パターン一覧｜2色・3色・トーン別の組み合わせ

配色を考えるとき、毎回ゼロから色を選ぶ必要はありません。色相環の位置関係やトーンを使った代表的なパターンを知っておくと、候補を短時間で作れます。

代表的な配色パターン一覧

色相だけでなくトーンも選ぶ

同じ補色でも、ビビッド同士とパステル同士では印象が全く違います。色相で骨格を決め、明度・彩度・トーンで強さを調整するのが実用的です。

2色なら主従、3色なら役割分担

2色は主役と支え、3色はベース・メイン・アクセントというように役割を分けると整理しやすくなります。色数が増えるほど、面積差と情報の意味付けが重要です。

アクセシビリティを忘れない

色が違っていても明度差が小さいと、文字やグラフが読みにくい場合があります。重要な区別は色だけに頼らず、ラベル・線種・形も組み合わせてください。

関連して読みたい記事

• 色の組み合わせ｜相性のいい配色と基本の考え方
• 配色とは？配色の基本・配色理論・考え方
• 2色の組み合わせ一覧｜相性のいい配色パターン
• 3色の組み合わせ一覧｜バランスのいい配色パターン
• デザインの配色｜文字・背景・アクセント色の組み合わせ方

配色は小さな色見本だけで決めない

同じ組み合わせでも、背景として広く使う色と小さなアクセントでは印象が変わります。実際の用途に近い面積で並べ、文字・写真・素材と一緒に確認してください。配色ラボで候補を比較し、Webや資料ならコントラスト、ファッションやネイルなら素材と光の当たり方まで見ると、机上の色相関係だけに頼らない実用的な配色になります。

参考にした資料

• Adobe Color｜Color Wheel