HEXからRGBへの変換：16進数カラーコードを正確に読み替える
このページは、ウェブやグラフィックデザインで広く使われるHEXカラーコード（例：#4f46e5）を、ディスプレイやソフトウェアが直接扱うRGB数値（0〜255の整数3つ）に変換します。入力されたHEXコードは即座に解析され、対応するRGB値が他のカラーフォーマット（HSL、HSV、CMYK、LAB）と同時に表示されます。この変換はすべてブラウザ内で完結し、入力データが外部に送信されることはありません。
なぜHEXコードをRGBに変換する必要があるのか
CSSでは color: #ff6600 のようにHEXコードをそのまま使えますが、JavaScriptのCanvas APIや一部のデザインツールでは、rgb(255,102,0) のように数値の配列やオブジェクトでRGBチャンネルを指定する必要があります。HEXコードは本質的に、赤・緑・青の各チャンネルを16進数2桁で表現したものにすぎません。そのため、この変換は単なる表記の置き換えではなく、色の数学的な操作（明度計算、ガンマ補正、補色計算など）の基礎となる数値を取り出す操作です。
変換の仕組み：16進数から10進数への写像
HEXコード #4f46e5 を例に取ります。# を除いた6桁の文字列は、左から順に 4f（赤）、46（緑）、e5（青）の3ペアに分割されます。各ペアは16進数（base-16）で表現された0〜255の数値です。
- 赤チャンネル：
4f→4 × 16 + 15 = 79 - 緑チャンネル：
46→4 × 16 + 6 = 70 - 青チャンネル：
e5→14 × 16 + 5 = 229
この計算は完全に決定論的で、丸めやクリッピングは発生しません。16進数の a〜f は10〜15に対応します。例えば ff は 15×16 + 15 = 255、00 は 0×16 + 0 = 0 となります。
3桁短縮形の扱い：自動展開のルール
HEXコードには、#abc のような3桁の短縮形が存在します。これはCSS仕様（CSS Color Module Level 4）で定義された記法で、各桁を2回繰り返すことで6桁に展開します。
#abc→#aabbcc#f60→#ff6600
このページでは、3桁のHEXコードが入力されると、内部的にこの展開を行った上でRGBに変換します。例えば #abc は #aabbcc と解釈され、RGB値は (170, 187, 204) となります。# の有無は問いません。# なしの abc も有効な入力として扱われます。
入力値の検証とエラーメッセージ
このページが受け付けるのは、以下の形式のみです。
- 6桁のHEXコード：
#4f46e5、1E90FF（大文字小文字は区別しない） - 3桁の短縮形：
#abc、f60
これらの形式に当てはまらない値（例えば #1234 のような4桁や、#ggg のような無効な16進数文字を含むもの）を入力すると、ツールはエラーメッセージを表示します：
「Enter a hex color like #4f46e5 or #abc.」
また、8桁のHEXコード（RGBA、つまりアルファチャンネルを含むもの）はこのページの対象外です。アルファ値を含む変換が必要な場合は、別のツールを利用する必要があります。
色空間の変換とリアルタイム更新
RGB値が決定すると、そこから他のすべてのカラーフォーマットが自動的に計算され、表示が更新されます。各フォーマットへの変換には標準的なアルゴリズムが使われます。
- HSL（色相・彩度・明度）：RGBからHSLへの変換は、Chroma値を経由して計算されます。例えば
rgb(79, 70, 229)の場合、色相Hは約243度、彩度Sは約77%、明度Lは約59%となります。 - HSV（色相・彩度・明度）：HSLと似ていますが、明度の定義が異なります。RGB値が同じでも、HSLとHSVでは数値が一致しません。
- CMYK（シアン・マゼンタ・イエロー・ブラック）：RGBからCMYKへの変換は、まずRGB値を0〜1に正規化し、その後C=1-R、M=1-G、Y=1-B、K=min(C,M,Y) という式で計算します。ただし、この変換はデバイス依存であり、あくまで一般的な近似値です。
- LAB（CIE Lab*）：RGBからLABへの変換は、まずsRGBからXYZ色空間を経由し、その後CIE標準観測者関数を用いてLABに変換します。この変換は非線形で、ガンマ補正の影響を受けます。
これらの変換はすべて、ユーザーがHEXコードを入力した瞬間に実行され、結果が即座に表示されます。RGBのテキストフィールドを編集すると、逆方向の変換（RGB→HEX、その他）が行われ、すべてのフィールドが更新されます。
実用的な変換例とよくある誤解
例1：グレースケール
#000000→rgb(0, 0, 0)（黒）#808080→rgb(128, 128, 128)（中間グレー）#ffffff→rgb(255, 255, 255)（白） グレースケールでは、3つのチャンネルが常に同じ値になります。
例2：原色とその補色
#ff0000→rgb(255, 0, 0)（赤）#00ff00→rgb(0, 255, 0)（緑）#0000ff→rgb(0, 0, 255)（青） 補色は、各チャンネルの値を255から引くことで計算できます。#ff0000の補色はrgb(0, 255, 255)つまりシアンです。
よくある誤解：HEXとRGBは違う色を表す？
HEXとRGBは同じ色を異なる表記法で表現しているにすぎません。#ff6600 と rgb(255, 102, 0) はまったく同じ色を指します。ブラウザの内部でも、CSSの color: #ff6600 はパース時にRGB値に変換されてレンダリングされます。
よくある誤解：#ffffff は rgb(255,255,255,255) と同じ？
違います。#ffffff はRGB（アルファなし）です。8桁のHEX #ffffffff はRGBA（アルファ255）を表します。このページでは、6桁または3桁のHEXのみを扱い、アルファチャンネルは無視されます。
よくある質問（FAQ）
Q: HEXコードの # は必須ですか？
A: 必須ではありません。# の有無は自動判別されます。例えば 1E90FF も #1E90FF も同じRGB値 rgb(30, 144, 255) に変換されます。
Q: 大文字と小文字は区別されますか？
A: 区別されません。#4f46e5 と #4F46E5 は同じ結果になります。内部ではすべて大文字に変換してから計算しています。
Q: #abc はなぜ #aabbcc と同じになるのですか？
A: CSSの仕様で定義されている短縮形のルールです。各桁を2回繰り返すことで、元の精度を維持したまま6桁に展開できます。#abc は #aabbcc より情報量が少ないわけではなく、単に簡潔に書ける方法です。
Q: RGB値が整数でない場合はありますか？ A: ありません。16進数から10進数への変換は完全に数学的であり、結果は常に0〜255の整数になります。小数や丸めは発生しません。
Q: この変換はsRGB色空間を前提としていますか？ A: はい。HEXコードとRGB値は通常、sRGB色空間で定義されます。特に断りのない限り、ディスプレイやブラウザはsRGBを標準としています。
Q: 間違ったHEXコードを入力した場合、どうなりますか？ A: エラーメッセージが表示され、変換は行われません。また、他のカラーフィールドは最後に有効だった値のまま保持されます。