CREATOR BLOG

Sassで色空間『HSB』を扱う関数を作った話

2015/07/17
atsuko.a
  • このエントリーをはてなブックマークに追加

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
先日どうしてもSassでHSBを使用したかった際の、経緯と対処法を紹介します。

もくじ

  1. RGBとHSLとHSB
  2. 何故HSBなのか
  3. RGBとHSBの相互変換関数を書く
  4. まとめ

RGBとHSLとHSB

そもそもHSBは色空間の一種で、RGBやHSLと同じように3つの要素から色を特定する方法です。
ここでは代表的な色空間である、RGBとHSLとHSBについてざざっと紹介します。

RGB

WEB屋さんにはお馴染みの加法混色です。
赤(Red)緑(Green)青(Blue)値はそれぞれ0→255の間で設定し、すべて足すと白になります。
150717_01

HSL

色相(Hue)彩度(Saturation)輝度(Lightness)の3要素から成る色空間。
色相は0°→360°の角度、彩度と輝度は0%→100%(もしくは0→255)の間で設定します。
CSS3で色の指定として使用できるようになりました。
また、SassにもHSLを変換する関数があります。
150717_02

HSB

色相(Hue)彩度(Saturation)明度(Brightness)の3要素から成る色空間。
色相は0°→360°の角度、彩度と明度は0%→100%(もしくは0→255)の間で設定します。
フォトショやsketch・FireworksなどのグラフィックツールにはRGB・CMYKの他にHSBでの色指定ができる機能があるようです。
150717_03
明度を「Value」とし「HSV」と呼ぶこともあるようです

何故HSBなのか

HSLとHSBの指定方法は似ていますが、考え方が異なる為同じ色を表現する場合で数値が異なります。
HSL

  • 彩度(S値):100%を純色とし、0%になるにつれ灰色になっていく
  • 輝度(L値):100%を白、0%を黒とし、中間の50%を純色とする

HSB

  • 彩度(S値):100%を純色とし、0%になるにつれ白色になっていく
  • 明度(B値):100%を純色とし、0%になるにつれ黒色になっていく

150717_04
図を並べてみると明確ですね。

で、上でも書いたように多くのグラフィックツールではHSBが使えることが多いです。
ボタンを作るときなど、

  • 影はベース色に対して明度を25下げる
  • ホバーはベース色に対して彩度を10上げる

といった方法で作ると、同じテイストの違う色のボタンを作る時に便利です。
150717_05

RGBとHSBの相互変換関数を書く

HSBが便利なのは有難いのですが、Sass(CSS)ではHSBは使えないので、どうにか変換する関数を作りました。
手順としてはこんな感じ、、、

  1. RGBを元にHSBそれぞれの値を出す…色A
  2. 色Aのそれぞれの値に対して、適宜計算する…色B
  3. 色Bを元にしてRGBの値を出す

RGBとHSBの相互変換には決まった式があるのでそれをもごもごと関数にしていきます。
RGB→HSB

HSB→RGB

これだけだとどうにもならないので、明度を変更する関数を作ります。

実際に使う際には

とすると、ベース色(#9673FF)から明度を−25した色が返ってきます。
計算上小数点が発生しますが特に丸めず、ブラウザの解釈に任せています。

同じように、色相・彩度を変更する関数も作れます。

まとめ

一部グラフィックツールではHSLが使用できるものもあるようですが、
使っているツールが対応していない場合はこういった関数を利用するのもよいかと思います。

HSLはグラデーションを作るときなどに便利なので、上手に使い分けができるといよいですね٩(๑❛ᴗ❛๑)۶

それでは今日はこのへんで!

この記事を書いた人

atsuko.aフロントエンドエンジニア

猫派の甘党、胃が弱い系WEB屋。 コーディングしたり、たまにデザインしたりします。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive