色の三属性って何？

ホームページ制作やデザイン制作において、色の選び方に悩む機会は多いでしょう。

• 「どのような色を使えばよいのか分からない」
• 「どの色とどの色を組み合わせればよいのか分からない」
• 「想像していたイメージと異なってしまう」

上記のように感じたこともあるのではないでしょうか。

色を選ぶ際は、「色の三属性」を意識することが大切です。色の三属性とは、色相・明度・彩度のこと。これらを理解し、上手く使いこなすことで、効果的な配色を実現することができます。

そこで今回は、初心者向けに、色の三属性（色相・明度・彩度）について分かりやすく解説していきます。色の基礎について理解を深めたい方は、ぜひ参考にしてみてください。

色の三属性とは

例えば「青色」と一口に言っても、明るい青・暗い青・水色に近い青など、様々な「青色」が思い浮かぶと思います。この世には多種多様な「青色」が存在し、それぞれ異なる特徴を持っています。そのため、ホームページ制作やデザイン制作を行う際には、作りたいコンテンツにぴったりな「青色」を選びたいものです。

では、どのように適切な色を選び、どのように指定すればよいのでしょうか。

そこで登場するのが「色の三属性」です。

色は、色相・明度・彩度といった3つの属性を持っています。これを一般的に「色の三属性」と呼びます。

• 色相：色味の違い
• 明度：色の明るさの度合い
• 彩度：色の鮮やかさの度合い

これらの三属性を上手くコントロールすることで、より具体的に、より効果的に色を指定できます。
以下では、それぞれの属性について詳しく掘り下げていくので、参考にしてみてください。

色相について

まずは、色相について解説していきます。

色相とは？

色相とは、赤・黄・緑・青・紫といった、色味の違いを意味します。一般的に使用する「色」という言葉は、色相のことを指している場合が多いでしょう。

皆さんは、「光のスペクトル」という言葉を聞いたことがあるでしょうか。光のスペクトルとは、人間が見える範囲の光を波長順に並べたものです。

私たちは、光の波長の長さによって、色を識別しています。波長の長い順に、赤・橙・黄・緑・青・藍・紫のようになっています。このような色味の変化・色味の違いを、色相と呼びます。

色相環とは？

色相を円状に並べ、分かりやすくしたものを、「色相環」や「カラーサークル」と言います。Photoshopやillustratorなどをお使いの方は、目にしたことがあるかもしれません。

色相環は、色の組み合わせを考える際に非常に役立ちます。例えば、隣り合う色同士は馴染みやすく、統一感を出したいときに有効です。また、向かい合わせになる色は「補色」と呼ばれ、メリハリを出したいときや目立たせたいときに効果的だと言えるでしょう。

色の組み合わせ方に迷った場合は、色相環を見て、色の関係性をチェックしてみることをおすすめします。

暖色、寒色、中性色とは？

色の系統は、「暖色」「寒色」「中性色」の3種類に大別することができます。

暖色とは、赤みがかった、暖かさを感じるような色のこと。赤色・橙色・黄色などが該当します。また、暖色は進出色とも呼ばれ、視覚的に飛び出しているように感じられる傾向があります。

寒色とは、青みがかった、冷たさや寒さを感じるような色のこと。青緑色・青色・青紫色などが該当します。また、寒色は後退色とも呼ばれ、奥の方に後退しているように見える傾向があります。

中性色とは、暖色にも寒色にも当てはまらない色のこと。温度を感じさせないという特徴があり、黄緑色・緑色・紫色などが該当します。

暖色・寒色・中性色は、それぞれ人間に与える印象が大きく異なります。それぞれの特徴をよく理解し、効果的に使い分けてみてください。

明度について

次に、明度について簡単に解説していきます。

明度とは？

明度とは、「色の明るさの度合い」を表す指標です。同じ色相であっても、明るさが違えば、色の見え方は変わってくるでしょう。

高明度の色は、明るくて柔らかい印象を与えます。また、明度が高くなればなるほど、白色に近づくという特徴があります。例えば、赤色の明度を高くしていけば、ピンク色に近づいていきます。

一方で、低明度の色は、暗くて硬い印象を与えます。また、明度が低くなればなるほど、黒色に近づくという特徴があります。先ほどとは逆に、赤色の明度を低くしていけば、マルーンやボルドーなどの黒めの赤色に近づいていくでしょう。

彩度について

続いて、彩度について簡単に解説していきます。

彩度とは？

彩度とは、「色の鮮やかさの度合い」を表す指標です。

彩度が高いほど鮮やかな色になり、力強くて派手な印象を与えます。一般的にビビッドカラーと呼ばれるような色は、原色に近い高彩度の色のことを指します。

一方で、彩度が低ければ、くすんで色味を感じにくくなります。落ち着いた印象を与えたい場合や、「鈍さ」「静かさ」などを連想させたい場合は、彩度を低めに設定すると良いでしょう。

なお、白・黒・グレーの3つの色には彩度が存在しません。これらの色は「無彩色」と呼ばれるので、覚えておきましょう。

Photoshopのカラーホイールで色の三属性をコントロールする

ホームページ制作やデザイン制作において、Photoshopを利用している方も多いでしょう。
Photoshopでは、カラーホイール（色相環）を活用しながら配色を考えることが可能です。

以下では、Photoshopのカラーホイールの設定方法と、三属性（色相・明度・彩度）を使った色の選択方法を紹介します。ぜひ参考にしてください。

Photoshopのカラーホイールの設定方法

Photoshopでカラーホイールを使うためには、以下の流れで設定を行う必要があります。

1. カラーパレットを開く
2. 右上にある三本線をクリックする
3. 「カラーホイール」をクリックする

カラーホイールを利用すれば、類似色や補色などがすぐに分かり、簡単に効果的な配色を選択することができます。

三属性を使った色の選択方法（HSBバーの説明）

カラーホイールを設定すると、画面上部に「HSBバー」が表示されます。HSBとは、色相・彩度・明度のことです。

H（Hue）：色相
S（Saturation）：彩度
B（Brightness）：明度

HSBバーでは、色相・彩度・明度を個別にコントロールすることが可能です。バーをスライドさせるか数値を入力するだけで、自分の思い通りに色を変えられます。非常に便利なので、ぜひ活用してみてください。

色相のカラーホイールとHSBバー

彩度のカラーホイールとHSBバー

明度のカラーホイールとHSBバー

まとめ

初心者向けに、色の三属性について分かりやすく解説しました。色の世界は奥が深いです。ぜひ当記事を参考にした上で、効果的な配色についてさらに学んでみてください。