鮮やかな色・くすんだ色の印象の違いとは?彩度がデザインに与える効果を解説

セール告知のポスターは派手な色使いが多く、高級ブランドの広告は落ち着いた色使いが多い、と感じたことはないでしょうか。この違いを生んでいるのが「彩度」です。

この記事では、鮮やかな色・くすんだ色がそれぞれどんな印象を与えるのか、そして彩度をデザインにどう活かせるのかを初心者向けに解説します。

基本の理解

まずは彩度とは何か、そしてそれが印象にどう影響するのかを整理します。

彩度は「色の三属性」のひとつ

色は「色相」「明度」「彩度」という3つの性質の組み合わせで説明できます。これを「色の三属性」と呼びます。彩度はそのうちのひとつで、特に明度と混同しやすいので、3つをセットで押さえておきましょう。

属性	意味	変化のイメージ
色相(しきそう)	赤・青・黄などの「色みの種類」	赤 → 黄 → 青
明度(めいど)	色の「明るさ・暗さ」。白に近づくほど高く、黒に近づくほど低い	明るい赤(ピンク) → 赤 → 暗い赤
彩度(さいど)	色の「鮮やかさ」。グレーに近づくほど低い	鮮やかな赤 → くすんだ赤 → グレー

絵の具にたとえると、彩度が高い色は「チューブから出したそのままの色」、彩度が低い色は「そこに同じくらいの明るさのグレーを少しずつ混ぜて落ち着かせた色」とイメージすると分かりやすいでしょう。彩度を下げ切ると、白・黒・グレーのような色みのない「無彩色」になります(詳しくは有彩色・無彩色とは?、明度については明るい色・暗い色の印象の違いとは?で解説しています)。

鮮やかな色・くすんだ色の印象とは何か

彩度の違いによって、同じ色相でも与える印象が変わります。彩度が高い(鮮やかな)色ほど派手で元気な印象を、彩度が低い(くすんだ)色ほど落ち着いた地味な印象を与える、という傾向があります。

同じ赤でも、彩度だけを変えると次のように印象が変わります(明度はほぼ揃えています)。

彩度が高い順:鮮やかな赤(#e60000)→(#c32222)→ くすんだ赤(#a63f3f)→(#8a5c5c)→ 無彩色のグレー(#737373)

鮮やかな赤(高彩度):消防車、セールのPOP、エナジードリンクのパッケージなど。「見て!」と強く主張し、元気・情熱・緊急感を感じさせます。
くすんだ赤(低彩度):レンガ色やあずき色、秋冬のニットなど。落ち着き・シックさ・温かみを感じさせます。

彩度を調整するだけで、同じ色相からでも「にぎやかさ」から「落ち着き」まで幅広い印象を表現できます。また、彩度を揃えて統一することで、まとまりのある大人っぽい配色や、元気で活発な配色を意図的に作ることもできます。

彩度をデザインにどう活かすか

派手さ(セール告知など)を出したい場合と、上品さ・落ち着き(高級ブランドなど)を出したい場合とでは、必要な彩度がまったく異なります。目を引きたい場面では彩度の高い(鮮やかな)色を、高級感・上品さを演出したい場面では彩度を抑えた(くすんだ)色を中心にまとめると、狙った印象に近づけます。

彩度の異なる色を無秩序に混ぜると、統一感のない配色になりやすくなります。パステルカラーと原色、くすみカラーと蛍光色のように彩度の傾向が大きく異なる色を混在させると、ちぐはぐな印象になってしまうため、意図を持って彩度をコントロールすることが大切です。

デザインツールやCSSで彩度を調整する方法

「彩度をコントロールする」といっても、実際にはツールの設定値を動かすだけです。Photoshop・Illustrator・Figmaなど多くのデザインツールのカラーピッカーには四角いエリアがあり、HSB(色相・彩度・明るさ)の考え方で、横方向が彩度(右ほど鮮やか、左ほどグレー寄り)、縦方向が明るさに対応しています。

数値で指定できる場合は、HSBの「S(Saturation=彩度)」のパーセンテージを下げるだけで、同じ色相のままくすみカラーを作れます。

Webサイトを作る場合は、CSSのhsl()関数でも同じように彩度を指定できます。2つ目の値が彩度で、ここを下げると色みを保ったままくすんでいきます。

/* hsl(色相 彩度 明度) — 色相0は赤 */
.vivid-red { color: hsl(0 100% 45%); } /* 鮮やかな赤 */
.dull-red  { color: hsl(0 45% 45%); }  /* くすんだ赤 */
.gray      { color: hsl(0 0% 45%); }   /* 彩度0 = グレー */

なお、HSB(デザインツール)とHSL(CSS)は似ていますが計算方法が異なるため、同じ「S=50%」でもまったく同じ色にはなりません。どちらも「Sを下げるとくすむ」という考え方は共通です。

実践のポイント

彩度を扱うときにありがちな失敗と、よくある疑問をまとめます。

注意点・よくある間違い

デザイン全体の彩度がバラバラだと、色相や明度を揃えていても、まとまりのない配色に見えてしまいます。彩度も統一感を作る大事な要素のひとつだと意識しましょう。
「目立たせたい」という理由だけで彩度を考えずに鮮やかな色を多用してしまい、うるさい印象になることがあります。本当に目立たせたい要素だけに高彩度の色を使い、それ以外は彩度を抑えるとメリハリがつきます。

たとえば次の2つを比べると、背景や文章の彩度を低く抑え、一番押してほしいボタンだけを鮮やかにした見本Bのほうが、ボタンがパッと目に飛び込んでくるのが分かります。

見本A

期間限定キャンペーン

今だけ特別価格でご提供中

申し込む

見本B

期間限定キャンペーン

今だけ特別価格でご提供中

申し込む

見本A:すべて高彩度で、どこを見ればよいか分からない/見本B:背景・文字は低彩度、ボタンだけ高彩度

目安の一例としては、背景や広い面はHSBのSを低め(ほぼグレーに近い〜うっすら色みを感じる程度)に抑え、ボタンやキャッチコピーなど「ここだけ見てほしい」要素にだけ彩度の高い色を使う、という使い分けです。色の役割分担や面積比については、ベースカラー・メインカラー・アクセントカラーとは?や色の割合とは?もあわせて参考にしてください。

よくある質問

Q. 彩度と明度はどう違うの?
A. 彩度は色の「鮮やかさ」、明度は色の「明るさ」を表す、それぞれ別の指標です。鮮やかな色でも明るい場合と暗い場合があり、この2つは独立して調整できます。絵の具でいえば、白や黒を混ぜると主に明度が変わり、同じくらいの明るさのグレーを混ぜると主に彩度が変わる、とイメージすると区別しやすくなります。
Q. 彩度を下げるとどんな色になる?
A. 彩度を下げていくと、色みは残りつつも徐々にグレーに近づいていき、最終的には彩度ゼロの無彩色(グレー)になります。たとえば鮮やかな赤の彩度を下げると、レンガ色やあずき色のような、くすんだ赤になります。一方、赤を明るくする(白を混ぜる)とピンクになり、これは主に明度の変化です。いわゆる「くすみカラー」は、彩度を意図的に下げた色のことです。