2種類の方式
状態:-
閲覧数:2,705
投稿日:2016-06-02
更新日:2016-06-19
一覧表
RGB最大値基準
・色相、彩度、明度の計算方法
・RGBとHSLの相互変換ツールと変換計算式
・CSS の色指定は、HSL を使っていこう
RGB最小値基準
・HLS色空間
基準 | 最小値基準 | 最大値基準 |
---|---|---|
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とHSLの相互変換ツールと変換計算式
・CSS の色指定は、HSL を使っていこう
RGB最小値基準
・HLS色空間
RGBからHSVのHを求める計算式。最大値Rの時、B-GしたりG-Bしたりしている理由
最大値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°足してプラスにできます
後者は最大値の場合の計算です。
両者の数式で加算している角度(オフセット)の違いは60°ではなくて180°
(ちょうど円周上の反対側になります)
RGBの最大値をオフセットとして見るか、最小から見るかで
色を見る角度も逆になるので引き算も逆になります。
円周状の空間の位置ですから
マイナスになっても360°足してプラスにできます
RGB最大値基準
色相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.長さの比率で角度60°を分割 / R≧B≧G
今後の方針
これ以上は理解できそうにないので、コードを正として場合分けしていく
→ RGB → 色相H 計算方式の違い