HSLの定義

色相(Hue)


色味を角度で表している。反対色は180度ずれた位置にある。
以下のページにCanvasで描画する方法を示した。
CanvasによるHue描画

彩度(Saturation)

0に近づくほど純色から彩度が落ちて灰色になる

輝度(Lightness)

100%を白、0%を黒、50%を純色で表す。

RGB→HSL変換方法

RGBの各値を0～255、色相(H)が0～360度、彩度(S)が0～100、輝度(L)が0～100の場合以下の式でHSLに変換できます。（円柱モデル）
maxは引数の最大値を求める関数、minは引数の最小値を求める関数です。
MAX=max(R,G,B) MIN=min(R,G,B)

MAX==MIN

undefined

R==MAX

\displaystyle H=60\frac{G-B}{MAX-MIN}

G==MAX

\displaystyle H=60\frac{B-R}{MAX-MIN}+120

B==MAX

\displaystyle H=60\frac{R-G}{MAX-MIN}+240

L'

\displaystyle L'=\frac{MAX+MIN}{2}

L'≦127

\displaystyle S'=\frac{MAX-MIN}{MAX+MIN}

127<L'

\displaystyle S'=\frac{MAX-MIN}{510-MAX-MIN}

S

\displaystyle S=100S'

L

\displaystyle L=\frac{100}{255}L'

RGB→HSL変換例

スライダーでR,G,Bを入力すると色相、彩度、輝度が得られます。




HSL→RGB変換方法

RGBの各値を0～255、色相(H)が0～360度、彩度(S)が0～100、輝度(L)が0～100の場合以下の式でRGBに変換できます。（円柱モデル）

L<50

\displaystyle max=2.55 \times (L+L \frac{S}{100}) \displaystyle min=2.55 \times (L-L \frac{S}{100})

50≦L

\displaystyle max=2.55 \times (L+(100-L) \frac{S}{100}) \displaystyle min=2.55 \times (L-(100-L) \frac{S}{100})

0≦H<60

R=max \displaystyle G=min+(max-min)\frac{H}{60} B=min

60≦H<120

\displaystyle R=min+(max-min)\frac{120-H}{60} G=max B=min

120≦H<180

R=min G=max \displaystyle B=min+(max-min)\frac{H-120}{60}

180≦H<240

R=min \displaystyle G=min+(max-min)\frac{240-H}{60} B=max

240≦H<300

\displaystyle R=min+(max-min)\frac{H-240}{60} G=min B=max

300≦H<360

R=max G=min \displaystyle B=min+(max-min)\frac{360-H}{60}

HSL→RGB変換例

スライダーで色相、彩度、輝度を入力すると対応するRGB値が得られます。

色相
彩度
輝度
色相 彩度 輝度