HEX と RGB と HSL と OKLCH — 各CSSカラー形式が実際に意味を持つとき

W3Schoolsで2011年にCSSを学んだ誰かが書いたコードベースを開くと、壁のような #rrggbb 値が見つかります。HEXはあらゆる場所に存在しています——それはその用途に最も適しているからではなく、私たちが最初にCSSを学んだときのすべてのチュートリアルや色選択ツールで使われていたためです。まだ機能しています。どこにも消えません。しかし2026年において、HEXを使って すべて は2009年のブログ記事から学んだことのないJavaScriptを書くのと同じです。 const なぜなら、あなたが2009年のブログ記事から学んだからです。

知るべき4つの色フォーマットがあります：HEX、RGB、HSL、およびOKLCH。それぞれは特定の状況で適切であり、他の状況では不適切です。それぞれの使い分けを以下に示します。

HEX (#rrggbb / #rrggbbaa)

HEXは色を2桁の十六進数ペアでエンコードします：赤に2桁、緑に2桁、青に2桁です。 #ff5733 に変換されます rgb(255, 87, 51) — オレンジ赤です。色選択ツールが開かれていないと、その値を読み取ることができません；ただそれを知っている必要があります。

ショートハンドがあります： #f53 は展開されます #ff5533。各ペアの2桁がすべて同じ場合にのみ機能します。透過性は4番目のペアです： #ff5733cc — ここで cc はアルファチャンネルです。スコアを取っている人にとっては、約80%の透過性です（0xCC / 0xFF ≈ 0.8）。完全に有効ですが、まったく読み取りが不可能です。

HEXが適切な場合

• FigmaまたはSketchからのデザイントークン。 デザイナーがHEXをエクスポートします。HEXを貼り付けます。これがワークフローです。それを抵抗しないでください。
• 値が静的で視覚ツールが制御している場合。 VS Codeの色選択ツールまたはブラウザのDevToolsが値を生成している場合、HEXは問題ありません。
• 第三パーティ統合 HEX入力を受け付けるもの。

HEXが不適切な場合

• 色をプログラム的に変更する場合——HEX上で合理的な計算を行うことはできません #ff5733
• トーンの関係を表現する場合——より明るいまたは暗いバリエーションを導出するための直感的な方法がない
• セマンティックトークンを持つデザインシステムを構築する場合

RGB / RGBA

RGBは赤、緑、青チャンネルを単純な十進数で表します。 rgb(255, 87, 51) は #ff5733と同じオレンジ赤です。ただし、チャンネル値は少なくとも人間が読み取りやすい数値です。現代のCSSカラーレベル4構文はコンマを省略します： rgb(255 87 51)。透過性はスラッシュで表されます： rgb(255 87 51 / 50%)。古い rgba(255, 87, 51, 0.5) はまだ機能しており、ブラウザはそれを削除しません。

RGBが適切な場合

• JavaScriptでの色操作。 明るさを調整するために白とブレンドする必要がある場合：チャンネル値に直接算術演算を行うことができます。
• キャンバスおよびWebGL。 APIは0–255の整数または0–1の浮動小数点数を扱います。RGBは下位のピクセルパイプラインが期待するものと直接対応します。
• ハードウェアセンサーまたは画像ライブラリからチャンネル値を取得する場合 そして変換を必要としない場合。

RGBが不適切な場合

• 色スケールの設計——小さなRGB調整がどのように見えるかという視覚的なメンタルモデルがありません
• ダークモードテーマ——すべての3チャンネルを再計算して明るさを変更する必要があります

HSL (Hue / Saturation / Lightness)

HSLは人間が色を実際に考える方法にマッピングする最初の色フォーマットです。Hueは色輪上の角度（0–360°）、Saturationは色の鮮やかさを制御（0% = グレー、100% = 純粋）、Lightnessは明るさを制御（0% = 黒、100% = 白）です。 hsl(14 100% 60%) はその同じオレンジ赤です。

実用的な利点：色の暗いバリエーションを必要とする場合、明るさ値を減らします。色を落ち着かせる場合？飽和度を減らします。1つのHue値から完全なトーンパレットを導出できます。これがCSSカスタムプロパティシステムがHSLに基づいている理由です：

:root {
  --brand-hue: 14;
  --brand-saturation: 100%;

  --brand-400: hsl(var(--brand-hue) var(--brand-saturation) 70%);
  --brand-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --brand-600: hsl(var(--brand-hue) var(--brand-saturation) 50%);
  --brand-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
}

透過性は他のフォーマットと同様に機能します： hsl(14 100% 60% / 50%).

HSLの一つの実際の制限は、その明るさスケールが視覚的に均一でない点です。同じL値を持つ2つの色は、明るさで大きく異なるように見えます——例えば hsl(60 100% 50%) (黄色) と hsl(240 100% 50%) (青) を並べてみてください。黄色は明らかに明るく見え、L=50%を共有しています。これはアクセシビリティ設計や特に色グラデーションに重要です。

HSLが適切な場合

• 色システムおよびデザイントークン。 上記の単一Hueパレットパターンは、操作しやすく、読み取りやすいです。
• ダークモードテーマ。 L値を変更し、他のすべてを維持します。これはうまく機能します。
• CSSカスタムプロパティにおけるトーンとシャドウ — それが設計された用途です。

OKLCH — モダンな代替案

OKLCHはHSLがべきだったものです。色を3つの値で表します：明るさ（0–1）、コロラ（飽和度に似ており、概ね0–0.4）、およびHue（0–360°）。 oklch(0.65 0.18 28) は概ね同じオレンジ赤です。

HSLと比べての主な違いは視覚的均一性です。OKLCHでは、同じL値を持つ2つの色が人間の目で同じ明るさに見えます。L=0.65の黄色とL=0.65の青は、視覚的に同じ明るさに見えます——HSLでは黄色が優位です。これは2つの特定の点で重要です：

• アクセシビリティ設計。 L値に基づいてコントラスト比を計算すると、ユーザーが実際に感じるものに一致します——数学の結果だけではなく。
• グラデーション。 HSLから青到黄色のグラデーションは、中央に濁った灰色の帯を通過します。OKLCHでの同じグラデーションは、中間ステップが一定の視覚的明るさを保ち、常に鮮やかです。

2023年のブラウザサポート：すべての現代的なブラウザ（Chrome 111+、Firefox 113+、Safari 15.4+）。IE11サポートなし——2026年に新規コードを配布している誰もIE11をターゲットとしていません。

Tailwind v4はそのすべての色パレットをOKLCHに移行しました。これは小さな実装詳細ではなく、最も広く使われているCSSフレームワークがこの方向に進んでいるというサインです。

HSLまたはOKLCHグラデーションを設計または実験している場合、 CSS グラデーションジェネレーター on IO Toolsは両方のフォーマットを直接サポートしており、グラデーション品質の違いを並べて確認できます。

OKLCHが適切な場合

• 新たに構築されたデザインシステム。 色トークンを今日定義している場合、OKLCHはHSLにない視覚的均一性を提供します。
• グラデーションを多く使うUI。 グラデーション品質の違いが見えると意味があります。
• アクセシブルな色パレット コントラスト比が実際に見える視覚的認識に反映される必要がある場合。

すべての4フォーマットにおける同じ色

ここに rgb(255, 87, 51) — 温かいオレンジ赤— すべてのフォーマットで表現され、50%の透過性バリエーションを含みます：

形式	無地	50% 透過
HEX	#ff5733	#ff573380
RGB	rgb(255 87 51)	rgb(255 87 51 / 50%)
HSL	hsl(14 100% 60%)	hsl(14 100% 60% / 50%)
OKLCH	oklch(0.65 0.18 28)	oklch(0.65 0.18 28 / 50%)

どのフォーマットを手動で編集する必要があるかを確認してください。HEX：色選択ツールを開く必要があります。RGB：3つの値に算術演算を行う必要があります。HSL：L値を60%から40%に変更します。OKLCH：L値を0.65から0.45に変更します。HSLおよびOKLCHのフォーマットは意図を直接表現しています。

実用的な移行パス

既存のHEX値をリファクタリングしないでください。それらは機能しており、壊れていないし、その変更のROIはほぼゼロです。そのままにしてください。

新しい作業では、以下のルールを適用してください：

• デザイナーまたはデザインツールから得られた静的色 → HEX。 Figmaが提供するものを貼り付けます。変換は不要です。
• JavaScriptで操作する色またはキャンバス/WebGLに渡す色 → RGB。 チャンネルベースの数学がきれいにマッピングされます。
• 新しいCSSカスタムプロパティおよびデザイントークン → HSLまたはOKLCH。 トーンとシャドウを導出する能力が必要です。3つの別々の値を再計算する必要がないようにします。
• 新たに構築されたデザインシステムまたはグラデーションを多く使う作業 → OKLCH。 視覚的均一性は、コロラ値のわずかな学習曲線を上回ります。

新しいプロジェクトにおけるCSSカスタムプロパティの具体的なパターン：

:root {
  /* Define the base in OKLCH */
  --brand: oklch(0.65 0.18 28);

  /* Derive tonal variants by adjusting L */
  --brand-light: oklch(0.78 0.14 28);
  --brand-dark:  oklch(0.48 0.20 28);
  --brand-muted: oklch(0.65 0.08 28);

  /* Transparency with the slash syntax */
  --brand-ghost: oklch(0.65 0.18 28 / 15%);
}

これは読み取り可能で、ツールなしで編集可能であり、HSLアプローチに比べてより良いグラデーションを生成します。

結論

HEXは間違っているわけではありません——それは専門化されています。視覚ツールから得られた値をコードに貼り付けるための最適化されたものです。プログラム的に変更する必要がある場合や、JavaScriptやキャンバスAPIとインターフェースする場合にRGBが役立ちます。既存のコードベースでHSLを使用している場合、デザイントークンとしてHSLはまだ信頼できる選択です。新しいデザインシステムではOKLCHが望ましいです。

HSLまたはOKLCHを採用するための障壁は、見かけより低いです。何らかの変更を移行する必要はありません——次に書くトークンにそれらを使用開始してください。 カラーピッカー on IO Toolsはすべての4フォーマットで色を同時に表示しており、既存のHEX値をHSLまたはOKLCHに変換する際の新しいトークンの参考になります。

あなたも好きかもしれません