MCPで接続 →

計算を入力してください

3桁または6桁のHEXコードを入力してください(先頭の#はあってもなくても可)。

公式

広告

結果

RGBカラー
rgb(52, 152, 219)
from #3498DB
赤(R) 52
緑(G) 152
青(B) 219

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\) となります。

6桁の16進コードを3つのペアに分割し、赤・緑・青のチャンネルに対応させる図
6桁の16進コードは3つのペアに分かれ、それぞれR・G・Bの0〜255の値に変換されます。

計算例

#3498DB を例に見てみましょう。

$$R = \text{34} = 3 \times 16 + 4 = 52$$$$G = \text{98} = 9 \times 16 + 8 = 152$$$$B = \text{DB} = 13 \times 16 + 11 = 219$$

結果は rgb(52, 152, 219) ——落ち着いた中間色のブルーになります。

16進値FF8800をRGB 255, 136, 0に変換し、カラーサンプルを表示
例:#FF8800はRGB (255, 136, 0) に変換され、オレンジ色のサンプルになります。

よくある質問

「#」記号は必要ですか? いいえ、不要です。ツールが自動的に取り除くので、3498db でも #3498DB でも同じ結果になります。

大文字・小文字は区別されますか? 区別されません。ffFF は同じ扱いで、ツールがすべて大文字に統一して処理します。

3桁のコードはどうなりますか? #F00 のような省略形は、各文字を2回ずつ繰り返して #FF0000 に展開されます。これは rgb(255, 0, 0)(純粋な赤)に相当します。

最終更新: