色の性質を表すHSB

RGBはred，green，blueの色の成分を表していますが，この数字を見ただけで直感的に色をイメージするのはかなり難しいことです。

HSBは色相，彩度，明度を数によって表したものです。色相（H）は，赤から始まり黄，緑，青，紫と連続的に変わり赤に戻るまでの色を360°に割り当てたものです（アプリケーションによって色の割り当て方が異なることがあります）。彩度（S）は色の鮮やかさ。0は色がぬけたモノトーンのグレー（または白か黒）になります。明度（B）が0になると黒になります。

HSBだと，色の性質がよく分かります。H:120°，S:30%，B:100%なら，緑で鮮やかさの少ない明るい色になります。白みがかった薄い緑という感じです。ちなみにRGBの16進だと#B2FFB2となります。

216色のカラーパレットには限界がある

こんなふうなものを見たことがあると思いますが，色数が限定されたカラーパレットから色を選んでいくと，統一感のないちぐはぐとした色づかいになりがちです。特に同系色の濃淡で表現したいというとき，選べる色が極端に少なくなってしまいます。

色相を固定して彩度・明度の違う色を選ぶ

ぼくがデザインするときは，まず基本となる色を3～4系統選んでいます。「グレースケール，色相120°，220°」というふうに。それから，彩度と明度を段階的に変えて色のセットを作ります。同系色のグラデーションを作るときも，始点の色と終点の色を決めておくと便利です。

色相120°に固定して，順に彩度を下げ明度を上げました。

こうして選んだ色は，サイトごとにカラーテーブルにしておきます。

彩度・明度を控えめにすると落ち着いたトーンになる

ディスプレイは光らせることで色を作っているので，彩度・明度が高いと強烈な色になりがちです。彩度・明度を落とすと色の強さが抑えられて，落ち着いた雰囲気になります。

上段は彩度100%，明度100%です。下段は彩度40～50%，明度70%に落としました。

彩度・明度によって色の強さが数として表せるので，トーンを統一させるときも数を頼りに出来ます。

色を選ぶツール

Macならカラーパネルがあります。色が扱えるアプリケーションから呼び出すことが出来ます。たくさんの方法が用意されていますが，HSBつまみを選択します。選んだ色は下のほうに保存しておくことも出来ます。

Web上にもこんなツールがあります。

• Choose Color Schemes for your website using this free tool.

不透明度

不透明度を下げていくと下のものが透けて見えるようになってきます。これを利用すると色の世界はさらに広がります。

上の画像を縦反転させて，不透明度60%～0%のグラデーションをかけました。

根拠をもってねらった色を選ぶ

「このくらいの色かな」と見た目や勘に頼るだけでなく，HSBの値でそれなりの根拠をもってねらった色を選ぶ，という感じです。ぼくはカラーコーディネイトにいまひとつ自信が持てないので，数による根拠を求めたくなるのかもしれませんが...。

関連

• HSBで色をつくる
• 数で合理的にデザインする - サイズ編