HSL → RGB 計算方式の違い

色変換

計算方式の違い

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

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

 閲覧数:551 投稿日: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

 閲覧数:544 投稿日: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

計算方式の違い具体例

 閲覧数:577 投稿日: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 計算方式の違い



週間人気ページランキング / 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード / 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー / インデックスカラー / パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新