色の明るさ比較 (HSL vs Lab L* vs WCAG vs HSP)
UI ツールが言う色の「明度」「明るさ」は毎回意味が異なります。HSL L は RGB 最大値と最小値の中点 — 純黄 #ffff00 と純青 #0000ff の双方が L=50% と測定されます(前者は眩しく後者は画面でほぼ黒なのに)。HSV V はさらに悪く最大値だけを見るため純赤・緑・青がいずれも V=100%。WCAG Y(相対輝度)は sRGB をガンマデコードして線形光に直し視感度(0.2126 R + 0.7152 G + 0.0722 B)で重み付けします — 黄色は真に明るく、青は真に暗いと出ます。CIE Lab L* はその物理輝度に立方根の知覚曲線を被せて L* の等間隔が人間の眼に等間隔に見えるようにしています。Rec. 709 ルーマは放送向けの近似(ガンマエンコード、WCAG と同重み)。HSP は Darel Rex Finley の心理物理近似式。本ツールは 1 色または 1 組について 7 種全てを表示し、ランキングがどう食い違うか比較できます。
使い方
- 1 色を選ぶと 7 種の明るさ指標が値に応じた水平バーで表示されます。
- ペア比較モードに切り替えて 2 つ目の色を入れると、各指標の差が表示されます — パレットがちぐはぐな理由の診断に有用。
- 例示ペアをクリックすると意図的に厄介な組み合わせがロードされます(HSL L 同じ黄/青、HSV V 同じ赤/緑など)。
- レポートをコピーしてデザインレビューに貼り付けられます。
よくある質問
- 実際にはどの指標を使えばよい?
- 目的次第です。アクセシビリティのコントラスト → WCAG Y / LRV(コントラスト比公式が使う)。知覚均等なパレットやグラデーション → CIE Lab L* または OKLCH L。放送映像 → Rec. 709 ルーマ。HSL L と HSV V はカラーピッカーの操作用ハンドルとして便利ですが「実際にどれだけ明るく見えるか」の情報はほぼゼロです。(R+G+B)/3 は使わないでください — どれほど誤った順位を出すかを見せるためだけに含めています。
- なぜ黄と青の HSL L が共に 50% なのですか?
- HSL の定義は L = (max RGB + min RGB) / 2。純黄 #ffff00 のチャネルは (255, 255, 0) → (255 + 0) / 2 = 50%。純青 #0000ff は (0, 0, 255) → (255 + 0) / 2 = 50%。HSL は人間の眼が緑や黄に青の 10 倍ほど敏感である事実を完全に無視します。RGB 立方体上の幾何構成にすぎず、知覚モデルではありません。
- WCAG Y と Lab L* の違いは?
- WCAG Y は明所視輝度 — 校正された輝度計でレンダリングされた画素を測った値を 0–1 に正規化(建築では LRV × 100 で報告)。Lab L* はその輝度に L* = 116 × f(Y/Yn) − 16 を適用したもので、f は知覚に合わせた立方根関数。よって Y = 50% は L* ≈ 76 (知覚的に黒よりずっと白に近い)、Y = 18% は L* = 50(中間グレー)になります。
- HSP とは何ですか?なぜ含めるのですか?
- HSP(色相/彩度/知覚明度)は Darel Rex Finley のモデルで、ガンマエンコード RGB の上で P = √(0.299R² + 0.587G² + 0.114B²) として知覚明度を近似します。古典的 Y′ と同じ Rec. 601 重みですが算術平均でなくユークリッド RMS を取ります。標準化されてはいませんが、sRGB→Lab の完全変換なしで素朴平均より良い明るさが欲しいときに広く使われます。
このテーマのガイド
関連ツール
露点・湿度計算機
マグヌス式で気温と相対湿度から露点と絶対湿度を計算し、°C・°Fで快適度を表示。
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー ミキサー
2 色を RGB・HSL・CIELAB 空間で補間。11 段階の中間グラデーション ストリップ表示。
CSS color-mix() プレビュー (補間空間の比較)
モダン CSS の color-mix() 関数が補間空間 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) によって 2 色をどう異なる結果で混ぜるかを並べて比較 — ライブスウォッチ、計算済み hex、各空間のフルグラデーション、コピー可能な CSS 付き。
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
HSL カラーピッカー
色相・彩度・明度・アルファのスライダーで色を調整 — HEX・RGB・HSL・Tailwind 任意値をコピー。