WEB仕様におけるHSL色空間の混沌

WEB(HTML/CSS/SVG)が扱う標準的な色空間はsRGBだったが 最新のCSSカラーではHSLによる色の指定が可能となった.

sRGB色空間とHSL色空間とは色の表現範囲が一致しているため, RGB値をHSL値としたりその逆が可能なのだが, 実はWEBでは3つのHSL解釈が存在しており, それらを混在させると思うような結果が得られない…というケースに遭遇したので本記事ではその内容について整理しておく.

RGBとHSL

WEBでは色をsRGB色空間, つまりR（赤）G（緑）B（青）の光の三原色を数値化したもので扱い, 「rgb(127,127,127)」や「#00ff00」といった記法で指定します.

一方最新のWEB仕様ではRGB値による色の指定の他にHSL値による色の指定が可能となっています. HSLはそれぞれH（色相）S（彩度）L（輝度）を表しており, 「hsl(120, 50%, 50%)」と言った記法で指定した色はRGBによるものと互換性があります.

NOTE:
RGB色空間とHSL色空間が互換であることは直感的には次のように表せます. 下図左はRGBによる色の3次元表現です. これを下に(0,0,0)を, 上に(255,255,255)を向けるように傾けると概ねHSL色空間の構造と一致します.

一つの色相, 二つの彩度, 三つの輝度

ここからがが本題です. 上記「hsl(120,50%,50%)」として色を表す方法は「CSS Color Module」仕様で定められたものですが, 実はこの他にもHSLを取り扱う仕様が二つ(全部で三つ)あります.

• CSS Color Module の HSL color values
  「hsl」関数による色をRGBでの色に変換します.
• Compositing and Blending の The mix-blend-mode property
  画像を重ねる(合成する)際に, 元画像にH/S/L値を注入するCSSプロパティです.
• SVGの feColorMatrix 要素の luminanceToAlpha
  RGB値から輝度を求めそれをアルファ値に変換します.

HSL値はそれぞれRGB値と相互変換可能なのですが, HSL値の基準のとり方によりRGB値に対応するHSL値が変化します. そのため, 上記の仕様で取得したHSL値をごちゃまぜにしてしまうとHSL値からRGB値を復元できなくなります.

以下は元となるRGB値から対応するHSL値を求める計算式です.

色相・彩度・輝度値の計算式の違い

feColorMatrix luminaceToAlphaによる輝度の計算式

もし, HSLを介した色の編集・合成を行った場合に出力結果が意図したものと異なる際は, このような仕様のちゃんぽん利用が含まれていないか確認してみましょう.