HEXからRGBへの変換とは？
HEXカラーコードとは、色を16進数（base-16）の6桁で表したもので、Webデザインやスタイルシート（CSS）で広く使われています。たとえば #3498DB のような表記です。先頭から2桁ずつのペアが、赤・緑・青という3つの原色チャンネルにそれぞれ対応しています。一方、RGBモデルでは同じ色を0〜255の10進数3つで表現します。この変換ツールは、HEXコードを対応するRGB値に変換し、その色のプレビューをリアルタイムで表示します。
使い方
入力欄にHEXカラーコードを入力するか、貼り付けてください。先頭の # は付けても付けなくても構いません。標準の6桁コードはもちろん、3桁の省略形（例：#0AF。これは #00AAFF に展開されます）にも対応しています。「計算する」を押すと、赤・緑・青の各値と色のプレビューが表示されます。
計算式の仕組み
変換は16進数を10進数に読み直すだけのシンプルな処理です。6文字の文字列を、2文字ずつ3つのペアに分割します。各ペアを16進数として読み取り、最初の桁に16を掛け、2番目の桁を足します。たとえば「FF」なら \(15 \times 16 + 15 = 255\)、「00」なら 0 となります。一般的な式は次のとおりです。
$$\text{値} = (\text{1桁目} \times 16) + \text{2桁目}$$各桁は0〜15の範囲をとります（A〜Fが10〜15を表します）。
$$(R,G,B) = \big(\,\text{hex}_{[1,2]},\ \text{hex}_{[3,4]},\ \text{hex}_{[5,6]}\,\big)_{16}$$ $$\text{where}\quad \left\{ \begin{aligned} R &= \operatorname{int}_{16}\!\left(\text{Hex}_{[1,2]}\right) \\ G &= \operatorname{int}_{16}\!\left(\text{Hex}_{[3,4]}\right) \\ B &= \operatorname{int}_{16}\!\left(\text{Hex}_{[5,6]}\right) \end{aligned} \right.$$
計算例
#3498DB で試してみましょう。34、98、DB に分割します。
結果は rgb(52, 152, 219) となり、おなじみのスカイブルーです。
よくある質問
大文字と小文字で結果は変わりますか？ 変わりません。#abcdef と #ABCDEF は同じRGB値になります。
3桁のコードはどう扱われますか？ #F60 のような3桁のHEXは、各桁を2回繰り返す省略形です。変換前に #FF6600 に展開されます。
なぜ値の上限は255なのですか？ 各チャンネルは16進数2桁を使い、2桁で表せる最大値のFFが255に相当します。そのため1チャンネルあたり256段階（0〜255）を表現できます。
