viewsWebサイト作成時の色選びって難しいですよね...。デザイン作成時、自分で色を決めたい時にきっと作業効率を上げてくれる、HSB(HSV)カラーについてのお話です。今日はカラーパレットのお話です。Webで色を指定する際、ほとんどの場合は16進数のRGBカラーコード、もしくはカラーネームで指定していますよね。サイトの配色を決める際にはどうやって色選びをしていますか?AdobeソフトウェアにはRGBカラーパレット以外にもいくつかのカラースライダー(カラーピッカー)が用意されています。その中でも「感覚重視!」で色選びができるHSB(HSV)カラーパレットをご紹介しますHSB(HSV)って何?色相(Hue)・彩度(Saturation)・明度(ValueまたはBrightness)の3つの要素からなるカラーモデル。数値が低いと暗くなり、高いと明るくなるRGBカラーがRed、Green、Blueの色数値を少しずつ調整して色を作るイメージだとするとHSBカラーは色鉛筆を輪の形に並べて、好きな色を選び、色の鮮やかさや濃さを調整するイメージだと思いますこちらのカラーのほうが、より人にやさしい設計になっています。やって使えばいいの?Photoshopカラーウィンドウのメニュー部分から「HSBスライダー」を選択してパレットを切り替えますちょっと関係ないのですが、赤枠で囲っている部分についてパレットの左下にたまに出てくるこの警告マークは「CMYKカラーならこの色で表示されるよ」っていう警告です。RGBのみで画像作成する際には特に気をつけなくてもいいみたいです。パレットを切り替えるとHSBカラースライダーに切り替わります。色相間がまっすぐになっていると考えますS→彩度です。数値を下げると彩度が下がります(白くなる)B→明度です。数値を下げると色が暗くなります(黒くなる)Fireworksウィンドウ>その他>カラーウィンドウを起動カラーピッカーの上の「HSV」を選択Illustratorスウォッチウィンドウから「スウォッチオプション」を選択どうして便利なの?HSB(HSV)カラーはRGBカラーと違い、色相をイメージしながら色を決めることができるので、色同士の効果や関係を考えながら色を選ぶことができます。彩度や明度で微調整ができるため、同系色や単一のカラーでのグラデーションも簡単に取ることもでき、比較的色のばらつきがなく、統一された色を選択しやすいといえます。まとめ色相と色の濃淡、明暗でカラーの選択ができるHSB(HSV)カラーを使うと、RGBカラースライダーよりも自分の感覚どおりに色を選択することができるようになります。CSSの【float】についてちょっと本気出して説明してみた。しこのブログはWebコンテンツ総合製作の「ふたっぱ!」が運営しています。