HEX・RGB・HSL の違い：どのカラー形式を使うべき？

HEX、RGB、HSL は、sRGB のような色空間で表示される色を表す異なる記法です。どれも同じ見た目の色を表せます。

.sample {
  color: #00ffff;
  color: rgb(0 255 255);
  color: hsl(180 100% 50%);
}

上の 3 つの宣言はいずれもシアンを表しています。

HEX はコンパクト

6 桁の HEX は、赤・緑・青を 00 から FF までの 2 桁ずつで表します。3 桁の HEX は短縮形で、#0ff は #00ffff に展開されます。8 桁の HEX はアルファを追加したもので、4 桁の HEX はその短縮形です。これらのバリエーションはHEX から RGB への変換ツールで確認できます。

RGB は画面のチャンネルそのもの

RGB は赤・緑・青のチャンネルを明示的に表し、通常は 0〜255 の値を使います。モダンな CSS ではスラッシュのあとにアルファを追加できます：rgb(0 255 255 / 60%)。画像や Canvas API から値を受け取るときに便利です。

HSL は意図どおりに調整しやすい

HSL は色相を角度で、彩度と明度をパーセントで表します。色相を回したり彩度を下げたりするのが直感的ですが、HSL の同じ変化量が見た目に同じ変化になるとは限りません。知覚的に均一なスケールには、モダンな OKLCH の方が適していることが多いです。

HSV と OKLCH は？

HSV は、色相と彩度・明度の四角形に自然に対応するため、カラーピッカーの UI でよく使われます。OKLCH は CSS では比較的新しく、見た目に均一な濃淡スケールの生成に向いています。同じ色の HEX、RGB、HSL、HSV、OKLCH を比較したいときは、RGB から HEX への変換ツールやHEX から RGB への変換ツールを使いましょう。

どんな場合にも最適な形式はありません。一貫したひとつの形式を基準にし、境界で変換し、必要に応じてアルファを保持しましょう。RGB から HEX への変換ツールでは比較用に HSL、HSV、OKLCH も表示されます。

次は、デジタルの混色でチャンネルとアルファがどう振る舞うかを見てみましょう。