HSL → RGB 計算方式の違い

色変換

計算方式の違い

 状態:-  閲覧数:816  投稿日:2016-06-26  更新日:2016-06-28
1.色相H0°~360°、輝度L0~100(固定)
2.色相H0~1 / CSS Color Module Level 3

方式1.色相H0°~360°、輝度L0~100(固定)

 閲覧数:149 投稿日:2016-06-26 更新日:2016-06-28 

計算手順


1-1.RGB最大値 と RGB最小値 を求める
1-2.RGB値 を求める


1-1.RGB最大値 と RGB最小値 を求める


輝度Lが49以下の場合
最大値 MAX = 2.55 × (L + L × (S ÷ 100))
最小値 MIN = 2.55 × (L - L × (S ÷ 100))
輝度Lが50以上の場合
最大値 MAX = 2.55 × (L + (100 - L) × (S ÷ 100))
最小値 MIN = 2.55 × (L - (100 - L) × (S ÷ 100))


1-2.RGB値 を求める


Hが0~60未満の場合
・R = MAX
・G = (H ÷ 60) × (MAX - MIN) + MIN
・B = MIN

Hが60以上~120未満の場合
・R = ((120 - H) ÷ 60) × (MAX - MIN) + MIN
・G = MAX
・B = MIN

Hが120以上~180未満の場合
・R = MIN
・G = MAX
・B = ((H - 120) ÷ 60) × (MAX - MIN) + MIN

Hが180以上~240未満の場合
・R = MIN
・G = ((240 - H) ÷ 60) × (MAX - MIN) + MIN
・B = MAX

Hが240以上~300未満の場合
・R = ((H - 240) ÷ 60) × (MAX - MIN) + MIN
・G = MIN
・B = MAX

Hが300以上~360未満の場合
・R = MAX
・G = MIN
・B = ((360 - H) ÷ 60) × (MAX - MIN) + MIN


手動計算例


RGB 33, 150, 243
HSL 206.6°, 89.7%, 54.1%
L=54.1
S=89.7

RGB最大値 MAX = 2.55 × (L + (100 - L) × (S ÷ 100))
RGB最大値 MAX = 2.55 × (54.1 + (100 - 54.1) × (89.7 ÷ 100)) = 242.944365 ≒ 243

RGB最小値 MIN = 2.55 × (L - (100 - L) × (S ÷ 100))
RGB最小値 MIN = 2.55 × (54.1 - (100 - 54.1) × (89.7 ÷ 100)) = 32.965635 ≒ 33

方式2.色相H0~1 / CSS Color Module Level 3

 閲覧数:154 投稿日:2016-06-27 更新日:2016-07-11 

計算手順


2-1.RGB最小値m1、RGB最大値m2 を求める

2-2.RGB値 を求める


手動計算例


RGB 33, 150, 243
HSL 206.6°, 89.7%, 54.1%
RGB最小値m1
RGB最大値m2
function hsl2rgb(h_deg, s_percent, l_percent){
   var h_norm = h_deg / 360;
   var s_norm = s_percent / 100;
   var l_norm = l_percent / 100;

   var m2;
   if (l_norm < 0.5) {
     m2 = l_norm * (s_norm + 1);
   } else {
     m2 = l_norm + s_norm - l_norm * s_norm;
   }

   var m1 = l_norm * 2 - m2;

   var r_norm = this._hsl2rgb(m1, m2, h_norm + 1 / 3);
   var g_norm = this._hsl2rgb(m1, m2, h_norm);
   var b_norm = this._hsl2rgb(m1, m2, h_norm - 1 / 3);

   this.r_ = parseInt(Math.round(r_norm * 255));
   this.g_ = parseInt(Math.round(g_norm * 255));
   this.b_ = parseInt(Math.round(b_norm * 255));
   console.log('hsl2rgb; ' + this.r_ +' '+ this.g_  + ' '+ this.b_);
 }

function  _hsl2rgb(m1, m2, h) {
   var _h = h;
   if (_h < 0) {
     _h = _h + 1;
   }
   if (_h > 1) {
     _h = _h - 1;
   }

   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;
 }


hsl2rgb(206.6, 89.7, 54.1);

//m2; 0.9527230000000001
//m1; 0.12927699999999998
//hsl2rgb; 33 150 243



検証


RGB最小値
・255 × m1 = 255 × 0.12927699999999998 = 32.965635 ≒ 33

RGB最大値
・255 × m2 = 255 × 0.9527230000000001 = 242.944365 ≒ 243

計算方式の違い具体例

 閲覧数:205 投稿日:2016-06-27 更新日:2016-07-11 

方式1


色相H0°~360°、輝度L0~100(固定)
コード 引数 内容 戻り値
JS なし RGB ⇔ HSL 1 なし
JS プリミティブ RGB ⇔ HSL 2 オブジェクト


方式2


色相H0~1 / CSS Color Module Level 3
コード 引数 内容 戻り値
JS プリミティブ RGB ⇔ HSL 3 なし
JS オブジェクト HEX ⇔ RBGA ⇔ CMYK ⇔ HSV ⇔ HSL ⇔ LAB オブジェクト


方式3


色相H0~1 / for文ループで条件分岐
・途中でRGBを配列として保持
コード 引数 内容 戻り値
JS プリミティブ 16進数カラーコード → RGB / HSL 2 プリミティブ
JS 配列 HEX ⇔ RBGA ⇔ CMYK ⇔ XYZ ⇔ HSV ⇔ HSL ⇔ LAB 配列
JS なし Chroma.js 配列


方式4


色相H0°~360°、方式1の変形
コード 引数 内容 戻り値
JS なし 表色系の相互変換 なし


理解できない

コード 引数 内容 戻り値
JS オブジェクト colorPicker and colors オブジェクト


最終的に


HSL → RGB 参考にするなら
・「RGB ⇔ HSL 3」が「CSS Color Module Level 3」記載内容に最も近いため、信頼できると思われ
※コード内容云々ではなく、出典の信頼度が最も高い、という意味

本来の意味で考えれば
・「RGB ⇔ HSL 2」が基本的な考え方を最も忠実に再現しているかも
・内容未検証


RGB → HSL / RGB → HSV

HSV → RGB 計算方式の違い



週間人気ページランキング / 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 更新