HEX→RGB変換ツールとは?
HEX→RGB変換ツールは、16進数のカラーコード(CSSやHTML、デザインソフトで使われる6文字の表記)を、対応するRGB値に変換するツールです。RGBは色を「赤・緑・青」の3つのチャンネルで表し、それぞれ0〜255の数値で示します。一方HEXコードは、同じ3つの値を #3498DB のように16進数の短い文字列にまとめたものです。
使い方
入力欄にHEXカラーコードを入力してください。先頭の # はあってもなくても構いません。また、#0AF のような3桁の省略形にも対応しており、自動的に6桁(#00AAFF)へ展開されます。「計算」ボタンを押すと、RGBの数値、カラープレビュー、そして各チャンネルごとの値が個別に表示されます。
計算式の仕組み
6桁のHEXコードは、2文字ずつ3つのペアに分かれます。1〜2文字目が赤(R)、3〜4文字目が緑(G)、5〜6文字目が青(B)です。各ペアは16進数の数値であり、これを10進数へ変換します。
$$\begin{gathered} (R,\,G,\,B) = \left( \text{hex}_{1\text{-}2},\ \text{hex}_{3\text{-}4},\ \text{hex}_{5\text{-}6} \right)_{16} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} R &= \big(\,\text{HEX}\,[1\text{-}2]\,\big)_{16} \\ G &= \big(\,\text{HEX}\,[3\text{-}4]\,\big)_{16} \\ B &= \big(\,\text{HEX}\,[5\text{-}6]\,\big)_{16} \end{aligned} \right. \end{gathered}$$たとえば FF は \(15 \times 16 + 15 = 255\) で最大の明るさ、00 は \(0\) となります。
計算例
#3498DB を例に見てみましょう。
結果は rgb(52, 152, 219) ——落ち着いた中間色のブルーになります。
よくある質問
「#」記号は必要ですか? いいえ、不要です。ツールが自動的に取り除くので、3498db でも #3498DB でも同じ結果になります。
大文字・小文字は区別されますか? 区別されません。ff と FF は同じ扱いで、ツールがすべて大文字に統一して処理します。
3桁のコードはどうなりますか? #F00 のような省略形は、各文字を2回ずつ繰り返して #FF0000 に展開されます。これは rgb(255, 0, 0)(純粋な赤)に相当します。