RGB → 色相H … 最大値基準 × 図形の考え方 | 「色変換(色)」カテゴリー

正六面体 → 正六角形

　状態:- 　閲覧数:3,643 　投稿日:2016-05-28 　更新日:2016-06-18

「正六面体で構成されるRGB」を、「HSL水平断面図である正六角形」へ再構成

比較一覧表

-	RGB	HSL断面図
モデル	正六面体	正六角形
頂点数	8	6

正六面体RGB

　閲覧数:587　投稿日:2016-05-28　更新日:2016-05-29

Red
・(255,0,0)

Green
・(0,255,0)

Blue
・(0,0,255)

黒
・(0,0,0)

白
・(255,255,255)

イエロー
・(255,255,0)

シアン
・(0,255,255)

ピンク
・(255,0,255)

「正六面体で構成されるRGB」を、「HSL水平断面図である正六角形」へ再構成

　閲覧数:614　投稿日:2016-05-28　更新日:2016-05-29

黒(0,0,0)
白(255,255,255)
・六角形の中心へ

Red(255,0,0)
・H=0°へ

Green(0,255,0)
・H=120°へ

Blue(0,0,255)
・H=240°へ

イエロー(255,255,0)
・H=60°へ

シアン(0,255,255)
・H=180°へ

ピンク(255,0,255)
・H=300°へ

H	色	R	G	B
0°	Red	255	0	0
60°	イエロー	255	255	0
120°	Green	0	255	0
180°	シアン	0	255	255
240°	Blue	0	0	255
300°	ピンク	255	0	255

RGB各成分が最大値となるのは？

　閲覧数:671　投稿日:2016-05-29　更新日:2016-06-03

RGB各成分を下記角度で配置

-	計算式	範囲
R	0°±60°	-60(300)°～60°
G	120°±60°	60°～180°
R	240°±60°	180°～300°

Rが最大値となるH例

Gが最大値となるH例

Bが最大値となるH例

「HSL水平断面図である正六角形」をRGB各成分の大小関係で６エリアへ分類

　閲覧数:631　投稿日:2016-05-30　更新日:2016-06-03

「HSL正六角形」をRGBの大小関係で６エリアへ分類

RGB各成分の最大値基準で並べ替え

-	計算式	範囲
R≧G≧B	0°+60°	0°～60°
R≧B≧G	0(360)°-60°	-60(300)°～0°
G≧B≧R	120°+60°	120°～180°
G≧R≧B	120°-60°	60°～120°
B≧R≧G	240°+60°	240°～300°
B≧G≧R	240°-60°	180°～240°

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

　閲覧数:909　投稿日:2016-05-30　更新日:2016-06-01

R≧G≧B

補助線(与えられた図形にはないが証明のために便宜的に線を描き加える)
→ 三辺の長さが等しい正三角形(黄色い正三角形)

Rが最大値のとき

60 × ((G - B) ÷ (MAX - MIN))

R≧G≧Bでは？

60 × (角度分の長さ ÷ 60°分の長さ)

60 × ((G - B) ÷ (R - B))

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

　閲覧数:657　投稿日:2016-05-30　更新日:2016-06-01

R≧B≧G

補助線(与えられた図形にはないが証明のために便宜的に線を描き加える)
→ 三辺の長さが等しい正三角形(黄色い正三角形)

R≧B≧Gでは？

60 × (角度分の長さ ÷ 60°分の長さ)

60 × ((B - G) ÷ (R - G))

Rが最大値のときで統一させるためには？
・「R≧B≧G」を「R≧G≧B」へ合わせればよい

(B - G) → (G - B)

60 × ((G - B) ÷ (R - G))+ 360

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

結論

Rが最大値のとき

60 × ((G - B) ÷ (MAX - MIN))

※結果がマイナスとなる場合は＋360

エリア毎の計算式／最大値基準

　閲覧数:575　投稿日:2016-06-02　更新日:2016-06-03

R・G・Bのうち、最も大きな値をMAX、最も小さな値をMIN

Rが最大値の場合

色相 H = 60 × ((G - B) ÷ (MAX - MIN))

Gが最大値の場合

色相 H = 60 × ((B - R) ÷ (MAX - MIN)) +120°

Bが最大値の場合

色相 H = 60 × ((R - G) ÷ (MAX - MIN)) +240°

3つとも同じ値の場合

色相 H = 0

求められた色相がマイナス値だった場合
・360を加算して0～360の範囲に収める

・色相、彩度、明度の計算方法

RGB → HSL を色モデルで考える

RGB → 色相H 方式の違い

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

順位	ページタイトル抜粋	アクセス数
1	「Chrome拡張機能」開発中に遭遇したエラー \| Chrome 拡張機能	15
2	「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 \| Google Chrome(ブラウザ)	14
2	RGB ⇔ Lab \| 色変換(色)	14
3	「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 \| Chrome 拡張機能	13
4	金融機関ブランドカラー／コーポレートカラー \| カラーコード(色)	10
5	鉄道会社毎のカラーコード \| カラーコード(色)	9
6	RGBの種類／ビットカラー \| RGB(色)	7
6	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	7
7	「東京都」のカラーコード取得は難しい \| カラーコード(色)	6
8	「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 \| 画像	5
9	血の色／ #b30000 ／ #360800 ／ #ff0000 \| カラーコード(色)	4
9	「bgcolor」「background-color」「background」の違い \| CSS	4
9	Design 0	4
9	「マウスオーバー」「ロールオーバー」「ホバー」の違い \| CSS	4
9	ログイン	4
9	色モデルイメージ図 \| 色変換(色)	4
9	空間的 / 可逆な JPEG ファイルの読み込みは実行されません \| Photoshop CS3(Photoshop)	4
10	自由変形ツール \| Illustrator CS3(Illustrator)	3
10	RGB → 色相H … 最大値基準 × 図形の考え方 \| 色変換(色)	3
10	デザイン変更 \| Webデザイン(デザイン)	3
	2025/7/13 1:01 更新