カラースペース：hex、RGB、HSL、OKLCH の違いと使い分け

約4分
色CSSデザイン

CSS で色を指定するとき、#ff8c42 も rgb(255, 140, 66) も hsl(22, 100%, 63%) も同じ色を表せます。最近のブラウザは oklch(70% 0.16 47) のような新しい形式も対応しました。各形式の違いと、なぜ複数あるのかを整理します。

hex（16進数）：HTML/CSS の伝統的フォーマット

#RRGGBB の 6 桁または #RGB の 3 桁短縮形：

  • #ff8c42 — 16 進数で R=255、G=140、B=66
  • #f84 — 短縮形、#ff8844 と等価

利点：短い、universally サポート。欠点：人間が直感的に色を想像しづらい。

RGB：チャンネル別の数値

rgb(255, 140, 66) または rgb(100%, 55%, 26%)。各チャンネル 0-255 または 0-100%。rgba() でアルファ追加。

CSS Color Module Level 4 から空白区切り rgb(255 140 66 / 0.5) も使える。

HSL：色相・彩度・明度

hsl(22, 100%, 63%) — 色相（角度 0-360）、彩度（%）、明度（%）。

  • 色相を変えるとそのまま色が回る → 配色設計しやすい
  • 明度を上下させると「同じ色の暗い／明るい版」が作れる

ただし HSL の「明度」は人間の知覚と一致しません。hsl(60, 100%, 50%)（黄）と hsl(240, 100%, 50%)（青）は L=50% が同じでも、黄の方が圧倒的に明るく見えます。

OKLCH：知覚均等性のあるカラースペース

oklch(70% 0.16 47) — 明度（%）、彩度（chroma、0〜0.4 程度）、色相（角度）。

OKLab/OKLCH は 知覚均等（perceptually uniform） な色空間で、L 値が同じなら違う色相でも同じ明るさに見えます。

メリット：

  • グラデーションが自然（HSL より滑らか）
  • アクセシビリティ計算（コントラスト比）と整合性がある
  • 「同じ明度で違う色相のパレット」が作りやすい

CSS 対応：Chrome 111+、Safari 16.4+、Firefox 113+ で oklch() 関数が使える。

変換ロジックの概要

各形式間の変換：

hex → RGB:  16進パース、0-255 整数
RGB → hex:  16進フォーマット
RGB → HSL:  最大・最小チャンネルから算出
RGB → OKLCH: sRGB → 線形 RGB → XYZ → OKLab → 極座標

OKLCH 変換はマトリクス演算が必要で複雑ですが、結果は HSL より直感的に操作できます。

使い分けの目安

用途推奨形式
単色の色定義hex（短い、伝統的）
透明度ありの色rgba / rgb() with alpha
配色生成HSL（色相回転）
グラデーションOKLCH（自然な遷移）
ダーク／ライト両対応OKLCH（明度反転が綺麗）

CSS 変数で色を管理する際は、最近のフレームワークは内部表現として OKLCH を使う傾向があります（例：Tailwind CSS v4）。

各形式の相互変換を試したいときは、本サイトのカラー変換ツールが使えます。同じ色の hex / RGB / HSL / OKLCH を一覧表示します。