HEX→RGB変換ツールとは？
HEXカラーコードとは、色を6桁の16進数で表したもので、#RRGGBBの形式で書かれます。2桁ずつのペアが、加法混色の3つのチャンネル——赤・緑・青——をそれぞれ表しています。この変換ツールはHEXコードを読み取り、対応するRGBの3つの値に変換します。各チャンネルは0〜255の整数です。RGBはCSSやデザインソフト、そして多くのディスプレイが内部で使っている形式なので、HEXとRGBを行き来する作業は、Web開発者やデザイナーにとって日常的なものです。
使い方
入力欄にHEXコードを打ち込むだけ。先頭の#はあってもなくても構いません。6桁のフルコード（#3498DB）はもちろん、3桁の短縮形（#39C＝#3399CCに展開）にも対応しています。余分な文字を取り除いてコードを正規化し、赤・緑・青の値に加えて、ライブのカラースウォッチとコピペですぐ使えるCSSを即座に表示します。
計算式の仕組み
16進数は基数16で、0〜9の数字とA〜Fの文字（A=10 … F=15）を使います。2文字のペアは値 ＝ 1桁目 × 16 ＋ 2桁目というルールで変換します。つまりFF＝15 × 16 ＋ 15 ＝ 255で最大値、00＝0で最小値です。3つのペアはそれぞれ独立してR・G・Bに変換されます。
$$(R,\,G,\,B) = \bigl(\,\text{hex}_{[1,2]},\ \text{hex}_{[3,4]},\ \text{hex}_{[5,6]}\,\bigr)_{16}$$
$$\text{where}\quad \left\{ \begin{aligned} R &= \left(\text{Hex Code}\ \text{digits 1-2}\right)_{16} \\ G &= \left(\text{Hex Code}\ \text{digits 3-4}\right)_{16} \\ B &= \left(\text{Hex Code}\ \text{digits 5-6}\right)_{16} \end{aligned} \right.$$
計算例
#3498DBを例に見てみましょう。赤のペア34＝\(3 \times 16 + 4 = 52\)。緑のペア98＝\(9 \times 16 + 8 = 152\)。青のペアDB＝\(13 \times 16 + 11 = 219\)。結果はrgb(52, 152, 219)——フラットデザインで人気の青になります。
よくある質問
#FFFのような短縮形のHEXにも対応していますか？ はい。3桁のコードは各桁を2回ずつ繰り返して展開するので、#FFFは#FFFFFF＝rgb(255, 255, 255)になります。
アルファ（透明度）チャンネルはどうなりますか？ このツールは3チャンネルのRGBカラーを扱います。アルファ付きの8桁HEXは、色の変換時に先頭6桁だけが使われます。
RGBからHEXに戻すには？ 各チャンネルの値を2桁の16進数に変換し、#の後ろに連結します。たとえば52, 152, 219 → 34, 98, DB → #3498DBとなります。
