[6]

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

>>5

。

`hsl()`

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

[8] hsl(
[9] 色相を表す整数値
[10] 読点
[11] 彩度を表す百分率値
[12] 読点
[13] 明度を表す百分率値
[14] )

... で構成されます。

[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 h0: PUT h+1 IN h
       IF h>1: PUT h-1 IN h
       IF h*61: RETURN m1+(m2-m1)*h*6
       IF h*21: RETURN m2
       IF h*32: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1

構文解析

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

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

例

[23] hsl(0, 100%, 50%) 赤 >>5
[24] hsl(120, 100%, 50%) lime >>5
[25] hsl(120, 100%, 25%) 暗い緑 >>5
[26] hsl(120, 100%, 75%) 淡い緑 >>5
[27] hsl(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/

仕様書

hsl()