hsl()

hsl()

[4] CSShsl() 関数は、 HSL によるの指定を表します。

[6] CSS では以前から rgb() によるの指定ができましたが、 RGBCRT という特定のハードウェアに特化したの指定方法であること、 RGB人間にとって直感的でないことから HSL もまた有用と判断したとされています >>5

仕様書

hsl()

[7] hsl() 関数は構文的には

... で構成されます。

[15] 整数値百分率値の前後には空白を挿入できます。

[16] 関数名大文字でも小文字でも構いませんし、escape することもできます。

[17] という構文はなぜか CSS3 >>5 では明記されていません。

色相 (H)

[18] 色相 (hue) 色環 (color circle) における角度で表します。 単位ですが、 CSS では省略して整数値として記述します。 >>5

[19] 単位の角度なので、 0 と 360 は等しく、また負の整数や 360 以上の数を使って表すこともできますが、 すべての値を 0 以上 360 未満の値に正規化できます。 CSS3 には

(((x mod 360) + 360) mod 360)

... という計算で [0, 360) の範囲に正規化することもできようと書かれています。 >>5

[20] なぜか、正規化しなければならないとも、いつのタイミングでしろとも書いてありません。

彩度 (S)

[21] 彩度 (saturation) 百分率値で表します。 100% が最も高い彩度で、 0% は灰色 (shade of gray) を表します。 >>5

[28] 利用者エージェントは、彩度が 0% よりも小さければくりぬいて 0% としなければなりません>>5

[30] 100% よりも大きい場合については仕様書上明記されていません。

明度 (L)

[22] 明度 (lightness) 百分率値で表します。 100% が、 0% がで、 50% が「普通」を表します。 >>5

[31] 0% より小さい場合や 100% より大きい場合については仕様書上明記されていません。

色空間と色域

[29] 利用者エージェントは、指定された装置色域の範囲外である場合にくりぬき (clip) なければなりません。 この際色相は可能な限り保持するべきですが、それ以外の点は未定義です >>5

[32] そのため、 HSL から RGB に変換してからくりぬきを行うのとは違った結果になることがあります >>5

[33] HSL から RGB へは、次の ABC による手順により変換できます。 ただし、入力となる H, S, L はいずれも 0 から 1 までの範囲の小数値に正規化されているものとします。 >>5

    HOW TO RETURN hsl.to.rgb(h, s, l): 
       SELECT: 
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h): 
       IF h<0: PUT h+1 IN h>
       IF h>1: PUT h-1 IN h
       IF h*6<1: RETURN m1+(m2-m1)*h*6>
       IF h*2<1: RETURN m2>
       IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6>
       RETURN m1

構文解析

[2] Firefox 2 では hsl()構文解析時に rgb() に置換されてから CSSOM に現れるようです。

[3] Firefox 2 は s や l に 0% より小さな値や 100% より大きな値を指定しても大丈夫なようです。

[34] その他、 <http://www.w3.org/TR/2011/REC-css3-color-20110607/#hsl-examples> に分かりやすい表があります。

関連

[35] α値を追加した hsla() 関数もあります。

メモ

[1] HSL support in Core-2 - CSS3 . Info (2007-11-17 13:43:26 +09:00 版) <http://www.css3.info/hsl-support-in-core-2/>