このツールはCSSのHEX表記をすべて受け付けます。6桁の#ff5733、3桁の省略形#f53、そしてアルファチャンネル付きの4桁・8桁の形式です。#の有無は問いません。結果はrgb()またはrgba()の文字列、各チャンネルの数値、変換の内訳として表示され、逆にRGBからHEXに戻す変換も同じ画面で行えます。すべての処理はブラウザ内で完結し、アップロードもアカウント登録も回数制限もありません。
HEXカラーコード変換（RGB）
すべてブラウザー内で動作します。アップロードも登録も不要です。
CSS
rgb(255, 87, 51)RGB値
255, 87, 51変換の内訳
赤
FF255緑
5787青
3351逆方向の変換（RGBからHEX）
#ff5733HEXカラーコードをRGBに変換する方法は？
HEXカラーコードは16進数2桁を3組並べたもので、1組が1つの色チャンネルに対応します。各組を0から255の10進数に変換すると、#ff5733ならffが赤255、57が緑87、33が青51となり、rgb(255, 87, 51)になります。このツールは入力と同時にその変換を行います。
使い方
- 1HEXコードを入力する. #ff5733（または#f53）のようなHEXカラーコードを入力・貼り付けするか、カラースウォッチで選びます。#は省略できます。
- 2RGB値を確認する. rgb()の文字列、0-255の数値、色のプレビューが入力と同時に更新され、各HEXの組がどう変換されたかの内訳も表示されます。
- 3必要な形式をコピーする. rgb()文字列または数値の横にあるコピーをクリックします。逆方向が必要なら、下の欄にR・G・Bを入力するとHEXコードが得られます。
こんな方に
- フロントエンド開発者 - スタイルガイドのHEXコードをrgb()に変換し、rgba()で透明度を加える。
- デザイナー - HEXを使うツール（CSS、Figma）と0-255の値を使うツール（一部の印刷・映像ソフト）の間でブランドカラーを受け渡す。
- メール・マーケティング担当者 - 表記形式が1種類しか通らないエディタ間でキャンペーンカラーを揃える。
- ゲーム・アプリ開発者 - HEX文字列を解析できないエンジンやSDKに0-255のチャンネル値を渡す。
よくある質問
このHEXからRGBへの変換ツールは無料ですか？
はい、完全無料で登録不要、回数制限もありません。処理はすべてブラウザ内で行われます。
入力した色はどこかにアップロードされますか？
いいえ。変換はデバイス上で動くJavaScriptだけで行われ、サーバーには何も送信されません。ページを一度読み込めばオフラインでも使えます。
HEXからRGBへの変換式は？
HEXコードを2桁ずつ3組に分け、それぞれ16進数から10進数に変換します。最初の桁を16倍して2桁目を足します（a=10 ... f=15）。#ff5733ではff = 15×16+15 = 255、57 = 5×16+7 = 87、33 = 3×16+3 = 51です。
#f53のような3桁の省略形にも対応していますか？
はい。CSSの省略形は各桁が2回繰り返されるので、#f53は#ff5533に展開され、rgb(255, 85, 51)に変換されます。4桁形式も同様で、最後の桁がアルファ値になります。
HEXからRGBAへの変換はどう行いますか？
8桁のHEXコードは最後の組にアルファ値を持ちます。この0-255のバイト値を255で割ってrgba()が求める0-1の値にし、小数点3桁に丸めます。そのため#ff573380はrgba(255, 87, 51, 0.502)になります。
RGBからHEXへの逆変換はできますか？
はい。結果欄の下にあるRGBからHEXの入力欄に赤・緑・青それぞれ0-255の値を入力すると、HEXコードが即座に返されます。範囲外の値は0-255にクランプされます。
HEXではなくrgb()を使う理由は？
主にアルファ値と計算のためです。rgba(255, 87, 51, 0.5)なら色を半透明にでき、多くのAPI、ゲームエンジン、デザイン仕様はHEX文字列ではなく0-255の各チャンネル値を個別に求めます。