🎨
← ガイド一覧に戻る

HEX vs RGB vs HSL：どのカラーフォーマットを使うべきか？

· タグ: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX vs RGB vs HSL：どのカラーフォーマットを使うべきか？

CSSには色を定義する複数の方法がありますが、最も一般的な3つのフォーマットはHEX、RGB、HSLです。各フォーマットには明確な強みがあり、それぞれをいつ使うかを知ることで、スタイルシートの保守性と動的なカラーシステムを作成する能力を劇的に向上させることができます。このガイドでは、あらゆる状況に適したものを選べるように、各フォーマットを詳しく解説します。

HEXカラーフォーマット：業界標準

HEX（16進数）カラーは、Webデザインで最も広く使われているフォーマットです。16進カラーは、# に続く赤、緑、青の値をその順序で表す6桁の16進数として書かれます。

#FF5733
  • #FF — 赤（10進数で255）
  • #57 — 緑（10進数で87）
  • #33 — 青（10進数で51）

HEXのバリエーション

HEXはさまざまなニーズに対応するいくつかの表記法をサポートしています：

/* 標準の6桁の16進数 */
color: #FF5733;

/* 省略形 — 同じペアが3桁に縮約される */
color: #F53; /* #FF5533 に展開される */

/* アルファチャンネル付きの8桁の16進数 */
color: #FF573380; /* 50%の不透明度 */

省略形HEXは、各ペアが同じ文字を使用する場合に機能します：#AABBCC は #ABC になります。これは純粋にスペースを節約する慣例で、すべてのブラウザでサポートされています。

8桁のHEX（#RRGGBBAA）はアルファ透明度を追加しました。アルファ値は 00（完全に透明）から FF（完全に不透明）までの範囲です。8桁の16進数のブラウザサポートは、すべてのモダンブラウザで優れています。

4桁の省略形（#RGBA）も存在します：#F538 は #FF553388 に展開されます。

HEXを使うべきタイミング

  • デザインツールからのコピーペースト — Figma、Sketch、Adobe XDはすべてデフォルトでhexを出力します
  • ハードコードされたブランドカラー — 決して変わらない値には、hexは曖昧さがなくコンパクトです
  • ドキュメントとモックアップ — hexはデザイナーと開発者の間で最も認知されているフォーマットです
  • CSSカスタムプロパティ — ブランドトークンをhexで保存するのは一般的な慣行です

HEXを避けるべきタイミング

  • プログラムによる色操作 — 個々のチャンネルの調整には文字列解析が必要です
  • カラーシステムの作成 — 明るいまたは暗いバリエーションの生成には簡単ではない計算が必要です
  • 色の意図の伝達 — hexは色についての意味的な情報を与えません

RGBカラーフォーマット：チャンネル制御

RGBはRed（赤）、Green（緑）、Blue（青）の略です。CSSでは、0から255の値またはパーセント（0%から100%）を持つ関数として書かれます。

/* 従来のカンマ区切り構文 */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* モダンなスペース区切り構文 */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* パーセント値 */
color: rgb(100% 34% 20%);

モダンRGB構文の改善点

CSS Color Level 4仕様は、rgb() 関数を2つの重要な方法で近代化しました：

  1. スペース区切りの値 — カンマが不要になり、構文がよりクリーンになりました
  2. スラッシュ区切りのアルファ — rgba() エイリアスは不要になりました。rgb() は現在、オプションのアルファチャンネルを受け付けます

従来とモダンの両方の構文が完全にサポートされていますが、新しいコードにはモダン構文が推奨されます。

RGBを使うべきタイミング

  • CanvasとWebGL — 画像データAPIはピクセル値をRGBで返します
  • 数値による色の調整 — 赤、緑、青の値を別々の変数として保存している場合
  • デザイン仕様からの変換 — 一部のデザインシステムは色をRGBトリプレットとして指定します
  • カラーピッカーでの作業 — 多くのカラーピッカーUIは0-255のスライダーを使用します

RGBを避けるべきタイミング

  • まとまりのあるカラーパレットの作成 — 3つのチャンネルすべてを個別に調整すると、一貫した調整が難しくなります
  • 人間の読みやすさ — rgb(123, 45, 67) は、それがどの色を表すかを即座に感覚として与えません

HSLカラーフォーマット：人間に優しい色

HSLはHue（色相）、Saturation（彩度）、Lightness（明度）の略です。このフォーマットは、色そのもの（色相）をその強度（彩度）と明るさ（明度）から分離するため、人間にとってより直感的です。

/* 従来の構文 */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* モダン構文 */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

HSLチャンネルの理解

色相（0-360） — カラーホイール上の色の角度。これは「何色か」を表すコンポーネントです：

| 色相値 | 色 | |-----------|---------| | 0または360 | 赤 | | 30 | オレンジ | | 60 | 黄 | | 120 | 緑 | | 180 | シアン | | 240 | 青 | | 300 | マゼンタ |

彩度（0-100%） — 色がどれだけ強烈または鮮やかか。0%はグレーのシェードを生成します。100%は色相の最も純粋なバージョンです。

明度（0-100%） — 色がどれだけ明るいか暗いか。0%は常に黒、50%は色相の「通常」バージョン、100%は常に白です。

HSLがカラーシステムに優れている理由

HSLはHEXやRGBでは難しいタスクを極めて簡単にします：

/* メインのブランドカラー */
--brand: hsl(220, 80%, 50%);

/* ホバー状態 — 少し明るく */
--brand-hover: hsl(220, 80%, 60%);

/* アクティブ状態 — 少し暗く */
--brand-active: hsl(220, 80%, 40%);

/* 無効状態 — 彩度を下げる */
--brand-disabled: hsl(220, 30%, 70%);

/* 背景のティント — 非常に明るい */
--brand-bg: hsl(220, 40%, 95%);

HSLでは、すべてのバリエーションが1つの変数の変更です。 これはHEXでは不可能で、RGBでは面倒です。

HSLを使うべきタイミング

  • カラーパレットの作成 — HSLはデザイントークン生成の事実上の標準です
  • テーマとダークモード — 明度の値を入れ替えてダークモードのバリエーションを作成
  • ホバー状態とフォーカス状態 — 明度を一定の割合で調整
  • アクセシビリティの調整 — 色を変えずに明度のコントラストを高める
  • インタラクティブなカラーピッカー — HSLスライダーはRGBスライダーより直感的です

クイック比較表

| 機能 | HEX | RGB | HSL | |---------|-----|-----|-----| | ピクセルレベルの読みやすさ | 悪い | 普通 | 良い | | チャンネルの意味論 | 不明瞭 | 数値的 | 知覚的 | | プログラムによる調整 | 難しい | 普通 | 簡単 | | アルファ透明度 | 8桁のhex | rgb(R G B / A) | hsl(H S% L% / A) | | ブラウザサポート | 優れている | 優れている | 優れている | | モダン構文 | いいえ | はい | はい | | デザインツールのデフォルト | はい | 一般的 | まれ | | カラーシステムへの適合性 | 悪い | 普通 | 優れている |

ブラウザサポート：3つすべてが安全

HEX、RGB、HSLは同じブラウザサポートを持っています。3つすべてがInternet Explorer 9以降にリリースされたすべてのブラウザで動作します。モダンなスペース区切り構文（rgb(255 0 0 / 0.5)）は、2020年以降にリリースされたすべてのブラウザでサポートされています。互換性の理由で1つを選ぶ必要はありません。

実践的な決定フレームワーク

何をしているかに基づいてフォーマットを選びます：

  1. デザインモックアップからコピーしていますか？ HEXを使用 — それはデザインツールが出力するものです。
  2. デザイントークンシステムを構築していますか？ HSLを使用 — パレット生成が簡単になります。
  3. canvasや画像データを扱っていますか？ RGBを使用 — ピクセルAPIはネイティブにRGBを使用します。
  4. 一回限りのスタイルルールを書いていますか？ HEXを使用 — 最もコンパクトです。
  5. 動的な色の遷移を作成していますか？ HSLを使用 — 色相の補間は虹効果を作り出し、RGBの補間は濁った中間色を作り出します。

任意のフォーマット間で変換

当社の無料オンラインカラーコンバーターを使って、HEX、RGB、HSL、その他のCSSカラーフォーマット間で即座に変換できます。手動の計算やブラウザのDevToolsを探り回る必要はもうありません。