HEXをRGBに変換

カラーコードRGB変換ツールでできること（HEX to RGB）

16進数で書かれたカラーコード（HEX）「#3B82F6」を、赤・緑・青の量を0〜255で表したRGB（59, 130, 246）に変換します。ブランドガイドやWebサイトに載っているカラーコードを、PowerPointやExcelの色設定で使える数字にできます。

「#」の無い6桁、3桁の省略形（#38F）、不透明度つきの8桁も読み取ります。結果はrgb() の形と数字だけの形に加えて、赤・緑・青を1つずつコピーできる欄に分けて出します。

カラーコードをRGBの数値に変換する3ステップ

1. 入力するカラーコードを「HEXのカラーコードを貼り付けるか、色を選んでください」の欄に貼り付けます。「#3B82F6」でも「3b82f6」でも読み取ります。
2. 結果を見る貼った瞬間に、「RGBに変換した結果」にRGBの値と、赤・緑・青それぞれの数字が出ます。
3. コピーするCSSなら「RGB（CSS）」、PowerPointなら「R（赤）」「G（緑）」「B（青）」の行を押してコピーし、貼りたい先へ貼ります。

16進数のカラーコードからRGBへの計算方法

6桁のカラーコードは、先頭から2桁ずつが赤・緑・青の量を16進数で表しています。16進数の2桁は「上の桁×16＋下の桁」で10進数に戻せます。A〜Fは10〜15です。

#3B82F6なら、「3B」は3×16＋11＝59、「82」は8×16＋2＝130、「F6」は15×16＋6＝246で、RGBは（59, 130, 246）です。3桁の #38Fは各文字を重ねて #3388FFと読むので、（51, 136, 255）になります。

PowerPoint・ExcelでカラーコードをRGBの数字で指定する

PowerPoint・Word・Excelの色設定（その他の色）には、赤・緑・青を1つずつ数字で入れる欄があります。WebやCanvaで使っているカラーコードの色を資料にそろえるときは、ここにRGBの数字を入れます。

「59, 130, 246」を1つの欄にまとめて貼ることはできないので、このツールでは赤・緑・青の数字を1つずつに分けています。順にコピーして、それぞれの欄へ貼ってください。

8桁のカラーコード（不透明度つき）をrgbaに変換する

「#3B82F680」のような8桁のカラーコードは、末尾の2桁が不透明度です。「80」は10進数で128、255に対して約半分なので、rgba(59, 130, 246, 0.5) になります。

不透明度つきの色をPowerPointで使うときは、赤・緑・青の数字で色を決めてから、色設定にある「透過性」で透け具合を指定します。

カラーコードRGB変換ツールのよくある質問

カラーコード（HEX）からRGBの数字はどうやって求めるのですか？

6桁を2桁ずつ区切り、それぞれを16進数から10進数に直します。#3B82F6なら「3B」が3×16＋11で59、「82」が8×16＋2で130、「F6」が15×16＋6で246なので、RGBは（59, 130, 246）です。16進数のA〜Fは10〜15を表します。

PowerPointの「その他の色」にカラーコードの色を入れるには？

PowerPointの色設定には、赤・緑・青を1つずつ数字で入れる欄があります。カラーコードを上の欄に貼り、「R（赤）」「G（緑）」「B（青）」の行を順に押してコピーし、それぞれの欄へ貼ってください。

3桁のカラーコード（#38F）も変換できますか？

できます。3桁は1文字を2文字に広げた省略形として読むので、#38Fは #3388FFと同じ色になり、RGBは（51, 136, 255）です。8桁のカラーコードは末尾2桁を不透明度として読み、rgba() の形で出します。

「#」を付けずに貼っても変換できますか？

できます。「3B82F6」のように「#」の無い6桁でも、大文字・小文字のどちらでも読み取ります。

RGBからカラーコードに変換したいときは？

逆向きは「ほかの変換」にある「RGBをHEXに変換」を使ってください。赤・緑・青の数字を入れると、「#」付きと「#」なしのカラーコードを出します。HSLもまとめて見たいときは「HEX・RGB・HSLをまとめて変換」が向いています。

入力したカラーコードはどこかに送られますか？

送られません。変換はすべてブラウザの中で行い、値がサーバーへ出ることはありません。登録もログインも要らず、回数の制限もありません。