Webで使うカラー表現の種類

Webデザインでは色を数値で指定します。主要な形式はHEX・RGB・HSLの3種類で、それぞれ特徴と使いどころが異なります。

HEX（16進数カラーコード）

#FF5733のように、赤・緑・青の各チャンネルを16進数2桁で表します。デザインツール（Figma・Photoshop）やCSSで最も広く使われる形式です。

  • #RRGGBB形式：各チャンネル00〜FF（0〜255）
  • #RGB省略形：#FFFは#FFFFFFと同じ
  • #RRGGBBAA：アルファ（透明度）付き8桁形式

RGB

rgb(255, 87, 51)のように、赤・緑・青を0〜255の整数で指定します。JavaScriptでピクセル操作をする際はRGBが扱いやすく、rgba()で透明度も指定できます。

HSL

hsl(11, 100%, 60%)のように、色相（Hue）・彩度（Saturation）・明度（Lightness）で色を指定します。人間の直感に近い表現で、「少し暗くしたい」「同系色でまとめたい」といった調整がしやすいのが特徴です。

  • H（色相）：0〜360°。0=赤、120=緑、240=青
  • S（彩度）：0%=グレー、100%=鮮やか
  • L（明度）：0%=黒、50%=通常、100%=白

使い分けのポイント

  • デザイナーとの受け渡しや静的な色指定 → HEX
  • JavaScriptでの動的な色操作 → RGB/RGBA
  • テーマカラーのバリエーション作成・CSS変数 → HSL