実践的なカラーモデルガイド
HSB・HSL・HSVの違いと正しい使い分け
3つの名称は同じ色相環を使いますが、すべてが同じ座標を表すわけではありません。第3成分の違い、同じパーセントでも色が変わる理由、選んだ色を再現可能なWeb値へ移す方法を整理します。
HSB HSL HSV 違い
HSB、HSV、HSLは同じですか？
HSBとHSVは通常、RGBを変換した同じモデルを指し、BrightnessとValueが第3成分の別名です。HSLは別の変換です。HSLはLightness 50%で完全に彩度の高い純色になり、100%で白になります。HSBまたはHSVはBrightness 100%で純色になり、彩度を0%まで下げたときに白になります。数値だけを渡さず、必ずモデル名を添えてください。
最初に押さえる要点
- HSBとHSVは、アプリ、範囲、色プロファイル、丸め方を確認してから同じモデルとして扱います。
- HSBの彩度と明るさを、HSLの彩度と明度の欄へそのまま貼り付けてはいけません。
- 視覚的なピッカー調整にはHSB/HSV、CSS記法と中間点を中心にした明暗調整にはHSLが便利です。
- 受け渡しには正確なHEXまたはRGBも保存し、コントラストと知覚的な色差は専用の方法で評価します。
同じ色相でも役割が異なる3つの表現
各モデルは、画面色を別の判断に使いやすいよう並べ替えています。次の基準値を確認すると、ツール間で数値を移す前に違いを把握できます。
| モデル | 第3成分 | 基準になる値 | 代表的な用途 |
|---|---|---|---|
| HSB / HSV | Brightness / Value | S 100%、B/V 100%で純色、B/V 0%で黒 | カラーピッカー、画像編集、色相・鮮やかさ・暗さの視覚調整 |
| HSL | Lightness | S 100%、L 50%で純色、L 0%で黒、L 100%で白 | CSSのhsl()と、中間点を中心にした明るい・暗い派生色 |
| HEX / RGB | 赤・緑・青のチャンネル | 変換後の明示的なsRGBチャンネル値 | Web実装、デザイントークン、再現可能な引き渡し記録 |
HSLでは中間点と両端がどう変わるか
HSLは色相環を保ちながら、Lightness 0%を黒、100%を白、完全に彩度の高い純色を50%に置きます。中間点より上では白へ、下では黒へ移動します。この対称性は、基準色の周囲でティントとシェードを考えるときに便利です。同時に、HSBのBrightness 100%をHSLのLightness 100%へ置き換えられない理由でもあります。前者は鮮やかな赤や青になれますが、後者は色相や彩度にかかわらず白です。数字の位置ではなく、各軸がどの端点を持つかを見る必要があります。
彩度の意味もこの幾何学に合わせて変わります。HSLでは明度が白または黒に近いと、彩度欄が100%でも実際に使えるクロマは小さくなります。HSVでは彩度をValueとの関係で計算します。W3CのCSS Color仕様は、hsl()をsRGB色を作る方法として定義し、ブラウザが使う変換手順を公開しています。一方、標準のhsv()やhsb()というCSS色関数は定義していません。したがってHSBピッカーで決めた色は、HEX、RGB、HSLなどブラウザが受け取れる形式へ変換し、結果を確認してから実装します。
ピッカーからコードへ曖昧さなく色を渡す方法
最初にモデル名、使用アプリ、色プロファイルまたはWeb上の前提、正確な3成分を記録します。次に、結果の6桁HEXまたはRGBを保存します。この最終チャンネル値が最も確実な引き渡しになります。別のツールがHSBのパーセントをHSLとして解釈する事故を防げるからです。CSSでhsl()を使いたい場合も、承認済みRGBから変換してブラウザ出力を照合し、欄の位置だけで値を移さないでください。再現に必要な精度は保ちつつ、小数桁を増やせば未調整の画面や圧縮画像が正確になるとは主張しません。
最後に、それぞれの値が支えられる判断を明確にします。HSBやHSLは編集方向を説明できます。HEXやRGBはデジタルトークンを固定できます。Delta Eは指定した式の下で2色の差を要約します。WCAGコントラストは前景と背景の相対輝度と定義済み基準を使います。これらは自動的に代替できません。信頼できる記録には、元の色、モデル、変換値、表示条件、評価方法、最終ルールの所有者、次の行動を含めます。数値を残すだけでなく、その数値が何を証明し、何を証明しないかまで共有することが重要です。
モデルを混同しない5ステップ
ピッカー、スクリーンショット、デザインファイルからコードや共有パレットへ色を移すときに使える手順です。
1. モデル名を書く
ラベルのない3数値ではなく、HSB、HSV、HSL、RGBなど正確なモデルを値の横に記録します。
2. 元データを残す
承認済みトークンや原本を保存し、採色、変換、目視作成のどれで得た色かを明記します。
3. RGBかHEXを保存
別アプリがモデルを推測せず同じsRGBチャンネルを再現できる変換後の値を残します。
4. 実際の文脈で確認
本番の大きさ、テーマ、周囲色、状態、対象画面で色を表示してから承認します。
5. 正しい評価を行う
コントラスト、Delta E、印刷測定、製品ルールなど、その判断を所有する方法を使います。
Smith · W3C · Adobe
一次資料とプラットフォーム定義
元のHSV/HSL変換、現在のHSBピッカー、ブラウザのHSL構文、別系統のコントラスト基準を確認できる資料です。
モデルを比べて、実際の色で確かめる
HSB・HSV・HSLのよくある質問
HSBとHSVは常に同一ですか？
通常はBrightnessとValueを別名にした同じモデルです。ただし、アプリの説明、範囲、プロファイル、丸めを確認してから厳密に値を移してください。
HSBのBrightness 100%とHSLのLightness 100%が違うのはなぜですか？
HSBはBrightness 100%で完全に彩度の高い純色を表せます。HSLはLightness 100%を白に固定し、純色を50%に置きます。
CSSでHSBやHSVを直接使えますか？
CSS Colorにはhsl()がありますが、標準のhsb()やhsv()はありません。選んだ色をHEX、RGB、HSLなど対応形式へ変換します。
カラーピッカーにはどのモデルが最適ですか？
色相帯と彩度・明るさの面にはHSB/HSVが一般的です。CSS派生色にはHSLが読みやすい場合があります。用途と正確な出力保存を優先してください。
HSBやHSLの同じ明るさなら同じコントラストになりますか？
なりません。どちらの成分もWCAGコントラスト比ではありません。実際の前景と背景を相対輝度の方法で評価してください。