配色の型

どの色を選ぶかより、どの色にどれだけの面積を与えるかのほうが、画面の印象を決めます。

図を大きく見る

図の中身を文字で読む

• 単色　色相は1つ　類似色　隣り合う30度前後　補色　180度の反対　三色　120度ずつ3色
• 静か。まとまるが単調　自然な調和。対比は弱い　最も強い対比。面積を偏らせる　賑やか。制御が難しい
• 面積の配分が、色の選択より効く
• 地（無彩色に近い）が大半を占め、アクセントは1パーセント前後。60:30:10 はあくまで出発点で、Webではもっと極端になる。

ひと目で#

単色配色

色相は1つ。明度と彩度だけで階調を作る。静かで、まとまる

類似色配色

隣り合う30度前後。自然に調和する。対比は弱い

補色配色

180度の反対側。もっとも強い対比。面積を大きく偏らせる

三色配色

120度ずつの3色。にぎやかで、制御が難しい

60-30-10

面積比の出発点。ただし Web ではもっと極端に偏らせる

色の選択より、面積の配分のほうが効きます。

使い分け#

間違えやすいところ#

• ✕3色を同じ量で使う主従が消える。1色を主役にする
• ✕高彩度の補色を隣り合わせる境界がちらつく。間に無彩色を挟むか、彩度を落とす
• ✕色相の理論だけで決める明度の設計がなければ、理屈の上で調和していても読めない
• ✕状態表示まで同系色にするエラーと成功が見分けられない
• ✕紫と青のグラデーションを既定で選ぶ大規模言語モデルが繰り返し出す組み合わせ。独自性が出ない
• ✕色数を増やして情報を区別する5色を超えると見分けられない

図を大きく見る

図の中身を文字で読む

• 同じ3色でも、配分が印象を決める
• ✕ 3色を同じ量で使う　○ 地 60・面 30・アクセント 10
• 地 60
• 面 30
• ＝10
• どれが主役か読めない。どこを押せるのかも読めない　アクセントは小さいほど効く。画面の 5% 以下でよい
• 型（単色・類似・補色・三色）が決めるのは色相の関係だけで、主従を作るのは面積。
• Web の画面では 60-30-10 よりさらに地へ寄せる。地はほぼ無彩色でよい。

業種別の実例#

型を実際のトークンと面積に落とした例を、3件分けてあります。珈琲店は暗い地の単色、整体室は青緑の類似色、会計事務所は白い紙面に金茶を罫と数字だけ。値の組ごとのコントラスト比も実測値で載せています。

• 業種別の配色実例

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

例として、催しの告知ページで、主催者から渡された色が5つありました。全部使おうとして、見出しに1色、ボタンに1色、帯に1色、アイコンに1色と割り振ります。できあがった画面は、どこを押せばよいのか分かりません。色が多いのではなく、どの色にも同じ量を与えたのが原因です。

戻し方は色を減らす前に面積からです。地を6割、面を3割、アクセントを1割。この配分にすると、5色のうち3色は置き場所がなくなり、自然に消えます。残ったアクセント1色を申し込みボタンだけに使うと、視線の行き先が1つに決まります。

型（単色・類似・補色・三色）が決めるのは色相の関係だけです。主従を作るのは面積のほうです。

図を大きく見る

図の中身を文字で読む

• 同じ3色でも、配分が印象を決める
• ✕ 3色を同じ量で使う　○ 地 60・面 30・アクセント 10
• 地 60
• 面 30
• ＝10
• どれが主役か読めない。どこを押せるのかも読めない　アクセントは小さいほど効く。画面の 5% 以下でよい
• 型（単色・類似・補色・三色）が決めるのは色相の関係だけで、主従を作るのは面積。
• Web の画面では 60-30-10 よりさらに地へ寄せる。地はほぼ無彩色でよい。

業種別の配色実例に、3件分のトークン一式と実測値を置いてあります。

確認する#

• アクセント色が占める面積が、画面の5%以下に収まっている
• 押せるものだけがアクセント色を持ち、飾りは持っていない
• 情報を区別する色が5色を超えていない

使えるパターン#

• アクセント面
• 深色パネル

このページで扱う語#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は色を決めるにまとめてある。逆引きには全188件。

配色を組む#

この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 色と階段

基準の色相をひとつ選び、型を切り替えます。下のミニページは地 60・面 30・アクセント 10 の面積配分で組んであり、型を替えると配色一式がその場で入れ替わります。文字の2色は、どの色相でも明度を下げて 4.5:1 を確保します。

:root {
  --color-bg:          #faf7f5;
  --color-surface:     #eee8e2;
  --color-text:        #42372e;  /* 地に 10.83:1 */
  --color-accent:      #ba7336;  /* 面・図形用 */
  --color-accent-text: #925b2a;  /* 面の上でも 4.60:1 */
}

この道具は JavaScript で動きます。無効の場合は、上の使い分けの表で型を選び、面積を 60-30-10 に配分してください。

出典#

• Material Design 3「Color system overview」
• デジタル庁デザインシステム

関連#

• 色の3属性何を動かして階調を作るか
• 役割で色を持つ選んだ色に役割を割り当てる
• コントラストと色覚配色が決まっても、読めなければ意味がない
• デザインスタイルデザインスタイルごとの配色の傾向