MCPで接続 →

計算を入力してください

公式

広告

結果

16進数カラーコード
#FFA500
rgb(255, 165, 0)
チャンネル 10進数 16進数
255 FF
165 A5
0 00

RGB→16進数(HEX)変換ツールとは?

このツールは、RGBカラー(赤・緑・青の光の強さをそれぞれ0〜255の数値で表したもの)を、Webデザインやデザインソフトでおなじみの#RRGGBB形式の16進数カラーコードに変換します。RGBとHEXはどちらもまったく同じ色を表しており、HEXは同じ3つのバイト値をよりコンパクトに書き表したものにすぎません。CSSやHTMLでの色指定にそのまま使えます。

赤・緑・青の3つのRGBスライダーが1つのカラースウォッチに反映される様子
RGBは赤・緑・青のチャンネル(各0~255)を1つの色に組み合わせます。

使い方

赤(Red)・緑(Green)・青(Blue)の各欄に0〜255の数値を入力し、変換を実行するだけです。HEXコードに加えて、結果をその場で確認できるカラースウォッチ、そして各チャンネルを10進数と16進数の両方で示した内訳が表示されます。0〜255の範囲外の値は自動的に範囲内に丸められ、小数は最も近い整数に四捨五入されます。

計算の仕組み

各チャンネルを16進数(基数16)に変換します。0〜255のバイト値は必ず2桁の16進数(00〜FF)で表せます。色は次のように組み立てられます:

$$\text{Hex} = \text{\#} \; \overline{\text{Red}}_{16} \, \overline{\text{Green}}_{16} \, \overline{\text{Blue}}_{16}$$

vを変換するには、上位の桁をfloor(v / 16)、下位の桁をv mod 16として求め、10〜15はA〜Fに対応させます。1桁になった場合は先頭に0を補い、各チャンネルを必ず2文字に揃えます。こうしてできた3つの2桁の値を#の後ろに並べれば完成です。

10進数のチャンネル値が2桁の16進数に変換される様子
各0~255のチャンネルは2桁の16進数になり、#記号の後に連結されます。

計算例

RGB(255, 165, 0)の場合:赤255 = FF、緑165 =(\(165 \div 16 = 10\) 余り \(5\))→ A5、青0 = 00。これらをつなげると#FFA500となり、Webカラーでおなじみの「オレンジ」になります。

よくある質問

3桁だけのHEXコードがあるのはなぜ? #FFFのような短縮形は、#RRGGBBの各ペアが同じ文字の繰り返しになっている場合に使えます(つまり#FFF = #FFFFFF)。このツールは常に6桁のフル形式で出力します。

FFは何を意味しますか? FFは16進数で255、つまりそのチャンネルの最大の強さを表します。

255より大きい値を入力できますか? 各チャンネルの範囲は0〜255に限られるため、それより大きい入力は255に、マイナスの値は0に丸められます。

最終更新: