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

Webデザイン

カテゴリー: 色変換  閲覧数:716 配信日:2016-06-27 09:47


計算手順


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

週間人気ページランキング / 9-30 → 10-6
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 11
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 10
3 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 7
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 6
4 鉄道会社毎のカラーコード | カラーコード(色) 6
4 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 6
4 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 6
5 16進数カラーコード / 2進数 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 3
6 Design 0 3
6 色モデルイメージ図 | 色変換(色) 3
6 ログイン 3
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
6 カラーコード / 色コード | カラーコード(色) 3
6 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
7 「bgcolor」「background-color」「background」の違い | CSS 2
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 2
7 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 2
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
2025/10/7 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2025-10-6
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8800
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4583
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3769
4 Design 0 3768
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2752
6 RGBの種類 / ビットカラー | RGB(色) 2693
7 「bgcolor」「background-color」「background」の違い | CSS 2034
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1937
9 16進数カラーコード / 2進数 1861
10 コズミックブルーが何色か分からない | 色 1836
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1685
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1675
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1606
14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1517
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1499
16 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1427
17 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1370
18 「東京都」のカラーコード取得は難しい | 色 1291
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1188
20 HSLとHSVの違い | 色変換(色) 1158
2025/10/7 1:01 更新