カラースライダーを変えると色選びが楽になるかも！RGBとHSB(HSV)カラーのお話

今日はカラーパレットのお話です。

Webで色を指定する際、ほとんどの場合は16進数のRGBカラーコード、もしくはカラーネームで指定していますよね。
じゃあ、デザインするときは？ サイトの配色を決める際にはどうやって色選びをしていますか？
AdobeソフトウェアにはRGBカラーパレット以外にもいくつかのカラースライダー(カラーピッカー)が用意されています。
その中でも「感覚重視！」で色選びができるHSB(HSV)カラーパレットをご紹介します

HSB(HSV)って何？

色相(Hue)・彩度(Saturation)・明度(ValueまたはBrightness)の3つの要素からなるカラーモデル。

• 色相→色相環(色相の輪)　輪の形、もしくは0度～360度の範囲で表示される
• 彩度→色の鮮やかさの度合い　数値が低いと彩度が低く、高いと彩度が上がる
• 明度→色の明るさの度合い　数値が低いと暗くなり、高いと明るくなる

RGBカラーがRed、Green、Blueの色数値を少しずつ調整して色を作るイメージだとすると
HSBカラーは色鉛筆を輪の形に並べて、好きな色を選び、色の鮮やかさや濃さを調整するイメージだと思います
こちらのカラーのほうが、より人にやさしい設計になっています。

どうやって使えばいいの？

Photoshop

カラーウィンドウのメニュー部分から「HSBスライダー」を選択してパレットを切り替えます

ちょっと関係ないのですが、赤枠で囲っている部分について
パレットの左下にたまに出てくるこの警告マークは「CMYKカラーならこの色で表示されるよ」っていう警告です。
RGBのみで画像作成する際には特に気をつけなくてもいいみたいです。

パレットを切り替えるとHSBカラースライダーに切り替わります。
H→色相です。色相間がまっすぐになっていると考えます
S→彩度です。数値を下げると彩度が下がります(白くなる)
B→明度です。数値を下げると色が暗くなります(黒くなる)

Fireworks

ウィンドウ＞その他＞カラーウィンドウを起動
カラーピッカーの上の「HSV」を選択

Illustrator

スウォッチウィンドウから「スウォッチオプション」を選択

どうして便利なの？

HSB(HSV)カラーはRGBカラーと違い、色相をイメージしながら色を決めることができるので、色同士の効果や関係を考えながら色を選ぶことができます。
また、彩度や明度で微調整ができるため、同系色や単一のカラーでのグラデーションも簡単に取ることもでき、比較的色のばらつきがなく、統一された色を選択しやすいといえます。

まとめ

色相と色の濃淡、明暗でカラーの選択ができるHSB(HSV)カラーを使うと、RGBカラースライダーよりも自分の感覚どおりに色を選択することができるようになります。
また、色相を意識した色選びができるようになるので、より思い切った色選びができるようになりますよ(*´v｀*)