解 説

HSBについて

Web制作は色空間におもにRGBを使用しますが、HSBを意識的に取り入れるとグッとよくなります。無意識のうちにHSBを使用していたのではなく、意識的に使うことがポイントです。

HSBとは
色相 Hue(H)
彩度 Saturation・Chroma(S)
明度 Value・Lightness・Brightness(BまたはV)
で色を表すことです。

通常は無意識に使用しているはずです。
例えばPhotoshopのカラーピッカーでなんとなく色を決めているとか。。。

PhotoshopのカラーピッカーはHSBが表現されています。それぞれの表現は下図のとおりです。
picker
例えば色相を固定して彩度、明度を変更して配色を決めたり、彩度、明度を固定して色相だけを変化させたりします。

色相の値は度となっていますがこれは色相環の何度に当たるかを示しています。

例えば20色の色相環を作成するには18度ずつ色相の値を変えればよいわけです。
下図はIllustratorの線で真円を作成して破線に変更後、分解してそれぞれに18度ずつ色相を変更して着色した色相環です。

sikisou

例えばh1~h6にワンポイントのカラーリングをしたい場合、h1の色を決めたら後は色相を60度ずつ変化させるだけで統一感のある色の変化を実現できたりします。

下図は30度ずつ色相を変化させて作成しています。彩度は50%、明度は90%です。

color1

また、下図のように単純な円に色相は同じですが、明度を変更したものを2つ用意しました。それぞれ逆向きのグラデーションオーバレイを少し適用(不透明度15%)したものです。
これに更にシャドウやベベルなどの効果を付けていきます。簡単に通常時のボタンとクリック時のボタンが出来上がります。

button1