HEXからRGBへのカラー変換ツール

計算を入力してください

HEXカラーコード 3桁または6桁のHEXコードを入力（#は省略可）

結果

RGBカラー

rgb(52, 152, 219)

赤（R）	52
緑（G）	152
青（B）	219

HEXからRGBへの変換ツールとは？

HEXカラーコードとは、色を6桁の16進数で表したもので、Webデザインやプログラムのコーディングはもちろん、CSSやグラフィックソフトでも幅広く使われています。HEX→RGB変換ツールは、このコードを「赤（Red）」「緑（Green）」「青（Blue）」という3つの成分に分解し、それぞれ0〜255の10進数で表示します。RGB値は、各種プログラミング言語やデザインツール、16進数が使えない場面などで役立ちます。

RGBは色を赤・緑・青の光の組み合わせとして表します。

使い方

入力欄にHEXコードを入力するだけです。先頭の#は付けても付けなくても構いません。#3498dbのような6桁表記でも、#f00のような3桁の短縮表記でも対応しており、3桁の場合は自動的に6桁へ展開されます。計算ボタンを押せば、対応するRGB値とカラースウォッチ（色見本）がその場で表示されます。

計算式の仕組み

HEXコードは2文字ずつの3つのペアに分けられます。それぞれのペアは16進数（base-16）で、これを10進数（base-10）に変換します。たとえばペアFFは \(15 \times 16 + 15 = 255\) となり、これが1チャンネルの最大値です。一方、00は0で最小値となります。基本ルールは、次のとおりです。

$$(R,\,G,\,B) = \bigl(\text{hex}_{1\text{-}2},\ \text{hex}_{3\text{-}4},\ \text{hex}_{5\text{-}6}\bigr)_{16}$$

R = int(hex[0:2], 16)、G = int(hex[2:4], 16)、B = int(hex[4:6], 16) です。

16進コードは3つのペアに分かれ、それぞれが赤・緑・青の値になります。

計算の具体例

HEXコード#3498DBを例にしてみましょう。これを分割すると34、98、DBの3つのペアになります。それぞれを変換すると、

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

結果は rgb(52, 152, 219)、爽やかなスカイブルーです。

よくある質問（FAQ）

「#」記号は必要ですか？ 必要ありません。本ツールはハッシュ記号やHEX以外の文字を無視するため、#fffでもfffでも同じように変換できます。

3桁のHEXコードはどうなりますか？ #abcのような短縮コードは、変換前に自動的に#aabbccへ展開されます。

RGBの最大値はいくつですか？ 各チャンネルは0（HEXで00）から255（HEXでFF）までの範囲で、合計16,777,216色を表現できます。