BLOGSassで色空間『HSB』を扱う関数を作った話2015/07/17atsuko.aツイートこんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)先日どうしてもSassでHSBを使用したかった際の、経緯と対処法を紹介します。もくじRGBとHSLとHSB何故HSBなのかRGBとHSBの相互変換関数を書くまとめRGBとHSLとHSBそもそもHSBは色空間の一種で、RGBやHSLと同じように3つの要素から色を特定する方法です。ここでは代表的な色空間である、RGBとHSLとHSBについてざざっと紹介します。RGBWEB屋さんにはお馴染みの加法混色です。赤(Red)緑(Green)青(Blue)値はそれぞれ0→255の間で設定し、すべて足すと白になります。HSL色相(Hue)彩度(Saturation)輝度(Lightness)の3要素から成る色空間。色相は0°→360°の角度、彩度と輝度は0%→100%(もしくは0→255)の間で設定します。CSS3で色の指定として使用できるようになりました。SassにもHSLを変換する関数があります。HSB色相(Hue)彩度(Saturation)明度(Brightness)の3要素から成る色空間。色相は0°→360°の角度、彩度と明度は0%→100%(もしくは0→255)の間で設定します。フォトショやsketch・FireworksなどのグラフィックツールにはRGB・CMYKの他にHSBでの色指定ができる機能があるようです。明度を「Value」とし「HSV」と呼ぶこともあるようです何故HSBなのかHSLとHSBの指定方法は似ていますが、考え方が異なる為同じ色を表現する場合で数値が異なります。HSL彩度(S値):100%を純色とし、0%になるにつれ灰色になっていく輝度(L値):100%を白、0%を黒とし、中間の50%を純色とするHSB彩度(S値):100%を純色とし、0%になるにつれ白色になっていく明度(B値):100%を純色とし、0%になるにつれ黒色になっていく図を並べてみると明確ですね。上でも書いたように多くのグラフィックツールではHSBが使えることが多いです。影はベース色に対して明度を25下げるホバーはベース色に対して彩度を10上げるといった方法で作ると、同じテイストの違う色のボタンを作る時に便利です。RGBとHSBの相互変換関数を書くHSBが便利なのは有難いのですが、Sass(CSS)ではHSBは使えないので、どうにか変換する関数を作りました。手順としてはこんな感じ、、、RGBを元にHSBそれぞれの値を出す...色A色Aのそれぞれの値に対して、適宜計算する...色B色Bを元にしてRGBの値を出すRGBとHSBの相互変換には決まった式があるのでそれをもごもごと関数にしていきます。$b-rgb);}これだけだとどうにもならないので、明度を変更する関数を作ります。-25)とすると、ベース色(#9673FF)から明度を−25した色が返ってきます。計算上小数点が発生しますが特に丸めず、ブラウザの解釈に任せています。同じように、色相・彩度を変更する関数も作れます。使っているツールが対応していない場合はこういった関数を利用するのもよいかと思います。コーディングこの記事を書いた人atsuko.aフロントエンドエンジニア猫派の甘党、胃が弱い系WEB屋。コーディングしたり、たまにデザインしたりします。