明度・彩度を使った配色とは?トーンを揃えて統一感を出す方法

色相はバラバラなのに、なぜか統一感のある配色を見かけたことはないでしょうか。その秘密は、色相ではなく「明度・彩度」を揃えるという考え方にあります。

この記事では、そもそも明度・彩度とは何か、そしてそれを基準にした配色とはどんな考え方なのかを、初心者向けに解説します。

基本の理解

まずは明度・彩度そのものの意味を押さえたうえで、それを基準にした配色がどんな考え方で、色相を使った配色と何が違うのかを整理します。

そもそも明度・彩度とは何か

明度とは色の「明るさ」、彩度とは色の「鮮やかさ」を表す性質のことです。色相(赤・青・黄といった「何色か」を表す色みの種類)とあわせて、色を説明する3つの属性と呼ばれます。

絵の具で考えると、イメージしやすくなります。

明度:白や黒をどれくらい混ぜたか。白を足すと明るく、黒を足すと暗くなるイメージです
彩度:グレーをどれくらい混ぜたか。チューブから出したままの色にグレーを足していくと、鮮やかさが減ってくすんでいくイメージです

たとえば同じ「赤」という色相でも、明度を上げれば明るいピンクのような赤になり、明度を下げれば暗く沈んだえんじ色になります。さらに彩度を下げていくと、色みを残しながらグレーに近づいた、くすんだ赤になります。「何色か」は変えずに、明るさと鮮やかさだけを動かせるということです。

明度を上げた赤
(ピンク)

基準の赤

明度を下げた赤
(えんじ色)

彩度を下げた赤
(くすんだ赤)

どれも色相は「赤」のまま、明度・彩度だけが違う

Photoshop・Illustrator・Figmaなど多くのデザインツールのカラーピッカーでは、四角いエリアの上に行くほど明るく、下に行くほど黒に近づき、右に行くほど鮮やかに、左に行くほど色みのない白・グレー・黒寄りになります。文章の「明度を上げる」「彩度を下げる」は、このエリアの中でカーソルを上下左右に動かすことだとイメージすると結びつけやすいでしょう。

明度と彩度をセットにした「トーン」

この明度と彩度の組み合わせ、つまり「明るいか暗いか」と「鮮やかかくすんでいるか」をセットで捉えた色の調子のことを、デザインでは「トーン」と呼びます。

「明度は高め・彩度は低め」のように、毎回2つの数値で色を管理するのは大変です。そこで、明るさと鮮やかさの組み合わせに「グループ名」をつけたものがトーンだと考えると分かりやすくなります。服のブランドにある「〇〇シリーズ」のように、同じグループの色なら色相が違っても雰囲気が揃う、というイメージです。

ペール
(明るく淡い)

ビビッド
(鮮やか)

グレイッシュ
(くすんだ)

ダーク
(暗い)

各行とも色相は赤・黄・緑・青でバラバラだが、行ごとに明度・彩度を揃えているので、それぞれ雰囲気がまとまって見える(トーンのイメージ)

いわゆるパステルカラーは「明度が高く、彩度は低め〜中くらい」のトーン、くすみカラーは「彩度を落とした」トーンにあたります。トーンという言葉ひとつで、色の雰囲気をまとめて表現できるわけです。日本の配色体系PCCSでは、このトーンを12種類に分類しています(詳しくはPCCSとは?で解説しています)。

明度・彩度を使った配色とは何か

明度・彩度を使った配色とは、色相の関係で色を選ぶ色相を使った配色とは違い、明度や彩度の高低を基準にして色を組み合わせる配色の考え方です。つまり「何色を使うか」ではなく「どんなトーンで揃えるか」で色を選ぶ方法です。

色相がバラバラでも、明度・彩度の傾向(トーン)を揃えることで、統一感のある配色にできるのがポイントです。ファッションでいえば、赤・黄・青とまったく違う色の服を着ていても、全部「くすみカラー」で揃っていればおしゃれにまとまって見える、というのと同じ考え方です。色相を使った配色と組み合わせることで、より繊細で完成度の高い配色の調整ができます。

なぜトーンを揃えることが重要なのか

色相環(色みを順番通りに円形に並べた図)上の関係だけを意識していても、明度・彩度がバラバラだと、まとまりのない配色になってしまいます。ここでいう色相環上の関係とは、赤と赤みのオレンジのように色相環で隣り合う似た色同士を組み合わせる「類似色配色」や、赤と緑・黄と紫のように正反対の色同士を組み合わせる「補色配色」といった、色の組み合わせのルールのことです。

「かわいい」「大人っぽい」といった雰囲気は、実は色相そのものよりも、明度・彩度の傾向によって決まることが多いのです。たとえば明度を高く、彩度を低めにまとめると、パステルカラーのような優しく可愛らしい印象になります。反対に明度を低く、彩度も抑えてまとめると、シックで落ち着いた大人っぽい印象になります。このように、色相はバラバラでも、明度・彩度の範囲を揃えることで、統一感のある配色に見せることができます。

実践のポイント

明度・彩度を使った配色の具体的なやり方と、気をつけたい点、よくある疑問をまとめます。

ツールでトーンを揃える方法

デザインツールでトーンを揃えるいちばん簡単な方法は、カラーピッカーの数値をHSB(色相・彩度・明るさ)で表示し、色相(H)だけを動かして、彩度(S)と明るさ(B)の数値は固定することです。

基準になる1色を決め、そのS(彩度)とB(明るさ)の数値をメモする
別の色を作るときは、H(色相)のスライダーだけを動かし、SとBはメモした数値のままにする
並べてみて、明るさがずれて見える色があれば、Bを少しだけ調整する

3つ目の手順が必要なのは、同じ数値でも色相によって明るさの感じ方が違うからです。黄色は同じ数値でも明るく、青や紫は暗く見えやすいため、上のトーンの見本でも黄色だけ少し明るく見えるはずです。数値で揃えたうえで、最後は目で見て微調整しましょう。

Webサイトを作っている場合は、CSSのhsl()で彩度と明度の値を揃え、色相の値だけを変えると同じ考え方で色を作れます。

/* hsl(色相 彩度 明度) — 彩度60%・明度88%で揃えた淡いトーン */
.pale-pink   { background: hsl(350 60% 88%); }
.pale-yellow { background: hsl(45 60% 88%); }
.pale-green  { background: hsl(140 60% 88%); }
.pale-blue   { background: hsl(215 60% 88%); }

注意点・よくある間違い

色相環の関係にばかり気を取られ、明度・彩度の統一を忘れてしまい、理屈通りでも「なんとなくちぐはぐ」な配色になることがあります。色相を決めたら、明度・彩度もセットで確認しましょう。
明るく鮮やかな色と、暗くくすんだ色を同じデザインの中に混在させると、トーンが揃わずまとまりのない印象になりやすくなります。使う色のトーンの範囲を、あらかじめ決めておくとよいでしょう。

トーンが混在した例:淡いピンク・鮮やかな青・暗い緑・くすんだ黄(上のトーン見本の各行と比べると、ちぐはぐに見える)

ただし、本文の文字と背景のように「読ませる」部分は、あえて明度に大きな差をつける必要があります。トーンを揃えるのは主に背景・装飾・イラストなどの色で、文字色は背景との明るさの差を優先しましょう(詳しくは背景色と文字色の組み合わせとは?で解説しています)。

よくある質問

Q. 「トーン」という言葉はデザインでよく聞くけど、明度・彩度と同じもの?
A. トーンは、明度と彩度を組み合わせた色の調子のことを指す言葉です。明度・彩度という2つの数値をセットにして、「ペール(明るく淡い)」「ダーク(暗い)」のように名前をつけたグループだと考えると理解しやすいです。
Q. 色相を使った配色と明度・彩度を使った配色、どちらを先に決めるべき?
A. 決まった順番はありませんが、まず色相を使った配色でおおまかな色の組み合わせを決め、そのあと明度・彩度を使った配色で全体のトーンを整える、という順番で進めると考えやすいです。