title: "HSBカラー" description: "色相・彩度・明度によるHSBカラーモデルを学びます。RGBとの変換方法と、直感的な色彩表現を習得します。" chapter: "02-colors" order: 3 challenge: description: "カラーホイールを描いてみましょう。画面の中心からの角度を色相に、中心からの距離を彩度にマッピングして、虹色の円を作ってください。" hints:

"atan(y, x) で角度を求められます。結果は -PI ~ PI の範囲なので、0.0 ~ 1.0 に正規化しましょう。"
"角度の正規化: float hue = atan(uv.y, uv.x) / (2.0 * 3.14159) + 0.5;"
"彩度は length(uv) を使い、明度は 1.0 に固定します。hsb2rgb(vec3(hue, length(uv), 1.0)) でカラーホイールが完成です。"

HSBカラー

RGBの限界

RGB色空間は機械的には正確ですが、人間が直感的に色を扱うには向いていません。「もう少し明るい赤」を作りたいとき、RGBのどの値を変えればいいか迷ってしまいます。

HSBカラーモデル

HSB（Hue, Saturation, Brightness）は、人間の色の感覚に近いカラーモデルです。HSVとも呼ばれます。

| 成分 | 意味 | 範囲 | |------|------|------| | H (Hue) | 色相 — 色の種類 | 0.0 〜 1.0（360度を正規化） | | S (Saturation) | 彩度 — 色の鮮やかさ | 0.0（灰色）〜 1.0（鮮やか） | | B (Brightness) | 明度 — 色の明るさ | 0.0（黒）〜 1.0（最も明るい） |

色相を変えると色が変わり、彩度を変えると鮮やかさが変わり、明度を変えると明るさが変わります。直感的です。

HSB → RGB 変換関数

GLSLにはHSB変換が組み込まれていないため、自分で実装する必要があります：

vec3 hsb2rgb(vec3 c) {
    vec3 rgb = clamp(
        abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0,
        0.0,
        1.0
    );
    return c.z * mix(vec3(1.0), rgb, c.y);
}

この関数は vec3(H, S, B) を受け取って vec3(R, G, B) を返します。

色相のスペクトル

色相を 0.0 から 1.0 まで変化させると、虹のスペクトルが得られます：

0.0 — 赤
0.17 — 黄
0.33 — 緑
0.5 — シアン
0.67 — 青
0.83 — マゼンタ
1.0 — 赤（循環）

右のエディタでは、横方向に色相を変化させています。

HSBの活用例

虹色のグラデーション

vec3 color = hsb2rgb(vec3(uv.x, 1.0, 1.0));

時間で色相をアニメーション

float hue = fract(u_time * 0.1);
vec3 color = hsb2rgb(vec3(hue, 0.8, 0.9));

距離で色を変える

float d = length(uv);
vec3 color = hsb2rgb(vec3(d, 1.0, 1.0));

極座標と色相

画面の中心からの角度を色相にマッピングすると、カラーホイールが作れます。極座標（角度と距離）は atan 関数で求められます：

float angle = atan(uv.y, uv.x); // -PI ~ PI
float hue = angle / (2.0 * 3.14159) + 0.5; // 0.0 ~ 1.0

まとめ

HSBは色相・彩度・明度で色を直感的に制御
hsb2rgb 変換関数でRGBに変換してシェーダーで使う
色相は循環するので、アニメーションやパターンに最適
極座標と組み合わせてカラーホイールなどが作れる