RGB vs HSL: デザインで使うならどっち？
Web制作で色を扱う際、RGBとHSLのどちらを使うべきか迷いませんか。それぞれの特徴を整理しました。
最近のブラウザは rgb()、hex、hsl() すべて対応しています。しかし、これらは全く異なる考え方に基づいています。
RGB はハードウェア寄り。画面のピクセルがどのように光るかを直接表現します。
HSL は人間寄り。私たちが色をどのように認識するかをベースにしています。
コンポーネントベースのUI構築時、ここを間違えると後で苦労します。
RGBとHSLの仕組み
RGB: 画面が理解する言語
RGB (Red, Green, Blue) は加法混色。色が「どう見えるか」ではなく、光がどのように混ざるかを表します。
デジタルディスプレイ:
- →ピクセルはR/G/Bの3つのサブピクセルで構成
- →数値はLEDの明るさを直接制御
- →ブラウザもGPUもRGBで通信
エンジニアリング視点ではRGBはディスプレイのネイティブ言語です。しかし人間には直感的ではありません。RGBの数値を見ても、どのような色かわかりません。
HSL: 人間が理解する言語
HSL (Hue, Saturation, Lightness) は色相・彩度・明度。ハードウェアがどのように光るかよりも、人間がどのように感じるかに重點を置きます。
色相 (H)
色の種類
彩度 (S)
鮮やかさ
明度 (L)
明るさ
HSLの目標は色の調整を「暗算不要」にすること。これがデザインシステムやUI状態管理に適する理由です。
HSLが主流である理由
1. 調整の容易さ
RGBの場合
色を暗くするにはR/G/Bをすべて調整する必要があります。試行錯誤になります。
HSLの場合
「暗くしたい」＝Lを下げる。色相と彩度はそのまま。これで完了です。
デザイン意図とコード変更が1対1で対応します。
2. CSS変数と相性がいい
HSLの真価は、変数ベースのカラーシステムで発揮されます。
:root {
--primary-h: 220;
--primary-s: 80%;
--button-bg: hsl(var(--primary-h), var(--primary-s), 50%);
--button-hover: hsl(var(--primary-h), var(--primary-s), 40%);
}ポイント:
ホバー状態で色を再選択する必要がありません。同じ色の明度を変えるだけです。RGBではこうはいきません。
3. アクセシビリティ対応が楽
コントラスト比は結局、明るさの問題です。
HSLなら、色を計算し直さなくてもLを少し調整するだけでコントラスト要件を満たせます。
ダークモードの実装も楽になります。詳細は アクセシビリティガイド をどうぞ。
RGBを使用する場面
HSLが全てではありません。
低レベルグラフィックス
RGBが適しているケース:
- →WebGL、Canvas、シェーダー
- →レガシーシステム
- →ハードウェアと直接通信する場面
レガシープロジェクトの移行？HEX to RGB 変換ツール もどうぞ。
画像処理
写真のピクセルレベルで操作するときは、RGBの方が直接的に制御できます。
HSL vs RGB: 比較
| 特徴 | RGB / RGBA | HSL / HSLA |
|---|---|---|
| 最適用途 | スクリーン、ピクセル、ハードウェア | UI、デザインシステム |
| 可読性 | 低い (色の推測が困難) | 高い (イメージしやすい) |
| 調整のしやすさ | 困難 (計算が必要) | 容易 (1つの値を変えるだけ) |
| セマンティックスケーリング | 乏しい | 非常に優れている |
| CSS構文 | rgb(255,0,0) | hsl(0,100%,50%) |
ブラウザ内部ではどうなってる？
CSSで hsl() と書いても、ブラウザは最終的にこうします:
- 1計算済みスタイルのフェーズでHSL→RGBに変換
- 2GPUシェーダーに渡してレンダリング
結論:
HSLを使ってもパフォーマンスは落ちません。変換コストはマイクロ秒レベル。気にする必要がないです。
HSLの欠点
HSLの罠
実はHSLの「明度」と、人間が感じる明るさは一致しません。
例えば hsl(60,100%,50%) (黄色) と hsl(240,100%,50%) (青) は同じL値ですが、黄色の方が圧倒的に明るく見えます。
LCH / OKLCH って？
この問題を解決するために、新しいモデルが登場してます:
LCH
Lightness, Chroma, Hue
OKLCH
最新の視覚標準
これらは数値の変化が実際の視覚的な変化と一致します。将来的にはこっちが主流になるかも。
色域の話: P3 vs sRGB
従来の rgb() と hsl() はsRGB色空間を使ってます。
でも最近はP3ディスプレイが増えてます。CSS Color Level 4ではこう書けます:
color(display-p3 1 0 0)HSLはシステムデザインに向いてますが、最大限度の鮮やかさが必要なら色域の制限を知っておく必要があります。
どれを使う？
| 役割 | 推奨モデル | 理由 |
|---|---|---|
| UIデザイナー | HSL | 迅速な類似/コントラスト関係の構築 |
| フロントエンドエンジニア | HSL + CSS変数 | 動的なテーマと状態の生成 |
| グラフィックス / ゲーム開発 | RGB | ハードウェアの直接読み込み |
| フォトグラファー | Lab / LCH | 視覚的な一貫性 |
まとめ
RGBは転送プロトコル。
HSLはデザイン言語。
今時のWeb開発では「どちらかを選ぶ」じゃなくて、用途に応じて使い分けるのが成熟したアプローチです。
よくある質問
なぜCSSではHSLが推奨されるの？
開発者にとって直感的だからです。RGBトリプレットを再計算しなくても、明度や彩度を変えるだけでバリエーションを作れます。デザインシステムの保守が楽になります。
ブラウザ対応は？
IE9以降なら全部対応してます。2026年 now で特に気にする必要はありません。
パフォーマンスに影響する？
しません。ブラウザが内部でRGBに変換してます。変換コストは無視できるレベルです。
RGBとHSLの違いは？
RGBはハードウェアベース。画面がRGBの光で色を作る仕組みを表してます。 HSLは人間ベース。色相・彩度・明度に分解してます。デザイナーの思考に合います。
HSLじゃなくてRGBがいいのはいつ？
WebGL、Canvas、レガシーシステム、ハードウェアAPIと直接やり取りするならRGB。UIデザインやデザインシステムならHSLでいいです。