エンジニアも必見！色相・明度・彩度の違いをマスターしてデザインに強くなろう
山崎講師こんにちは。ゆうせいです。
新人エンジニアのみなさん、CSSで色を指定するとき、なんとなくカラーコードをコピペしていませんか。デザイナーから渡されたデザインデータ通りに組むのは基本ですが、色の仕組みを知っていると、ちょっとした修正やUIの提案力が格段に上がります。
特に「もう少し明るくして」とか「もっと鮮やかに」と言われたとき、どの数値をどう変えればいいのか迷ったことはないでしょうか。
今回は、色の基本である「色の三属性」について、専門的な知識がない方にもわかるように解説していきます。残念ながらここで画像はお見せできないのですが、ぜひ皆さんの頭の中でカラフルな想像力を働かせながら読んでみてください。
色の三属性とは？色の住所のようなもの
私たちが普段目にしている「色」には、実は3つの成分が含まれています。それが「色相（しきそう）」「明度（めいど）」「彩度（さいど）」です。
これら3つの要素を合わせて「色の三属性」と呼びます。
例えるなら、色は「住所」のようなものです。「色相」が都道府県、「明度」が番地、「彩度」が建物名といったように、3つの情報が揃って初めて、ひとつの特定の色が決まります。エンジニアの方なら、変数が3つある関数をイメージするとわかりやすいかもしれませんね。
それでは、ひとつずつ、頭の中でイメージを描きながら見ていきましょう。
1. 色相（Hue）：色の「種類」や「性格」
色相とは、赤、青、黄色、緑といった「色味そのもの」のことを指します。
もっとも直感的な要素ですね。料理で例えるなら「素材」です。今日のご飯は牛肉（赤）にするか、野菜（緑）にするか、といったメインの食材選びに似ています。
デザインの現場では、この色相を円形に並べた「色相環（しきそうかん）」という図がよく使われます。
頭の中で、虹をぐるっと丸めてドーナツ状にしたものを想像してみてください。一番上に真っ赤な色があります。そこから時計回りに、オレンジ、黄色、黄緑、緑、水色、青、紫、ピンクと変化していき、最後にまた一番上の赤に戻ります。これが色相環です。
CSSで hsl() という関数を使ったことはありますか。このHがHue（色相）です。0度から360度の角度で色を指定するのは、この頭の中のドーナツの上で「今どの角度の色を指しているか」を決めているからなんですよ。
2. 明度（Value / Lightness）：色の「明るさ」
次は明度です。文字通り、色の「明るさの度合い」を意味します。
明度が高いと白に近づき、明度が低いと黒に近づきます。
これは、部屋の照明の「調光スイッチ」をイメージしてください。
あなたの手元に真っ赤なリンゴがあるとします。部屋の電気を薄暗くしていくと、リンゴはどう見えるでしょうか。黒っぽく、暗い赤に見えますよね。これが「低明度」の状態です。
逆に、真夏の太陽の下や、撮影スタジオの強いライトで照らすと、白っぽく明るい赤に見えます。これが「高明度」の状態です。
リンゴそのものの色（色相＝赤）は変わっていませんが、光の当たり具合（明度）が変わることで、色の見え方が変化するのです。
明度が高い色は「軽い」「柔らかい」印象を与え、明度が低い色は「重い」「硬い」印象を与えます。Webサイトの背景色が真っ白に近いのは、画面全体を明るく、読みやすくするためですね。
3. 彩度（Saturation）：色の「鮮やかさ」
最後は彩度です。これが一番イメージしにくいかもしれません。彩度は色の「強さ」や「混じりけのなさ」を表します。
彩度が高い色は、原色に近く、ギラギラとしていて目立ちます。逆に彩度が低い色は、グレーに近づき、くすんだ落ち着いた色になります。
カルピスの原液を想像してみてください。
原液のままなら味が濃くて色も鮮やかですよね。これが「高彩度」の状態です。そこに水を足していくと、味も色も薄くなっていきます。これが「低彩度」の状態です。完全に水だけになった状態が、色味のないグレーや白黒（無彩色）の世界です。
別の例えなら、買ったばかりの真っ青なTシャツ（高彩度）が、何度も洗濯を繰り返すうちに色があせて白っぽくくすんでいく（低彩度）様子を思い浮かべると分かりやすいかもしれません。
彩度が高いボタンは「ここを押して！」と強く主張したいときに使われますが、使いすぎると目がチカチカしてしまうので注意が必要です。
明度と彩度の違いを整理しよう
ここが多くの新人さんが混乱するポイントです。「明るくする」ことと「鮮やかにする」ことは、似ているようで全く違います。
両者の違いを、絵の具で例えてみましょう。パレットと筆を想像してください。
- 明度を変える元の赤い絵の具に「白」または「黒」の絵の具を混ぜることです。白を混ぜればピンクのように明るくなり（明度アップ）、黒を混ぜればえんじ色のように暗く重厚になります（明度ダウン）。
- 彩度を変える元の赤い絵の具に「グレー」の絵の具を混ぜることです。または、筆を洗う水で薄めていくイメージでも構いません。混じりけのない鮮やかな赤（高彩度）に、濁った水やグレーを混ぜていくと、どんどん赤色がくすんで、灰色に近づいていきます（彩度ダウン）。
エンジニアとして覚えておきたいのは、「見やすさを変えるなら明度」、「目立ち具合を変えるなら彩度」という使い分けです。
文字が読みにくいときは、背景との「明度の差」をつけると解決することが多いですし、ボタンが背景に埋もれてしまうときは、「彩度」を上げてアクセントをつけると効果的です。
理解することのメリットとデメリット
色の三属性を理解することには、大きなメリットがありますが、知っておくべき側面もあります。
メリット
- デザイナーとの共通言語ができる「なんか違う」という曖昧なフィードバックではなく、「明度を少し下げて落ち着かせましょうか」「彩度を上げて強調しますか」といった具体的な提案ができるようになります。
- CSSの調整が早くなるHSL表記やSassの関数を使って、ベースカラーから自動的に影の色を作ったり、ホバー時の色を計算で作ったりできるようになります。毎回カラーピッカーを開く必要がなくなります。
デメリット
- こだわりすぎて時間が溶ける数値で色を管理できるようになると、微妙な調整が楽しくなりすぎてしまい、本来の実装作業がおろそかになる危険性があります。
- ディスプレイ環境による差に悩む色の微妙な違いがわかるようになると、自分のモニターと他人のモニターでの見え方の違いが気になり始めます。しかし、すべての環境で完璧に同じ色を見せるのは不可能です。ある程度の割り切りも必要になります。
今後の学習の指針
ここまで読んでいただき、頭の中で色のイメージが少し掴めてきたのではないでしょうか。
色は感性だけで決まっているのではなく、論理的な数値で構成されています。ロジックが好きなエンジニアにとって、実は色彩学はとても相性の良い分野なのです。
今回は画像でお見せできませんでしたが、一番の学習方法は、ご自身の目で実際の変化を確認することです。
普段使っているエディタやブラウザのデベロッパーツールで、カラーピッカーを開いてみてください。そして、色のモードをRGBではなく「HSLモード」に切り替えてみましょう。
- 色を変えたいときは H (Hue) のバーを左右に動かす
- 鮮やかさを変えたいときは S (Saturation) のバーを動かす
- 明るさを変えたいときは L (Lightness) のバーを動かす
このとき、画面上の色がどう変化するかをじっくり観察してください。「ああ、これが彩度が下がるということか！」と実感できるはずです。この感覚を指先と目で覚えるだけで、あなたの実装力は確実にレベルアップします。
色を味方につけて、素敵なUIを作っていきましょう！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
学生時代は趣味と実益を兼ねてリゾートバイトにいそしむ。長野県白馬村に始まり、志賀高原でのスキーインストラクター、沖縄石垣島、北海道トマム。高じてオーストラリアのゴールドコーストでツアーガイドなど。現在は野菜作りにはまっている。
