ホーム » カテゴリー:色彩の基礎知識 » HSB配色の基礎
カテゴリー:HSB配色の基礎の記事
コンピューターで色を決める時は一般的にRGBの値を#xxxxxxの形で指定しますが、これは人間にとっては直感的にわかりにくい数値ですので、通常は人間の色の近く方法に基づく色相・彩度・明度を用いた値で色を決定します。このホームページではHSBと呼ばれるカラーモデルで配色を行っていきます。
HSBの色相は見た目が偏っており、色彩調和論に基づいた配色を理論的に説明することが難しいカラーモデルでもあります。そのHSBの特徴を知ることで配色に活かします。
HSBの色相環
HSBは色相を角度で表しますので、色相環を作ることは非常に簡単です。20色の色相環なら18°ずつ色を変えて色相環を作っていくだけでよいのです。
しかし右の色相環をご覧いただければおわかりのように、HSBの色相には偏りが見られます。aとbはほぼ同じように見えるのに対して、cとdはかなり大きな差があるように感じられます。それぞれの色相環の色の差が均等でないと、配色について考えることが難しくなります。
HSBの色相環と均等な色相環
ここでは見た目の色の差が均等な色相環を用い、それに基づいて配色を考えていくことにします。これにより色彩調和論に基づいた配色が可能となります。PCCSやマンセルシステムのような知覚的に等間隔な色相環をご存じない方は、下記の表を用いて色相の差を考えていくことにしましょう。ただしモニターなどの閲覧環境やHSBの特性によって必ず正しい色が再現できているるわけでないことをご了承下さい。
色相とHSBの色相値の対応表
| |
HSB |
Windows |
| 赤 |
341-17 |
230-11 |
| 橙 |
18-37 |
12-25 |
| 黄 |
38-60 |
26-40 |
| 黄緑 |
61-113 |
41-76 |
| 緑 |
114-165 |
77-110 |
| 青緑 |
166-181 |
111-121 |
| 青 |
182-202 |
121-135 |
| 青紫 |
203-259 |
136-172 |
| 紫 |
260-310 |
173-208 |
| 赤紫 |
311-341 |
209-229 |
« 隠す
WindowsではOSのみでHSBカラーモデルを扱うことが出来ません。それを可能にするフリーソフトをご紹介いたします。
「FE – Color Palette」のご紹介
Windowsをお使いの方で、HSBを扱うことの出来るグラフィックソフトをお持ちでない方は、何らかのソフトを用意してHSBを扱える環境を整える必要があります。
他のソフトでも可能ですが、「FE – Color Palette」という非常に優秀なソフトがフリーソフトとして配布されておりますので、こちらを利用して配色を進めていくことをおすすめいたします。
Windowsの「色の編集」パネル
Windowsの「色の編集」パネルは色合い(色相:0-239)、鮮やかさ(彩度:0-240)、明るさ(明度:0-240)で色を決めることになります。こちらでも色の三属性による配色は可能ですが、HSBとWindowsの色の編集パネルでは明度と彩度の扱い方が違いますので、注意が必要です。
« 隠す
HSBカラーモデルは人間の色知覚に基づいたカラーモデルで直感的に色彩を扱えるように出来ております。
HSBとは
HSBカラーモデルとはコンピューター上で扱う色を数値化した物の一つで、色の三属性である色相(Hue)、彩度(Saturation)、明度(BrightnessもしくはValue)を用いて色を指定するものです。マシンやOS、ソフト等によってHSV(VはValue)もしくはHSL(LはLightness)と呼ばれるものもあります。これらは異なるものですが、ここでは同じものと考えても差し支えないでしょう。
このホームページでは呼称をHSBで統一して説明していきます。
Illustrator、PhotoshopとMacでのHSB
これらのソフトとMacでは標準でHSBで色を変える機能がついております。またその他のグラフィックソフトでもHSBを扱える物は数多くありますので、お手持ちのソフトなども一度ご確認下さい。
左側の色空間は横軸に彩度がとられており、右にいくほど彩度が高くなっていきます。縦軸は明度となっております。上に行くほど明度は高くなり、明るくなっていきます。これら2つは0~100%の範囲で調整が可能です。
右側にあるのは色相のバーです。一番下が赤の原色(0°)で、上にいくにつれて橙、黄、黄緑と色相が変わっていき、最後には赤(360°= 0°)に戻ってきます。
注意しなければならないのは明度100%の色が白ではないことです。選ばれた色相と彩度における最も明るい色が100%となりますので、白に近づける場合には彩度を下げながら、明度を上げていくことになります。つまりトーンを移動させて白に近づけていくのと同じ事になります。
« 隠す
▲このページの先頭に戻る