類似色・三角配色とは何か(What)
- 類似色(アナロガス): 色相環で 隣り合う2〜3色 を組み合わせる方法
- 三角配色(トライアド): 環上で おおよそ120°ずつ 離れた3色を使う方法
なぜ使い分けるか(Why)
類似色は変化が穏やかで、自然・安心・統一感 のある印象になりやすいです。一方、三角配色は3色がバランスよく分散するため、明るく活気 のある構成に向きます。補色ほど刺激は強くありませんが、単色より情報量が増えます。
どう使うか(How)
類似色のたとえ
- 夕焼け: 赤 → 橙 → 黄
- 森林 UI: 黄緑 → 緑 → 青緑(6色表現では緑〜青の領域)
背景グラデやブランドのサブカラーに向きます。
三角配色のたとえ
- インフォグラフィック: 3色でセクションを区切る
- ゲーム UI: アイコン・レアリティを3色で識別
実務のたとえ: ダッシュボードで「売上・コスト・利益」を三角配色の3色で区別し、凡例と一致させると、色覚多様性への配慮とあわせて 明度差 も併用します。
| 配色 | 印象の傾向 | 向く用途 |
|---|---|---|
| 類似色 | 落ち着き・統一 | 背景グラデ、ブランドのサブカラー |
| 三角配色 | 明るくバランス | 図解、ゲーム UI、アイコンセット |
| 補色 | 強いコントラスト | 注意喚起、小さなアクセント |
6色アンカーから見た例
Colorism の 6色 を基準に、類似色・三角配色の組み合わせ例を整理しました(色相環上の 目安 です)。
| 基準色(6色) | 類似色の例 | 三角配色の例 |
|---|---|---|
| 赤 | 赤・橙 | 赤・黄・青(120°目安) |
| 橙 | 橙・黄 | 橙・緑・紫(120°目安) |
| 黄 | 黄・橙・緑 | 黄・青・紫(120°目安) |
| 緑 | 緑・黄・青 | 緑・橙・紫(120°目安) |
| 青 | 青・緑・紫 | 青・黄・赤(120°目安) |
| 紫 | 紫・青・赤 | 紫・黄・緑(120°目安) |
ミニクイズ
「落ち着いた背景グラデーション」を優先するなら、最初に選ぶ配色はどれですか?