HSBを使って配色

HSBについて

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

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

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

PhotoshopのカラーピッカーはHSBが表現されています。それぞれの表現は下図のとおりです。

例えば色相を固定して彩度、明度を変更して配色を決めたり、彩度、明度を固定して色相だけを変化させたりします。

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

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

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

下図は30度ずつ色相を変化させて作成しています。彩度は５０％、明度は９０％です。

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