- ホーム >
- 色彩の基礎知識 >
- ウェブの色の表示とHSBカラーモデル >
HSBカラーモデル
HSBカラーモデルは直感的に色彩を扱えるように出来た色の表示システムです。配色が苦手な人は思いつきの色を選ぶのではなく、「もっと赤みを強く」や「もう少し暗く」のような調整を数値で行うことができるHSBカラーモデルがおすすめです。
HSBカラーモデルとは
HSBカラーモデルとはコンピューター上で扱う色を数値化した物の一つで、色の三属性である色相(Hue)、彩度(Saturation)、明度(BrightnessもしくはValue)を用いて色を指定するものです。OS、ソフト等によってHSV(VはValue)とも表記され、似たものにHSL(LはLightness)と呼ばれるものもあります。
Wikipediaでは「HSV色空間」という項目名になっていますが、ここではIllustratorやPhotoshopなどのウェブサイトを作成する際に使われるソフトで多く使われているHSBに統一して説明していきます。
Illustrator、PhotoshopとMacでのHSB
これらのソフトとMacでは標準でHSBで色を変える機能がついております。またその他のグラフィックソフトでもHSBを扱える物は数多くありますので、お手持ちのソフトなども一度ご確認下さい。
左側の色空間は横軸に彩度がとられており、右にいくほど彩度が高くなっていきます。縦軸は明度となっております。上に行くほど明度は高くなり、明るくなっていきます。これら2つは0~100%の範囲で調整が可能です。
右側にあるのは色相のバーです。一番下が赤の原色(0°)で、上にいくにつれて橙、黄、黄緑と色相が変わっていき、最後には赤(360°= 0°)に戻ってきます。
注意しなければならないのは明度100%の色が白ではないことです。選ばれた色相と彩度における最も明るい色が100%となりますので、白に近づける場合には彩度を下げながら、明度を上げていくことになります。つまりトーンを移動させて白に近づけていくのと同じ事になります。