HEX→RGB変換ツールとは?
HEXカラーコードは、色を6桁の16進数で表したもので、Webデザインやcss、デジタルグラフィックスの分野で広く使われています。赤・緑・青の3つのチャンネルの強さを、16進数(0〜9とA〜F)で表現する仕組みです。この変換ツールは、#3498DBのようなHEXコードを、多くのデザインツール・プログラミング言語・画像編集ソフトが扱うRGBの3つの値に変換します。
使い方
上の入力欄にHEXカラーコードを入力してください。先頭の#は付けても付けなくても、どちらでも問題ありません。標準の6桁コード(#RRGGBB)にも、3桁の省略形(#RGB)にも対応しており、省略形は自動的に展開されます(例:#0AFは#00AAFFに変換)。結果には、rgb(r, g, b)の文字列、各チャンネルの値、そしてリアルタイムのカラースウォッチが表示されます。
計算式の解説
各色のチャンネルは、16進数2桁で表されます。最初の2文字が赤、真ん中の2文字が緑、最後の2文字が青を表します。それぞれのペアを16進数(基数16)から10進数(基数10)へ変換します。
$$(R,\,G,\,B) = \bigl(\text{hex}_{[1\text{-}2]},\ \text{hex}_{[3\text{-}4]},\ \text{hex}_{[5\text{-}6]}\bigr)_{16}$$ $$\text{where}\quad \left\{ \begin{aligned} R &= \text{Int}_{16}\!\left(\text{Hex}[1\text{-}2]\right) \\ G &= \text{Int}_{16}\!\left(\text{Hex}[3\text{-}4]\right) \\ B &= \text{Int}_{16}\!\left(\text{Hex}[5\text{-}6]\right) \end{aligned} \right.$$
\(R = \text{int}(\text{hex}[0{:}2],\,16)\)、\(G = \text{int}(\text{hex}[2{:}4],\,16)\)、\(B = \text{int}(\text{hex}[4{:}6],\,16)\)。各チャンネルの値は0(00)から255(FF)までの範囲になります。
計算例
#3498DBを例に見てみましょう。赤のペアは34で、\(3 \times 16 + 4 = \mathbf{52}\)。緑のペアは98で、\(9 \times 16 + 8 = \mathbf{152}\)。青のペアはDBで、\(D = 13\)、\(B = 11\)なので、\(13 \times 16 + 11 = \mathbf{219}\)となります。したがって、#3498DB = rgb(52, 152, 219)です。
よくある質問
FFFFFFはどんな色になりますか? 純粋な白:rgb(255, 255, 255)です。一方、000000は純粋な黒:rgb(0, 0, 0)になります。
3桁のコードも入力できますか? はい。3桁の省略形は各桁が2回繰り返されます。#F00は#FF0000=rgb(255, 0, 0)に展開されます。
#は必要ですか? いいえ。先頭の#は自動的に取り除かれるので、#1A2B3Cでも1A2B3Cでも、どちらでも変換できます。