RGBをHEXに変換

RGB（59, 130, 246）をHEXのカラーコード（#3B82F6）に変換します。#なし・透明度つきの形も並べてコピーできます。

入力した内容はブラウザの中だけで処理し、送信しません。

「59, 130, 246」「rgb(59, 130, 246)」のように、R・G・Bの3つの数字（0〜255）を入れてください。

押すとコピーします。PowerPointの「RGB」欄には「#」や括弧の無い形をお使いください。

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

赤・緑・青の量を0〜255の数字で表したRGB（59, 130, 246）を、16進数のカラーコード（HEX）「#3B82F6」に変換します。PowerPointやExcelの色の設定で見た数字や、デザインの指示書に書かれた数字を、そのままWebやCanvaで使える形にできます。

入力は「59, 130, 246」とまとめて貼っても、「色を選ぶ」から色を選んでも構いません。入力した色の見本とカラーコードがその場で出ます。rgbaの不透明度を含む値は、8桁のHEXにも直します。

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

  1. 入力するRGBの値を入力欄に貼り付けます。「59, 130, 246」でも「rgb(59, 130, 246)」でも読み取ります。数字が手元に無いときは、「色を選ぶ」から色を選べます。
  2. 結果を見る色の見本で、変換している色が合っているかを確かめます。「HEXに変換した結果」に、HEX・HEX（#なし）・RGBなどが並びます。
  3. コピーする「HEX」か「HEX（#なし）」の行を押してコピーし、貼りたい先へ貼ります。

RGBから16進数（HEX）への計算方法

カラーコードは、赤・緑・青の数字をそれぞれ16進数の2桁に直して、赤・緑・青の順に並べたものです。16進数は、0〜9に続く10〜15をA〜Fで表すので、2桁で0（00）から255（FF）までを書けます。

RGB（59, 130, 246）なら、59÷16＝3余り11で「3B」、130÷16＝8余り2で「82」、246÷16＝15余り6で「F6」になり、並べると「#3B82F6」です。16未満の数字は先頭に0を補い、「0A」のように2桁にそろえます。

変換したHEXカラーコードをCanva・CSS・PowerPointに貼るとき

Canva・Figma・CSSは「#」付きの「#3B82F6」をそのまま受け付けます。一方でPowerPoint・Word・Excelの「その他の色」にある入力欄は6桁の英数字だけを受け取る作りで、先頭に「#」があると弾かれます。

そのため変換結果は「HEX」と「HEX（#なし）」を別々の行にしています。貼る前に「#」を消す手間はありません。

rgbaの不透明度つきの色を8桁のカラーコードにする

rgba(59, 130, 246, 0.5) のように不透明度を含む値を入れると、6桁のHEXに加えて、末尾に不透明度の2桁を足した8桁のHEX「#3B82F680」を「HEX（透明度つき）」の行に出します。0.5は255の半分を丸めた128で、16進数では「80」です。

8桁のHEXはCSSでは使えますが、6桁までしか受け付けないアプリもあります。PowerPointでは6桁のHEXで色を決め、不透明度は色の設定にある「透過性」で指定してください。

カラーコードからRGBに戻す・HSLもまとめて出したいとき

逆向きの変換は「HEXをRGBに変換」が向いています。HSLもまとめて見たいときは「HEX・RGB・HSLをまとめて変換」を使ってください。どちらも画面の「ほかの変換」から移れます。

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

RGBの数値からカラーコード（HEX）はどうやって計算するのですか？
赤・緑・青の数字を、それぞれ16進数の2桁に直して並べます。59は「59÷16＝3余り11」で、11を16進数のBにして「3B」、130は「82」、246は「F6」になるので、RGB（59, 130, 246）のカラーコードは「#3B82F6」です。16進数では、0〜9で足りない10〜15をA〜Fで表します。
PowerPointで調べたRGBの数字を、Canvaで使えるカラーコードにできますか？
できます。PowerPointの色の設定に出ている赤・緑・青の数字を、「59, 130, 246」のようにまとめて入力欄へ貼ってください。「HEX」の行を押すとコピーされるので、Canvaの色の欄にそのまま貼れます。
不透明度つきのrgbaもカラーコードに変換できますか？
できます。rgba(59, 130, 246, 0.5) を貼ると、末尾2桁が不透明度の8桁HEX「#3B82F680」も出します。CSSは8桁のHEXを受け付けますが、PowerPointの色の設定は6桁までで、不透明度は別の「透過性」で指定します。
カラーコードからRGBに戻したいときは？
逆向きは「HEXをRGBに変換」を使ってください。#3B82F6のようなカラーコードを貼ると、rgb(59, 130, 246) と、赤・緑・青を1つずつコピーできる欄を出します。HSLもまとめて見たいときは「HEX・RGB・HSLをまとめて変換」が向いています。
入力した色の値はどこかに送られますか？
送られません。変換はすべてブラウザの中で行い、値がサーバーへ出ることはありません。登録は不要で、1日の回数制限もありません。