トライアド・テトラード配色とは？3色・4色を均等に選ぶ方法

トライアドは色相環を3等分、テトラードは4色を組み合わせる配色方法です。鮮やかすぎる失敗を防ぐ主役色・面積比・彩度調整、実制作での使い分けを解説します。

配色・デザイン

はじめて読む方へ｜まず知っておきたい基本

この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。

色相環とは

色相環は、赤・黄・緑・青・紫などの色相を輪のように並べ、色どうしの関係を見やすくした図です。配色を考える基本ツールのひとつです。

配色とは

配色とは、複数の色を目的に合わせて組み合わせることです。色相だけでなく、明るさ・鮮やかさ・面積・文字とのコントラストも見やすさに影響します。

色相とは

色相は、赤・黄・緑・青・紫といった「色みの種類」を表す属性です。

トライアド配色は、色相環上でほぼ等間隔に3色を選ぶ方法です。テトラード配色は4色を使い、複数の色相をバランスよく組み合わせます。色数が多く、強いコントラストを作りやすいため、選び方より「使う比率」が重要になります。

まず結論

トライアドもテトラードも、色相を均等に選んだからといって各色を同じ強さ・同じ面積で使う必要はありません。実制作では、主役1色＋補助色＋小さなアクセントとして役割を分けると扱いやすくなります。

この記事の色

記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。

← 左右にスライドできます →

教材色 1#3F6682

教材色 2#DDB04F

教材色 3#70A477

教材色 4#C96567

教材色 5#7862A1

配色は色の選び方だけでなく、どの色をどれだけ使うかでも見え方が変わります。

主役を決める 60 / 30 / 10

均等に近づける 40 / 35 / 25

色相環をおおむね3等分した位置から3色を選ぶ配色です。赤・黄・青のように、互いに離れた色相を組み合わせるため、類似色配色より変化が大きく、元気で明快な印象を作りやすくなります。

4色を組み合わせる方法で、代表的には色相環上で四角形をつくるように選ぶ考え方があります。ツールによって「テトラード」「矩形配色」「スクエア配色」を分けて扱う場合があります。

方式	色数	特徴	扱いやすさ
トライアド	3色	変化とバランスを両立しやすい	比較的扱いやすい
テトラード	4色	多彩で表現幅が広い	役割分担が重要
スクエア	4色	色相差が均等で華やか	高彩度のままだと強くなりやすい

トライアドの3色をすべて高彩度・同面積で使うと、視線が分散しやすくなります。1色を主役にし、残り2色を補助・アクセントへ回すと、色相差を活かしながら整理できます。

4色を全部独立した主役にするより、近い役割の2色を背景・補助に、残りを強調色にするなど、グループ分けすると設計しやすくなります。白・黒・グレーを間に入れて情報を区切る方法も有効です。

配色理論は出発点

色相環上で整った組み合わせでも、実際の見やすさは明度・彩度・面積・文字サイズ・背景色で変わります。特にUIでは、理論上の美しさより可読性と状態の識別を優先します。