RGB → 色相H 方式の違い | 「色変換(色)」カテゴリー

2種類の方式

　状態:- 　閲覧数:2,866 　投稿日:2016-06-02 　更新日:2016-06-19

一覧表

基準	最小値基準	最大値基準
R	60 × ((B - G) ÷ (MAX - MIN)) + 180	60 × ((G - B) ÷ (MAX - MIN))
G	60 × ((R - B) ÷ (MAX - MIN)) + 300	60 × ((B - R) ÷ (MAX - MIN)) + 120
B	60 × ((G - R) ÷ (MAX - MIN)) + 60	60 × ((R - G) ÷ (MAX - MIN)) + 240

RGB最大値基準
・色相、彩度、明度の計算方法
・RGBとHSLの相互変換ツールと変換計算式
・CSS の色指定は、HSL を使っていこう

RGB最小値基準
・HLS色空間

RGBからHSVのHを求める計算式。最大値Rの時、B-GしたりG-Bしたりしている理由

　閲覧数:506　投稿日:2016-06-10　更新日:2016-06-19

最大値Rの時

HLS色空間 - Wikipedia ではB-G
RGBとHSLの相互変換ツールと変換計算式ではG-B
・何れも同じ結果が求まる
・両者の違いは何？

疑問
・そもそも「B-G」「G-B」にはどのような意味がある？
・「B-G」計算結果は何を意味している？？？
・二番目のリンクではマイナスになる可能性もあると書かれているが、＋部分が60ずれていることと関係する？
・60ずれているとなぜ逆から引き算するの？
・Hは360°で表され60°周期でRGBの何れかの値が増減していくから？？

前者リンクはRGBいずれかが最小値の場合の計算で、
後者は最大値の場合の計算です。
両者の数式で加算している角度（オフセット）の違いは60°ではなくて180°
（ちょうど円周上の反対側になります）

RGBの最大値をオフセットとして見るか、最小から見るかで
色を見る角度も逆になるので引き算も逆になります。

円周状の空間の位置ですから
マイナスになっても360°足してプラスにできます

RGB最大値基準

　閲覧数:525　投稿日:2016-06-19　更新日:2016-06-19

色相H範囲／ 0°～360°

Rが最大値の場合
・色相 H = 60 × ((G - B) ÷ (MAX - MIN))

Gが最大値の場合
・色相 H = 60 × ((B - R) ÷ (MAX - MIN)) +120

Bが最大値の場合
・色相 H = 60 × ((R - G) ÷ (MAX - MIN)) +240

色相H範囲／ 0～1

上記を360°で割る

Rが最大値の場合
・H = ((G - B) / (MAX - MIN)) / 6;

Gが最大値の場合
・H = ((B - G) / (MAX - MIN)) / 6 + 1 / 3;

Bが最大値の場合
・H = ((R - G) / (MAX - MIN)) / 6 + 2 / 3;

function _calcHueNorm(r, g, b) {
  var color_arr = [r, g, b];
  var H = 0.0;

  // 等しいとき
  if ((R == G) && (G == B)) {
    H = 0.0;
  } else if ((R >= G) && (R >= B)) {
    // R最大の場合
    H = ((G - B) / (MAX - MIN)) / 6;
  } else if ((G >= R) && (G >= B)) {
    // G最大の場合
    H = ((B - G) / (MAX - MIN)) / 6 + 1 / 3;
  } else if ((B >= R) && (B >= G)) {
    // B最大の場合
    H = ((R - G) / (MAX - MIN)) / 6 + 2 / 3;
  }

  // 求めたhueが 0以下なら1足す
  if (H < 0) {
    H += 1;
  }
  return H;
}

function _calcHue(r, g, b) {
  return Math.round(this._calcHueNorm(r, g, b) * 360);
}

Gが最大値の場合

B-G or B-R
・B-GをB-Rへ変更しても結果は同じ
・理由不明

B-GとB-Rの違いは、どこを基準とした長さの比率を求めるか
・それぞれ結果は異なると思うが、そうではない？

・考え方A.長さの比率で角度６０°を分割／ R≧B≧G

今後の方針

これ以上は理解できそうにないので、コードを正として場合分けしていく
→ RGB → 色相H 計算方式の違い

RGB → 色相H … 最大値基準 × 図形の考え方

RGB → HSL 勘違いしていたかも

順位	ページタイトル抜粋	％
1	RGB → 色相H 方式の違い	87
2	RGB → 色相H 計算方式の違い	81
3	HSL → RGB 計算方式の違い	69
4	HSV → RGB 計算方式の違い	69
5	RGB → 彩度S 計算方式の違い	63
6	RGB → HSL	50
7	HSL → RGB	50
8	RGB → 色相H … 最大値基準 × 図形の考え方	48
9	RGB → 色相H … 最小値基準 × 図形の考え方	48
10	RGB → HSL 勘違いしていたかも	47
11	RGB → 色相H … 最大値基準 × 増減特性の考え方	45
12	RGB → HSL 目次	44
13	RGB → HSL を色モデルで考える	40
14	RGB ⇔ HSV	38
15	RGB ⇔ Lab	33
16	RGBの種類／ビットカラー	33
17	RGB	33
18	RGB → HSL ／ RGB → HSV	33
19	HSLとHSVの違い	32
20	「RGB同階調における生成可能色数」の求め方／ 2^(3×ビット数)	28
	2025/6/02 11:50 更新

順位	ページタイトル抜粋	アクセス数
1	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	10
1	「Chrome拡張機能」開発中に遭遇したエラー \| Chrome 拡張機能	10
2	FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 \| Font Awesome(フォント)	8
3	「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 \| Chrome 拡張機能	7
3	「東京都」のカラーコード取得は難しい \| カラーコード(色)	7
3	鉄道会社毎のカラーコード \| カラーコード(色)	7
4	「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 \| カラーコード(色)	4
4	RGB ⇔ Lab \| 色変換(色)	4
4	キャラクター無料着せ替えジェネレーター Rinmaru Games ／オンラインサービス \| イラスト素材(デザイン)	4
5	色モデルイメージ図 \| 色変換(色)	3
5	「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 \| Google Chrome(ブラウザ)	3
5	「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」	3
5	効果を打ち消すスタイルシート \| CSS	3
5	ICCプロファイル \| カラーマネージメント(色)	3
6	RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB	2
6	黒体／色温度／ D65（6500K）／ D50（5000K）／ K \| 色	2
6	「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される \| CSSトラブル対応(CSS)	2
6	Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない \| Google Chrome(ブラウザ)	2
6	Design 0	2
6	utf-8ではなく、UTF-8 \| HTML	2
	2025/6/2 1:01 更新