HEX から RGB への変換 — HEX カラーコードを RGB 値に変換
HEX カラーコードを RGB 値に変換します。リアルタイムのカラースウォッチプレビュー付きで、完全にブラウザ内で動作します。アップロードもアカウント登録も制限もありません。
HEX to RGB
Convert HEX color codes to RGB values online. Enter a hex code like #ff6600 and get R, G, B values instantly.
HEX と RGB は、ウェブが色を記述する 2 つの方法で、両方とも同じ色を記述します。HEX コード #3B82F6 は 6 文字です。3B、82、F6。それぞれの組は 16 進数の数値で、10 進の値にマッピングされます。3B は 59、82 は 130、F6 は 246 です。RGB トリプレットは rgb(59, 130, 246)、つまり 0〜255 の範囲の 3 つの 10 進数で、各カラーチャネルを表します。この 2 つの表記は置き換え可能です。color: #3B82F6 を使ったスタイルシートと color: rgb(59, 130, 246) を使ったスタイルシートは、どのブラウザでもまったく同じレンダリング結果になります。選ぶのはスタイルの問題で、中身の問題ではありません。
HEX から RGB への変換で「あまり自明ではない」のは、2 つの表記が等価ではないケースです。HEX はアルファを表現でき（#3B82F680 は 50% の不透明度）、RGBA への変換はアルファを別のチャネルとして保持します。一部のレガシー CSS や画像処理ライブラリはアルファなしの rgb(59, 130, 246) しか受け付けません。そのような場合はアルファを落とすか、別の opacity プロパティを使います。逆方向（アルファなしの RGB から HEX）も同様に非対称です。HEX コードは常に 6 桁または 8 桁の 16 進 digit で、変換では慣例に従って # プレフィックスが追加されます。本ツールはこの非対称性両方の方向を処理し、アルファが存在する場合は RGBA 出力を表示します。
最後に受け渡しについてまとめます。最新の CSS を書くことが目的なら、HEX と RGB のどちらも使えます。多くの開発者は片方を選んで一貫して使います。HSL は tint や shade を選ぶのに読みやすい形式です。デザインツールの出力と合わせるのが目的なら、RGB 文字列は Figma、Sketch、Adobe XD がカラーパネルで「RGB」としてエクスポートするものです。JavaScript でのカラー処理（canvas、WebGL、画像操作）が目的なら、RGB がネイティブ形式です。canvas API は RGB トリプレットを受け取るため、HEX を canvas に渡す前に RGB に変換するのが標準的なパターンです。
使い方
HEX コードを入力する
入力欄に 3 桁の HEX（#3B8）または 6 桁の HEX（#3B82F6）を入力します。# を省略した場合は自動的に # が補完され、解析の前に短縮形式の HEX は拡張されます。
RGB の内訳を確認する
出力には赤、緑、青のチャネル（それぞれ 0〜255）が表示されます。右側のライブスウォッチは入力に応じてリアルタイムで更新され、リアルタイムで色を確認できます。フッターには検出された sRGB 色空間が表示されます。
RGB 文字列をコピーする
値を CSS でそのまま使える `rgb(59, 130, 246)` または `rgba(59, 130, 246, 1)` 宣言としてコピーします。スタイルシート、デザインツール、CSS-in-JS のテンプレートリテラルにそのまま貼り付けられます。
よくある質問
RGB は何に使われますか？
RGB（赤・緑・青）はあらゆる画面、プロジェクタ、デジタルカメラが使う加法混色のカラーモデルです。各ピクセルは赤・緑・青サブピクセルの強度で記述され、値の範囲は 0（光なし）から 255（最大光）です。HTML canvas、WebGL、ほとんどの画像形式のネイティブカラーモデルでもあります。
変換はロスレスですか？
はい。HEX と RGB は同じ色を別の表記で表したものです。HEX は基数 16 で表現された RGB で、16 進 digit の各ペアがチャネルを 00〜FF で表します。変換は基数変換であり、変換ではありません。出力は入力と数学的に同一です。
アルファチャンネルは何をしますか？
アルファをオンにすると、不透明度スライダー（0〜100%）が追加され、出力に RGBA 値が含まれます。HEX 入力がアルファを伝えるには 8 桁必要です（#3B82F680）。6 桁の HEX にはアルファがないため、RGBA 出力ではアルファは 100% と見なされます。
画面に表示される色が HEX 値と違うのはなぜですか？
画面は個々にキャリブレーションされているわけではありません。#3B82F6 という HEX 値はすべてのデバイスでまったく同じ sRGB 色ですが、レンダリングされる色はディスプレイのカラープロファイル、輝度、周辺光に依存します。同じ HEX コードでも、2 台のモニターで見え方が異なることがあります。
代わりに HSL 値を入力できますか？
HEX から RGB ツールは HEX 入力専用です。HSL 入力には Color Converter ツールをご利用ください。このツールは HEX、RGB、HSL、CMYK を単一のインターフェースで受け付け、4 つすべてを同時に表示します。内部の変換処理は同じものです。
制限事項
- sRGB のみ対応本ツールはウェブ標準の sRGB 色空間を前提としています。Display P3 や Rec.2020 の色（一部の Apple デザインツールでのみ使われる稀なケース）を参照する HEX コードは sRGB として扱われ、 gamut 外の値は最も近い sRGB 色にクリッピングされます。
- ワイドゲamtut 出力がありませんRGB 出力は常にチャネルあたり 0〜255 で、これは sRGB の範囲です。チャネルあたり 8 ビットを超えるワイド gamut 色については、チャネルあたり 16 ビットの値を出力するツールをご利用ください（ウェブでは稀です）。
- CMYK 出力には対応していません本ツールは HEX と RGB を出力し、CMYK は対象外です。印刷用の色には、CMYK に対応する Color Converter をご利用ください。CMYK は紙の上のインクための減法混色モデルであり、画面モデルではありません。sRGB から CMYK への変換は近似です。
プラットフォーム別の注意点
- macOS
- Digital Color Meter（Applications > Utilities にあります）はカーソル下の色を読み取り RGB を表示します。ブラウザツールは、デザインファイルから取り出した HEX コードを、一部のレガシー CSS や古い画像処理ライブラリで必要とされる RGB に変換するのに適しています。
- Windows
- PowerToys の Color Picker は画面上の任意の色を読み取れて、HEX、RGB、HSL のいずれかの形式で値をコピーできます。ブラウザツールは、デザインファイルや Figma エクスポート、CSS ファイルから取り出した HEX 値を RGB トリプレットに変換するのに適しています。
- Linux
- GIMP のカラーピッカーは HEX と RGB を表示します。ブラウザツールは、CSS ファイルやデザインエクスポート、設定値から取り出した大量の HEX コードを一括変換するのに適しています。コマンドラインで作業する場合は、ImageMagick の `convert -size 1x1 xc:'#3B82F6' -format '%[pixel:p{0,0}]' info:` で同様のことができます。
- Web
- 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。RGB 出力は有効な CSS カラー値であり、RGB 構文をサポートする任意のスタイルシート、CSS-in-JS テンプレート、デザインツールにそのまま貼り付けられます。