[4] CSS の hsl() 関数は、 HSL による色の指定を表します。
[6] CSS では以前から rgb() による色の指定ができましたが、
RGB は CRT という特定のハードウェアに特化した色の指定方法であること、
RGB は人間にとって直感的でないことから HSL もまた有用と判断したとされています >>5。
hsl()... で構成されます。
[16] 関数名は大文字でも小文字でも構いませんし、escape することもできます。
[18] 色相は色環における角度で表します。 単位は度ですが、 CSS では省略して整数値として記述します。 >>5
[19] 度単位の角度なので、 0 と 360 は等しく、また負の整数や 360 以上の数を使って表すこともできますが、 すべての値を 0 以上 360 未満の値に正規化できます。 CSS3 には
(((x mod 360) + 360) mod 360)
[21] 彩度は百分率値で表します。 100% が最も高い彩度で、 0% は灰色 (shade of gray) を表します。 >>5
[28] 利用者エージェントは、彩度が 0% よりも小さければくりぬいて 0% としなければなりません。 >>5
[22] 明度は百分率値で表します。 100% が白、 0% が黒で、 50% が「普通」を表します。 >>5
[29] 利用者エージェントは、指定された色が装置の色域の範囲外である場合にくりぬきしなければなりません。 この際色相は可能な限り保持するべきですが、それ以外の点は未定義です >>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% より大きな値を指定しても大丈夫なようです。
hsl(0, 100%, 50%) 赤 >>5hsl(120, 100%, 50%) lime >>5hsl(120, 100%, 25%) 暗い緑 >>5hsl(120, 100%, 75%) 淡い緑 >>5hsl(120, 75%, 75%) パステル・グリーン >>5[34] その他、 <http://www.w3.org/TR/2011/REC-css3-color-20110607/#hsl-examples> に分かりやすい表があります。
[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/>