ヘックスコードとは？デジタルカラーの言語

あらゆるウェブサイト、アプリ、デジタルインターフェース上のすべての色には、正確な数値アドレスがあります。ウェブの歴史の大部分において、そのアドレスは特定の形式を取ってきました。#3B82F6 や #FF5733 のように、ハッシュ記号に続く6文字です。これらがヘックスコード（16進数カラーコード）であり、デジタルカラーの共通言語です。

画面向けのデザインをしたり、ウェブアプリケーションを構築したり、何らかのデザインツールを使用したりする場合、ヘックスコードに頻繁に出会います。この記事では、ヘックスコードとは何か、16進数の数値システムがどのように機能するか、省略記法、アルファ透明度、任意のカラーのヘックスコードの見つけ方について詳しく解説します。

16進数システム

「ヘックス（hex）」はギリシャ語の hexas（6を意味する）から来ており、「デシマル（decimal）」はラテン語の10から来ています。16進数は、日常生活で使う10進法と比較して、16を基数とする数値システムです。

10進法では、0、1、2、3、4、5、6、7、8、9と数えた後、桁を追加します：10、11、12…

16進法では、0、1、2、3、4、5、6、7、8、9と数えた後、文字を使って続けます：A、B、C、D、E、F。その後、桁を追加します：10（10進数の16に相当）、11（17）、…FF（255）。

なぜカラーに基数16を使うのか？

理由は非常に実用的です。コンピューターの1バイトは8ビットで構成され、0から255の値を保持できます。16進数では、その全範囲がわずか2桁に収まります：00（0）から FF（255）。これにより、16進数はバイトサイズの値をコンパクトかつ読みやすくエンコードする手段となります。そして、各カラーチャンネルがまさにそのバイトサイズです。

RGBカラーモデルでは、赤・緑・青の3つのチャンネルがそれぞれ0から255の値を取ります。16進数では 00 から FF です。3チャンネル × 2桁 = 合計6文字。「これはカラーです」という意味の # プレフィックスを加えると、標準的なヘックスカラーコードになります。

6桁ヘックスコードの読み方（#RRGGBB）

標準的なヘックスカラーコードの構造は #RRGGBB です：

• # — ヘックスカラー値を示すプレフィックス
• RR — 赤チャンネルをエンコードする2桁の16進数（00–FF）
• GG — 緑チャンネルをエンコードする2桁の16進数（00–FF）
• BB — 青チャンネルをエンコードする2桁の16進数（00–FF）

デコードの例

暖かいコーラルレッドの #FF5733 を見てみましょう：

最大の赤チャンネルに適度な緑と低い青が組み合わさり、鮮やかなオレンジレッドが生まれます。低い青が色をニュートラル方向へシフトするのを防いでいます。

次に、スカイブルーの #3B82F6 を見てみましょう：

支配的な青に適度な緑が加わり、わずかなシアンの質を持つ鮮やかな中間青が生まれます。低い赤がクールさを保っています。

読み解きのコツ

構造を理解すると、ヘックスコードをひと目でおおよそ読み解けるようになります：

• チャンネルの 00 = そのプライマリーが皆無（そのチャンネルは完全に暗い）
• チャンネルの FF = 最大強度
• 80 ≈ 半分の強度（255のうち128）

これにより、一般的なコードを素早くデコードできます：

3つのチャンネルすべてで等しい値はニュートラル（レベルによってグレー、黒、または白）を生み出します。不等な値は常に色を生み出し、高い値がどのプライマリーカラーが支配的かを示します。

明るいヘックスコードと暗いヘックスコードの見分け方

6文字すべてが高い16進数値（C、D、E、F）であれば、その色は明るくなります。すべて低い値（0、1、2、3）であれば、暗くなります。これで瞬時に明るさがわかります：

• #F0E6D3 — すべて高い値 → 明るい温かみのあるベージュ
• #1A1A2E — すべて低い値 → 非常に暗いネイビー
• #7C3AED — 混合値、青が高い → 中間パープル

3桁省略記法

CSSでは、6文字の完全なコードの各ペアが同じ文字の繰り返しで構成される場合に、3文字のヘックス省略記法が使えます。#AABBCC は #ABC になります。各省略桁は単純に2倍にして完全版を生成します。

省略記法が有効な場合

省略記法は、各ペアが繰り返し桁の場合にのみ有効です。#3B82F6 は、3B、82、F6 が繰り返しペアではないため省略できません。しかし #336699 は、33、66、99 がそれぞれ同一桁の繰り返しであるため、#369 として有効です。

実際には、省略記法は有効なCSSの機能ですが、多くのチームは明確さのために6文字の完全形式を標準化しています。6文字版では、各チャンネル値が何であるかが一目で明らかです。多くのリンターやスタイルガイドは一貫性のために完全なヘックスを強制します。

アルファ透明度を持つ8桁ヘックス

標準の6文字ヘックスコードはRGBのみをエンコードし、不透明度の情報はありません。アルファ透明度（色がどれだけ不透明または透明かを制御する）を追加するために、CSSは8文字のヘックス形式をサポートしています：

#RRGGBBAA

最後の AA ペアはアルファチャンネルをエンコードし、カラーチャンネルと同じ0–255の範囲を使って不透明度にマッピングします：

8桁ヘックスの実用例

モーダル背景用のダークオーバーレイ：#000000 の70%不透明度 → #000000B3

ブランドブルー #3B82F6 の50%不透明度 → #3B82F680

純粋な白 #FFFFFF の10%不透明度（繊細なハイライト） → #FFFFFF1A

/* モーダルスクリム */
.modal-overlay {
  background-color: #000000B3;
}

/* すりガラスパネル */
.glass-card {
  background-color: #FFFFFF1A;
  backdrop-filter: blur(12px);
}

4桁アルファ省略記法

#RRGGBB に対して #RGB 省略記法があるように、#RRGGBBAA に対して #RGBA 省略記法があります：

• #F00F = #FF0000FF（純粋な赤、完全不透明）
• #0008 = #00000088（黒の約53%不透明度）
• #FFF0 = #FFFFFF00（完全透明の白）

ヘックスアルファ vs rgba()

8文字ヘックスが広くサポートされる前は、透明度を追加する標準的な方法はCSS の rgba() でした：

/* これら2つの宣言は等価です */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

どちらもすべてのモダンブラウザで十分サポートされています。rgba() 形式は、不透明度が0から1の10進数で表現されるため、CSSでより読みやすいことが多いです。8文字のヘックス形式はよりコンパクトですが、16進数から不透明度のパーセンテージへの変換が必要です。

ヘックスコードの検索と変換

デザインツールでの場合

主要なデザインツールはすべてヘックス値を公開しています：

• Figma — 任意のカラーフィルまたはストロークをクリックすると、右側のFillパネルにヘックスコードが表示されます。「HEX」をクリックしてコピーします。
• Adobe Illustrator / Photoshop — カラーピッカーとスウォッチパネルにヘックスコードが表示されます。パネルが表示されていない場合は「ウィンドウ > カラー」から開きます。
• Sketch — フィールドにコピーボタン付きでヘックスコードが表示されます。
• Canva — 任意の要素をクリックし、フィルカラーチップをクリックするとヘックスコードが表示されてコピーできます。

ウェブブラウザでの場合

ウェブページの任意の要素を右クリックし、「検証」または「要素を検証」を選択します。ブラウザのDevToolsで、CSSパネル内の要素を見つけます。任意のカラー値をクリックすると、クリックするたびに形式オプション（hex、rgb、hsl、oklch）が切り替わります。Chrome DevToolsにはカラーピッカーオーバーレイも表示されます。

DevToolsなしで素早くカラーを取得するには、ColorZilla（Chrome/Firefox）などのブラウザ拡張機能を使うと、画面上の任意のピクセルをサンプリングしてヘックスコードをコピーできます。

ColorFYIでの場合

ColorFYI上のすべてのカラー詳細ページ（/color/FF5733/ や /color/3B82F6/ など）には、RGB、HSL、CMYK、OKLCHの値と並んで完全なヘックスコードが表示されます。別の形式でカラーをお持ちの場合は、カラーコンバーター を使って即座にヘックスに変換できます：

• RGBからヘックスへ：rgb(255, 87, 51) を入力 → #FF5733 が得られる
• HSLからヘックスへ：hsl(11, 100%, 60%) を入力 → 等価なヘックスが得られる
• CMYKからヘックスへ：CMYKのパーセンテージを入力 → 近似sRGBヘックスが得られる

一般的なヘックス変換表

CSSでのヘックスの実用的な使い方

ヘックスコードは、カラー値を受け入れるすべてのCSSプロパティで使用できます：

/* テキスト */
color: #1E293B;

/* 背景 */
background-color: #F8FAFC;

/* ボーダー */
border: 1px solid #E2E8F0;

/* アルファ付きボックスシャドウ */
box-shadow: 0 4px 16px #0000001A;

/* CSSカスタムプロパティ */
:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-surface: #F8FAFC;
}

大文字・小文字の区別

ヘックスコードはCSSで大文字・小文字を区別しません。#3B82F6、#3b82f6、#3B82f6 はすべて同一です。ほとんどのチームは一貫性のために全大文字または全小文字のいずれかを標準化しています。大文字はデザインツールで伝統的に使われ、小文字はモダンなコードベースで人気があり、多くのリンターに好まれています。

まとめ

• ヘックスコードはRGBカラー値をエンコードする6文字の16進数です。構造は #RRGGBB で、赤・緑・青それぞれに2桁の16進数が割り当てられます。
• 16進数は基数16で、数字0–9と文字A–Fを使います。2桁の16進数ペアは0（00）から255（FF）の値をエンコードし、RGBチャンネルの全範囲に対応します。
• ヘックスコードの読み方：ペア内の高い値はチャンネル強度が高いことを意味します。3ペアすべての値が等しければニュートラル（グレー、黒、または白）になります。値が不等であれば、最も高いチャンネルに偏った色になります。
• 3桁省略記法（#RGB）は各ペアが1つの桁の繰り返しである場合に有効です。#336699 は #369 に短縮されます。
• 8桁ヘックス（#RRGGBBAA）はアルファ透明度チャンネルを追加します。最後の2桁は 00（透明）から FF（不透明）の範囲です。
• ヘックスコードは、任意のデザインツールのカラーピッカー、ブラウザDevToolsで要素を検証することで、またはColorFYIの任意のカラーページで見つけられます。
• カラーコンバーター を使って、ヘックス、RGB、HSL、CMYK、OKLCHの間を即座に変換できます。