色の明るさ比較 (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 種全てを表示し、ランキングがどう食い違うか比較できます。
—
明るさ指標
HSL Lightness (L)
59.8
(max RGB + min RGB) / 2。純黄と純青がともに 50%。知覚と無関係。
HSV Value (V)
96.5
最大チャネル。純赤・緑・青がいずれも 100%。HSL L より更に非知覚的。
WCAG Relative Luminance (Y · LRV)
23.5
ガンマデコード線形輝度: 0.2126 R + 0.7152 G + 0.0722 B。WCAG コントラスト比が使用。LRV × 100 と等価。
CIE Lab L* (perceptual lightness)
55.6
CIE 1976 L* — 知覚均等な明度。等間隔の L* が人間の眼に等間隔に見える。Y = 18% → L* = 50。
Rec. 709 Luma (Y′)
48.3
ガンマエンコード sRGB 上の Rec. 709 ルーマ(Y′)。放送 TV の近似。HSL L と WCAG Y の中間。
HSP Perceived Brightness
52.4
Darel Rex Finley の HSP: √(0.299R² + 0.587G² + 0.114B²)。素朴平均より良く CIE Lab より速い。
Naïve (R+G+B)/3
56.9
(R + G + B) / 3。緑を青と同等に扱う。誤った基準例として含めるのみ。
必読
指標が大きく食い違う ─ 特に HSL L と Lab L* / WCAG Y が ─ なら、ユーザーが意外に思う色選択です。知覚判断は Lab L*(または OKLCH L)、アクセシビリティは WCAG Y を信用してください。
厄介な例示ペア
使い方
- 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 の完全変換なしで素朴平均より良い明るさが欲しいときに広く使われます。
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00