類似色・三角配色

目安 16

学習目標

  • 類似色配色が落ち着いた印象になりやすい理由を説明できる
  • 三角配色が3色のバランスを取る手法であることを述べられる
  • 類似色と三角配色の使い分けを1例ずつ挙げられる

類似色・三角配色とは何か(What)

  • 類似色(アナロガス): 色相環で 隣り合う2〜3色 を組み合わせる方法
  • 三角配色(トライアド): 環上で おおよそ120°ずつ 離れた3色を使う方法
類似色・三角配色・補色の3パネル比較図。各色の配置と用途の違いを示す。
類似色は統一感、三角配色はバランス、補色は強いコントラスト(模式図)。補色の詳細は [補色配色](/learn/harmony/complementary) の色相環で確認できます。

なぜ使い分けるか(Why)

類似色は変化が穏やかで、自然・安心・統一感 のある印象になりやすいです。一方、三角配色は3色がバランスよく分散するため、明るく活気 のある構成に向きます。補色ほど刺激は強くありませんが、単色より情報量が増えます。

どう使うか(How)

類似色のたとえ

  • 夕焼け: 赤 → 橙 → 黄
  • 森林 UI: 黄緑 → 緑 → 青緑(6色表現では緑〜青の領域)

背景グラデやブランドのサブカラーに向きます。

三角配色のたとえ

  • インフォグラフィック: 3色でセクションを区切る
  • ゲーム UI: アイコン・レアリティを3色で識別

実務のたとえ: ダッシュボードで「売上・コスト・利益」を三角配色の3色で区別し、凡例と一致させると、色覚多様性への配慮とあわせて 明度差 も併用します。

配色印象の傾向向く用途
類似色落ち着き・統一背景グラデ、ブランドのサブカラー
三角配色明るくバランス図解、ゲーム UI、アイコンセット
補色強いコントラスト注意喚起、小さなアクセント

6色アンカーから見た例

Colorism の 6色 を基準に、類似色・三角配色の組み合わせ例を整理しました(色相環上の 目安 です)。

基準色(6色)類似色の例三角配色の例
赤・橙赤・黄・青(120°目安)
橙・黄橙・緑・紫(120°目安)
黄・橙・緑黄・青・紫(120°目安)
緑・黄・青緑・橙・紫(120°目安)
青・緑・紫青・黄・赤(120°目安)
紫・青・赤紫・黄・緑(120°目安)

配色名称の識別ドリルへ

ミニクイズ

「落ち着いた背景グラデーション」を優先するなら、最初に選ぶ配色はどれですか?

「落ち着いた背景グラデーション」を優先するなら、最初に選ぶ配色はどれですか?