HSL → RGB

色変換

2種類の計算式

 状態:-  閲覧数:887  投稿日:2016-05-16  更新日:2016-05-22
HLS色空間
CSS カラーモジュール Level 3

見た目が違うだけで、計算内容は同じ
・Hueに 度を使うか、0..1 を使うかによって、 60°,180° 等の値が 1/6,1/2 等となっているだけ
・Wikipediaの式にある絶対値を、 |x|=x (x≧0) ,-x(x<0) という場合分けをして展開すれば、CSSの式になる
・WikipediaにあるHueによる細かい場合分けは、R,G,Bが120°ずつずれたもの
・CSSでは、1/3(120°)ずらしたhを使って、その後の場合分けを共通にしている
HSLからRGBを求める計算式が複数ある理由。何が違うのでしょうか? どちらがより正確と言える?

HSL → RGB 変換式 / Wikipedia

 閲覧数:308 投稿日:2016-05-16 更新日:2016-05-20 

HSL → RGB 変換式


HSLの円柱モデルからの変換
・最大値




HSLの円柱モデルからの変換
・最小値




HSLの円錐モデルからの変換
・最大値




HSLの円錐モデルからの変換
・最小値




求めた最大値と最小値を、色相で場合分けした上で、RGBの各チャンネルに代入する
・色相が定義されない場合は、彩度=0であり、全てのチャンネルが明度や輝度に等しくなる(最大値=最小値)



HSL → RGB 計算例 Wikipedia / HSL 206.6, 89.7, 54.1 → RGB 33, 150, 243

 閲覧数:176 投稿日:2016-05-16 更新日:2016-05-20 

単位


HSL 206.6°, 89.7%, 54.1%
RGB 33/255, 150/255, 243/255


0.HSLの最大値最小値を求める


最大値Max = L+(S×(1-|2×L-1|))/2

2×L-1
・2×54.1/100=0.082

1-|2×L-1|
・1-0.082=0.918

(S×(1-|2×L-1|))/2
・(89.7/100×(1-|2×54.1/100-1|))/2
・(89.7/100×0.918)/2=0.411723

最大値Max = L+(S×(1-|2×L-1|))/2
・54.1/100+0.411723 =0.952723

最小値Min = L-(S×(1-|2×L-1|))/2

最小値Min = L-(S×(1-|2×L-1|))/2
・54.1/100-0.411723=0.129277


1.Rを求める


求めた最大値と最小値を、色相で場合分けした式に当てはめていく
・H206.6は、180≦ H<240に該当

R
・Min
・0.129277×255 = 32.965635 → 33
※誤差が発生 


1.Gを求める


求めた最大値と最小値を、色相で場合分けした式に当てはめていく
・H206.6は、180≦ H<240に該当

G
・Min + (Max-Min)×(240-H)/60
・(0.129277+ (0.952723- 0.129277)×(240-206.6)/60)×255=149.8537947 → 150
※誤差が発生 


1.Bを求める


求めた最大値と最小値を、色相で場合分けした式に当てはめていく
・H206.6は、180≦ H<240に該当

B
・Max
・0.952723×255 = 242.944365 → 243
※誤差が発生

HSL → RGB 変換式 / CSS Color Module Level 3

 閲覧数:178 投稿日:2016-05-20 更新日:2016-05-21 

仕様


W3C勧告候補
・平成15年5月14日

下記アルゴリズムでは
・三つの値(H,S,L)はすべて、割合0~1となるよう正規化されている

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



内容


l<=0.5
・m2=l*(s+1)

l>0.5
・m2=l+s-l*s

m1=l*2-m2


r
・hue.to.rgb(m1, m2, h+1/3)

g
・hue.to.rgb(m1, m2, h)

b
・hue.to.rgb(m1, m2, h-1/3)


hue.to.rgb

h<0
・h=h+1

h>1
・h=h-1

h*6<1
・RETURN m1+(m2-m1)*h*6

h*2<1
・RETURN m2

h*3<2
・RETURN m1+(m2-m1)*(2/3-h)*6

・RETURN m1

HSL → RGB 計算例 CSS Color Module Level 3 / HSL 206.6, 89.7, 54.1 → RGB 33, 150, 243

 閲覧数:174 投稿日:2016-05-20 更新日:2016-05-22 

単位


HSL 206.6°, 89.7%, 54.1%
RGB 33/255, 150/255, 243/255


0.m2を求める


l<=0.5
・m2=l*(s+1)

l>0.5
・m2=l+s-l*s

54.1/100>0.5
・m2=54.1/100+ 89.7/100-54.1/100*89.7/100≒0.952723


1.m1を求める


m1=l*2-m2
・m1=54.1/100*2-(54.1/100+ 89.7/100-54.1/100*89.7/100)≒0.129277


2.Rを求める


r
・hue.to.rgb(m1, m2, h+1/3)

hue.to.rgb

h<0
・h=h+1

h>1
・h=h-1

h*6<1
・RETURN m1+(m2-m1)*h*6

h*2<1
・RETURN m2

h*3<2
・RETURN m1+(m2-m1)*(2/3-h)*6

・RETURN m1

h=h+1/3
・h=206.6/360+1/3≒0.90722222222

h*6<1
h*2<1
h*3<2
・何れの条件にも当てはまらない

RETURN m1
・(54.1/100*2-(54.1/100+ 89.7/100-54.1/100*89.7/100))*255≒32.965635
→ 33


3.Gを求める


g
・hue.to.rgb(m1, m2, h)

h=h
・h=206.6/360≒0.57388888888

h*3<2
・RETURN m1+(m2-m1)*(2/3-h)*6
・RETURN (0.129277+(0.952723-0.129277)*(2/3-206.6/360)*6)*255≒149.8537947
→ 150
((54.1/100*2-(54.1/100+ 89.7/100-54.1/100*89.7/100))+((54.1/100+ 89.7/100-54.1/100*89.7/100)-(54.1/100*2-(54.1/100+ 89.7/100-54.1/100*89.7/100)))*(2/3-206.6/360)*6)*255≒149.8537947
→ 150


4.Bを求める


b
・hue.to.rgb(m1, m2, h-1/3)

h=h-1/3
・h=206.6/360-1/3≒0.24055555555

h*2<1
・RETURN m2
・RETURN m2=(54.1/100+ 89.7/100-54.1/100*89.7/100)*255≒242.944365
→ 243




Twitter検索結果。「HSL → RGB」に関する最新ツイート


色空間の範囲

#2196F3の互換性



週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新