カラーコードガイド：HEX、RGB、HSL の解説

2026年3月31日 · 12分で読めます

カラーフォーマットの紹介

カラーはウェブデザインにおける視覚的コミュニケーションの基盤を形成し、開発者は色を正確に定義するために複数のフォーマットを自由に使用できます。3つの主要なカラーモデル（HEX、RGB、HSL）は、それぞれワークフローと要件に応じて異なる利点を提供します。

これらのフォーマットを理解することは、単純な色の選択を超えています。一貫性のあるデザインシステムの作成、動的なテーマの実装、アクセシビリティコンプライアンスの確保、デザイナーや関係者との効果的なコミュニケーションを可能にします。各フォーマットは同じ色を表現しますが、色の定義に対して異なる視点からアプローチします。

HEXコードは、静的デザインに最適なコンパクトで移植可能なカラー値を提供します。RGBは、光の放出を通じて画面が物理的に色を表示する方法を反映しています。HSLは人間の知覚に合わせており、調整やバリエーションを直感的にします。3つのフォーマットすべてをマスターすることで、各状況に適したツールを選択する柔軟性が得られます。

HEXカラーコードの理解

HEXコードとは？

HEXカラーコードは、16進数表記を使用して色を表現します。これは0〜9の数字とA〜Fの文字を使用する16進数システムです。各HEXコードはハッシュ記号（#）で始まり、その後に色の赤、緑、青の成分を定義する6文字が続きます。

6文字のフォーマットは3つのペアに分かれます：最初の2文字は赤の強度を表し、中央の2文字は緑を表し、最後の2文字は青を表します。各ペアは00（強度なし）からFF（最大強度）まで範囲があり、チャンネルごとに256の可能な値と、合計1600万以上の色の組み合わせが得られます。

HEXカラーの仕組み

メカニズムを理解するために実用的な例を分解してみましょう。色#3A9D23を考えてみます：

• 3A（赤チャンネル）= 10進数で58
• 9D（緑チャンネル）= 10進数で157
• 23（青チャンネル）= 10進数で35

この組み合わせは、緑チャンネルが支配的で赤と青が比較的低いため、落ち着いたアースグリーンを生成します。16進数システムは最初は不可解に見えるかもしれませんが、大きな数をコンパクトな形式で表現するのに非常に効率的です。

16進数と10進数の間の迅速な変換には、これらの重要な値を覚えておいてください：00 = 0、80 = 128、FF = 255。純粋な赤（#FF0000）、純粋な緑（#00FF00）、純粋な青（#0000FF）のような一般的な色は、単一チャンネルでの最大強度を示しています。

短縮HEX表記

HEXコードの各文字ペアが同一の場合、わずか3文字の短縮表記を使用できます。たとえば、#FFFFFFは#FFFになり、#336699は#369になります。ブラウザは各文字を2倍にすることで、これらの短縮コードを自動的に展開します。

この短縮形は、一般的な色に特に便利で、スタイルシートのファイルサイズを削減します。ただし、すべての色を短縮形で表現できるわけではありません。各RGBペアが同一の数字で構成されている色のみです。

HEXコードの実用的な応用

HEXコードは、デザインシステム全体で静的な色を定義するCSSで優れています。通常、次のように実装します：

.primary-button {
  background-color: #38bdf8;
  color: #ffffff;
  border: 2px solid #0284c7;
}

.success-message {
  background-color: #dcfce7;
  color: #166534;
  border-left: 4px solid #22c55e;
}

HEXコードは、デザインの引き継ぎの標準フォーマットでもあります。デザイナーがFigmaやAdobe XDなどのツールから色の仕様を共有する場合、通常HEX値を提供します。これは普遍的に認識され、コードにコピー＆ペーストしやすいためです。

RGBカラーコードの解読

RGBカラーモデル

RGBは赤（Red）、緑（Green）、青（Blue）の略で、画面が表示するすべての色を作り出すために使用する光の3原色です。顔料ベースの色混合（減法混色）とは異なり、RGBは加法混色を使用し、3つのチャンネルすべてを最大強度で組み合わせると白色光が生成されます。

RGBモデルは、デジタルディスプレイの動作方法に直接対応しています。各ピクセルには、さまざまな強度で光を放出する3つのサブピクセル（赤、緑、青のLEDまたはフィルター）が含まれています。これら3つのチャンネルを制御することで、ディスプレイは数百万の異なる色を再現できます。

RGB構文と値

CSSでは、RGBカラーはrgb()関数を使用し、それぞれ0から255の範囲の3つのカンマ区切りの値を取ります。構文は簡単で人間が読みやすいです：

/* 明るいオレンジ */
color: rgb(255, 87, 51);

/* ソフトパープル */
background-color: rgb(147, 112, 219);

/* ダークグレー */
border-color: rgb(45, 45, 45);

各値は、そのカラーチャンネルの強度を表します。ゼロはチャンネルがオフであることを意味し、255は最大輝度であることを意味します。この10進数表記は、多くの開発者にとって16進数よりも直感的で、特に段階的な調整を行う場合に便利です。

RGBを使用するタイミング

RGBは、プログラムでカラー値を操作する必要があるシナリオで輝きます。JavaScriptは、動的な色生成、アニメーション、インタラクティブエフェクトのためにRGB値を簡単に操作できます：

// ランダムな色を生成
function randomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

// すべてのチャンネルを減らして色を暗くする
function darken(r, g, b, amount) {
  return `rgb(${r - amount}, ${g - amount}, ${b - amount})`;
}

RGBは、画像処理、キャンバス操作、またはピクセルから色データを抽出する状況で作業する場合にも好ましいです。このフォーマットは、画像データがメモリに保存および操作される方法と完全に一致します。

RGB vs HEX：適切なフォーマットの選択

RGBとHEXは全く同じ色を表現します。これらは同じ基礎値に対する異なる表記法にすぎません。それらの間の選択は、多くの場合、コンテキストと個人的な好みに依存します：

HSLカラーコードの探求

HSLモデルの理解

HSLは色相（Hue）、彩度（Saturation）、明度（Lightness）の略で、人間が自然に色を知覚し説明する方法により密接に一致するカラーモデルです。光チャンネルを混合する代わりに、HSLは色相環上の位置、鮮やかさ、明るさの観点から色を説明します。

このモデルは、色のバリエーションを作成し、視覚的な調和を維持するために特に強力です。色の明るいバージョンや暗いバージョンを作成したり、その強度を調整したりする必要がある場合、HSLはこれらの操作を直感的で予測可能にします。

HSL成分の分解

色相は色のタイプを表し、色相環上の位置に対応する0から360度で測定されます。赤は0度（および360度）、緑は120度、青は240度にあります。他のすべての色は、これらの主要な位置の間のどこかにあります。

彩度は色の強度を制御し、0％から100％のパーセンテージで表されます。0％では、色は完全に灰色になります（彩度が下がる）。100％では、その色相の最も純粋で最も鮮やかなバージョンが得られます。中間範囲の値は、落ち着いた洗練されたトーンを生成します。

明度は色がどれだけ明るいか暗いかを決定し、これも0％から100％のパーセンテージです。0％では、どの色も純粋な黒になります。100％では、どの色も純粋な白になります。「真の」色は50％の明度で現れます。

CSSでのHSL構文

CSS hsl()関数は3つの値を取ります：色相（度）、彩度（パーセンテージ）、明度（パーセンテージ）：

/* 鮮やかな青 */
color: hsl(210, 100%, 50%);

/* 落ち着いたティール */
background-color: hsl(180, 40%, 60%);

/* ダークレッド */
border-color: hsl(0, 70%, 30%);

最新のCSSは、カンマなしのスペース区切り構文もサポートしています：hsl(210 100% 50%)。両方のフォーマットは同じように機能しますが、カンマ区切りバージョンは古い環境でより広範なブラウザサポートがあります。

HSLがデザインシステムで優れている理由

HSLの真の力は、スケーラブルなカラーシステムを構築する際に現れます。個々の成分を調整しながら他を一定に保つことができるため、色のバリエーションの作成が非常に簡単になります：

:root {
  /* ベースブランドカラー */
  --brand-hue: 210;
  --brand-saturation: 100%;
  
  /* 一貫した色相と彩度を使用したカラースケール */
  --brand-50: hsl(var(--brand-hue), var(--brand-saturation), 95%);
  --brand-100: hsl(var(--brand-hue), var(--brand-saturation), 90%);
  --brand-200: hsl(var(--brand-hue), var(--brand-saturation), 80%);
  --brand-500: hsl(var(--brand-hue), var(--brand-saturation), 50%);
  --brand-900: hsl(var(--brand-hue), var(--brand-saturation), 20%);
}

このアプローチは、すべての色のバリエーションが同じ色相と彩度を共有するため、完璧な調和を維持することを保証します。明度のみを調整しているため、自動的に一貫性のある視覚システムが作成されます。

実用的なHSLアプリケーション

HSLは、HEXやRGBでは面倒ないくつかの実際のシナリオで優れています：

• ホバー状態：明度を10〜15％減らしてボタンを暗くする
• 無効状態：彩度を20〜30％に設定して要素の彩度を下げる
• カラーハーモニー：色相に180度を追加して補色を作成する
• 類似配色：色相を±30度調整して関連色を生成する
• ティントとシェード：ティントには明度を増やし、シェードには減らす

HSLを使用して完全なボタン状態システムを生成する実用的な例を次に示します：

.button {
  background-color: hsl(210, 100%, 50%);
}

.button:hover {
  /* 明度を減らして暗くする */
  background-color: hsl(210, 100%, 40%);
}

.button:active {
  /* 押された状態のためにさらに暗くする */
  background-color: hsl(210, 100%, 35%);
}

.button:disabled {
  /* 彩度を下げて明るくする */
  background-color: hsl(210, 30%, 70%);
}

カラーフォーマット間の変換

変換が重要な理由

異なるツール、フレームワーク、ワークフローは異なるカラーフォーマットを好みます。デザイナーはHEXコードを提供するかもしれませんが、バリエーションを作成するにはHSLが必要です。APIはRGB値を返すかもしれませんが、HEXで表示する必要があります。変換を理解することで、シームレスなワークフロー統合が可能になります。

変換は、各フォーマットの強みを活用するのにも役立ちます。デザイナーからHEXコードを受け取り、HSLに変換してカラースケールを生成し、ドキュメント目的でHEXに戻すことができます。

HEXからRGBへの変換

変換