RGB→HEX変換ツールとは?
このツールは、赤(R)・緑(G)・青(B)の3つのチャンネル(それぞれ0〜255)で表されるRGBカラーを、#RRGGBB形式の16進数(HEX)カラーコードに変換します。HEXコードはHTML・CSS・SVG、そして多くのデザインソフトで色を指定する際の標準的な書式です。そのため、RGBからの変換はWeb開発者やデザイナーにとって日常的に発生する作業といえます。
使い方
赤・緑・青の各値(0〜255)を入力するだけで、変換後のHEXコードと色のプレビューがすぐに表示されます。範囲外の数値を入力した場合は、自動的に0〜255の範囲に丸められます。
計算のしくみ
各チャンネルの値(0〜255)を、2桁の16進数として表記します。1桁目はその値を16で割った商(上位ニブル)、2桁目は16で割った余り(下位ニブル)で、0〜9とA〜Fの文字を使って表します。こうして得た3つの2桁の値を、先頭の#に続けてつなげれば完成です:$$\text{Hex} = \text{\#} \, \overline{\text{Red}}_{16} \, \overline{\text{Green}}_{16} \, \overline{\text{Blue}}_{16}$$。
計算例
「トマト色(tomato)」を例にとってみましょう。R=255、G=99、B=71です。Rの場合:\(255 \div 16 = 15 \to \text{F}\)、余り15 → F なので「FF」。Gの場合:\(99 \div 16 = 6 \to 6\)、余り3 → 3 なので「63」。Bの場合:\(71 \div 16 = 4 \to 4\)、余り7 → 7 なので「47」。これらをつなげると #FF6347 となります。
よくある質問
HEXコードはなぜ6桁なのですか? 3つのチャンネルをそれぞれ2桁の16進数で表すため、\(2 \times 3 = 6\)桁になります。これで16,777,216通りすべての色を表現できます。
大文字と小文字、どちらを使ってもいいですか? CSSではどちらも有効です。このツールは大文字(A〜F)で出力しますが、#ff6347と#FF6347はまったく同じ色を指します。
透明度(透過)はどう扱いますか? 標準のHEXコードにはアルファチャンネル(透明度)が含まれません。8桁の#RRGGBBAA形式なら不透明度も指定できますが、この変換ツールは一般的な6桁のコードを出力します。