HEX から RGB へのコンバーター

任意の HEX カラーコードを RGB にブラウザで変換できます。3 桁・6 桁・アルファ付き 8 桁の HEX すべてに対応。無料・即時・登録不要、色データはページから一切送信されません。

トラッキングなしブラウザで動作無料

すべてのカラー変換はブラウザでローカルに行われます。サーバーへのデータ送信はありません。

HEX

RGB

HSL

HSV

HWB

CMYK

OKLCH

OKLAB

Named

色域: sRGB Display P3 Rec2020

コントラスト対: —

AA AA-Lg AAA AAA-Lg · APCA Lc —

色覚特性シミュレーション（8 タイプ）

1 型 2 色覚 / Protanopia（赤色覚異常） —

2 型 2 色覚 / Deuteranopia（緑色覚異常） —

3 型 2 色覚 / Tritanopia（青色覚異常） —

全色盲 / Achromatopsia（完全） —

1 型 3 色覚 / Protanomaly（赤色弱） —

2 型 3 色覚 / Deuteranomaly（緑色弱） —

3 型 3 色覚 / Tritanomaly（青色弱） —

部分全色盲 / Achromatomaly（部分） —

Tints / Shades / Tones / Harmonies

ティント

シェード

トーン

ハーモニー

コードとしてコピー

CSS Custom Property —

Tailwind v4 —

SwiftUI —

Android Compose —

Flutter Dart —

一般的な色のリファレンス

CSS Color 4 適合性、3/4/6/8 桁の hex 形状サポート、アルファペア復号の正確性、HEX と RGB の 0〜255 範囲全域でのラウンドトリップのビット完全性についてレビュー済みです。 — Go Tools エンジニアリングチーム · May 27, 2026

私たちのチームは、HEX から RGB への変換を W3C CSS Color 4 仕様のリファレンスベクトルと、標準的な parseInt / toString 基数 16 のラウンドトリップに対して検証しています。

HEX から RGB へのコンバーターとは？

HEX から RGB へのコンバーターは、HEX カラーコード（#FF5733）をそれが表す 3 つの整数チャネル値（rgb(255 87 51)）に変換する小さなユーティリティです。HEX と RGB は、1990 年代後半以降、すべての Web スタイルシート、デザインツール、画像ピクセルパイプラインが基盤に据えてきた 2 つの形式であり、両者間の変換はカラーツールの中で最もよく行われる単一操作です。HEX は Figma、Sketch、Photoshop、そしてあらゆるブランドガイドライン PDF がデフォルトでエクスポートする簡潔なコピペ形式 — CSS カスタムプロパティに収まりやすく、目がパターンを覚えれば一目で読める 6 文字の 16 進文字列です。RGB はハードウェア API、canvas 描画呼び出し、画像バッファ操作、OpenGL カラー属性、ほとんどのグラフィックス SDK が期待するチャネルアドレス形式 — 0〜255 の整数（または 0〜1 の正規化された浮動小数点）3 つを別々に持ち、LCD の赤・緑・青のサブピクセル、あるいは CRT の蛍光体に直接マッピングされます。両者の変換は機械的です: hex を 2 桁ずつ 3 ペアに分け、各ペアを 16 進数として読みます。本ツールはこの変換を入力中にライブで実行します。クリックする「Convert」ボタンはなく、他のあらゆる一般的なカラー形式（HSL、OKLCH、OKLAB、HSV、HWB、CMYK、加えて 148 個の CSS 名前付きカラー）を RGB 出力と並べて無料で表示します。

RGB 形式そのものも、もう少し詳しく見る価値があります。 標準の 24 bit sRGB は各チャネルを 0〜255 の 8 bit 符号なし整数として符号化します — チャネルあたり 256 値、合計 16,777,216 色（256³）。リファレンス標準は IEC 61966-2-1、1996 年の sRGB 仕様で、当時主流だった CRT 蛍光体プライマリに固定されています。CSS は rgb() 関数を介して 3 つの構文形式で RGB を提供します。CSS 1 のオリジナル形式はカンマ区切り: rgb(255, 87, 51)。CSS Color 4（2022 年以降の W3C Candidate Recommendation）はモダンなスペース区切り形式 rgb(255 87 51) を追加し、オプションでスラッシュの後にアルファチャネルを付けられます: rgb(255 87 51 / 0.5)。両形式は互換で、すべてのエバーグリーンブラウザに搭載されています。RGB はパーセントチャネルも受け付けます: rgb(100% 33% 20%) は rgb(255 87 51) と等価で、読みやすさのために手書きのスタイルシートで好まれることがあります。アルファは特にレガシーサポートのために専用の rgba() 関数があり — rgba(255, 87, 51, 0.5) は IE 9 まで通用する正規形式です。CSS Color 4 はまた明示的な sRGB アドレッシング向けの color(srgb 1 0.341 0.2) 構文と、hex では符号化できない広色域値のための並列の color(display-p3 ...) および color(rec2020 ...) 関数を追加しました。

変換の数学は両方向ともクリーンに動きます。HEX → RGB: 6 桁 hex #RRGGBB を parseInt(hex.slice(1, 3), 16)、parseInt(hex.slice(3, 5), 16)、parseInt(hex.slice(5, 7), 16) で 3 つの 2 桁 16 進数としてパースします。3 桁の省略形 #RGB は、パース前に各桁を複製して展開します（#F73 → #FF7733） — これは左パディングでは*ありません*。アルファ付き 8 桁 #RRGGBBAA は末尾ペアを同様にパースし、255 で割って 0〜1 のアルファ浮動小数点を得ます。4 桁アルファ省略形 #RGBA はまず各桁を展開します（#F738 → #FF773388）。RGB → HEX は逆の手順です: 各チャネルについて value.toString(16).padStart(2, '0') を呼んで 2 桁の hex ペアを得（padStart が肝心 — これがないとチャネル値 5 が '05' ではなく '5' にシリアライズされ、不正な hex を生む）、それを連結します。両方向ともビット完全です: 16² = 256 がチャネルが占める 0〜255 のバイト範囲とちょうど一致するので、HEX → RGB → HEX のラウンドトリップは浮動小数点ドリフトなしで元の入力をそのまま再現します。

なぜ HEX かそれとも RGB か？ HEX は短く、デザインツールにネイティブで、目が時間をかけて覚える形式です — ほとんどのフロントエンド開発者は #3b82f6 を見れば Tailwind の blue-500 だと一目でわかります。RGB は明示的なチャネルアドレッシングで、JavaScript で計算を回すのが容易、かつアルファとパーセントをきれいに受け付けるのは 2 つのうちこちらだけです。2 形式が並存するのは、解く問題が異なるからです。Web スタイルシートとブランドガイドラインは、コピペコストが支配的なので HEX に傾きます。canvas 描画、画像処理、ハードウェア LED API、チャネルごとの算術を行うコードは、タプルへのインデックスが文字列スライスより速いので RGB に傾きます。両者の切り替えは典型的な Web プロジェクトで何十回も起こります — Figma から hex を貼り付け、ctx.fillStyle = ... 呼び出し用に RGB 整数に変換し、CSS 変数定義のために hex に戻す。

このツールの HEX → RGB ワークフローは、同じ統合カラーコンバーターを共有する 5 スポークファミリーの一方向です。専用の統合カラーコンバーターがハブで、9 つの形式を同時に編集可能で表示します。HEX と RGB 以上のものをワークフローが必要とするときに正しいツールです。単方向のスポークは具体的な Google 検索意図を狙います: 逆方向には RGB から HEX へのコンバーター、レガシーなデザイナー認知空間には HEX から HSL へのコンバーター、モダンな知覚的均一デザインシステムには HEX から OKLCH へのコンバーター（Tailwind v4 と shadcn は現在どちらもデフォルトで OKLCH）、印刷準備の近似には HEX から CMYK へのコンバーター。5 つのスポークとハブはすべて同じパースエンジンと同じ変換数学を共有しているため、ファミリー全体で結果は同一であることが保証されます。すべての変換はブラウザでローカルに動作します — hex コードがアップロードされたりログに記録されたりすることはなく、入力中のネットワークリクエストはゼロです。DevTools で確認してください.

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

主な機能

5 つの HEX 形状をすべて同一にパース

3 桁 #F73、アルファ付き 4 桁 #F738、6 桁 #FF5733、アルファ付き 8 桁 #FF5733CC、加えて各々の # なし版（F73、FF5733 など）。パーサーは表示前にこれらすべてを同じ内部 RGB タプルに正規化するので、ソースが使っている形状をそのまま貼り付けられ、省略形を手で展開する必要はありません。大文字小文字も正規化されます — #ff5733 と #FF5733 は同一の出力を生みます。

モダンなスペース区切り構文の RGB 出力

RGB フィールドは CSS Color 4 のモダンな形式で値を提示します: 不透明な色には rgb(255 87 51)、アルファ付きには rgb(255 87 51 / 0.5)。両形状はすべてのエバーグリーンブラウザ（Chrome 65+、Safari 13+、Firefox 52+）で動作します。レガシーなカンマ形式 rgb(255, 87, 51) はターゲットが必要とするなら機械的な 1 置換で得られます。新しいコードでは、CSS Color 4 の他の関数構文と整合するモダン構文が好まれます。

ビット完全、浮動小数点ドリフトなし

HEX → RGB は整数対整数の数学です: parseInt(hex, 16) は浮動小数点を一切介さず正確な 0〜255 値を返します。逆方向（.toString(16).padStart(2, '0')）も同様に正確です。HEX → RGB → HEX → RGB → HEX のラウンドトリップは無期限に元の入力をそのまま再現します。内部の OKLCH を真実の源とすることで、より長い鎖 HEX → RGB → HSL → OKLAB → HEX もビット安定に保たれます — HSL 経由でルーティングするレガシーコンバーターでは保証できません。

アルファチャネルをクリーンに復号

アルファ付き 8 桁および 4 桁の hex（#RRGGBBAA と #RGBA）を正しくパースします。末尾ペアは 0〜1 のアルファ浮動小数点にマッピングされます: 00 → 0、80 → 0.502、FF → 1。出力はデフォルトで CSS Color 4 のスラッシュ構文（rgb(255 87 51 / 0.5)）を使い、レガシーな rgba(255, 87, 51, 0.5) 形式は 1 置換で得られます。アルファ値が 8 桁 hex に埋もれているデザイントークン移行で有用です。

他の 8 形式を同時に表示

貼り付けた同じ hex が HSL、HSV、HWB、OKLCH、OKLAB、CMYK、そして最も近い CSS 名前付きカラーも駆動し — すべて同じページに一目で並びます。hex → RGB だけに縛られることはありません。チームメイトが Tailwind v4 トークン用の OKLCH の 3 つ組、ドキュメント本文用の最も近い名前付きカラー、印刷見積もり用の CMYK 近似を必要としても、各値は専用の Copy ボタン付きですでにそこにあります。

WCAG + APCA のコントラストを内蔵

hex を通すとコントラスト行が即座に白と黒の両方に対して、WCAG 2.1（規制下限: 本文テキストで 4.5:1、AAA で 7:1）と APCA Lc（提案中の WCAG 3 後継: 本文テキスト目標は |Lc| ≥ 75）の両方でスコアリングします。ブランド hex を RGB に変換したところで、本文テキストとして実際に読みやすいかを出荷前に検証したいときに便利です。

CSS / Tailwind v4 / SwiftUI / Compose / Flutter としてコピー

ピッカーの下の Copy as code セクションは、現在の色を 5 つのプラットフォーム向けの貼り付け可能なスニペットに変換します: CSS カスタムプロパティ（--color-brand: rgb(255 87 51)）、Tailwind v4 @theme トークン、SwiftUI Color(red:green:blue:) リテラル、Jetpack Compose Color(0xFFFF5733) 定数、Flutter Color(0xFFFF5733)。各プラットフォームが期待する厳密な構文で、iOS のアセットカタログ、Android のテーマファイル、Flutter の ThemeData に投入できる状態で提供されます。

100% ブラウザ完結 — アップロードなし、トラッキングなし

すべての hex パース、RGB 変換、コントラストスコアリング、パレット生成はブラウザでローカルに実行されます。hex コードは送信されず、サーバーに記録されず、解析もされません。入力中のネットワークリクエストはゼロ — DevTools で確認してください。未発表のブランドパレット、社内デザイントークン、NDA 下のドラフトモックアップ、その他あらゆる機密のカラー作業に安全です。

正確な色を共有できる URL ハッシュ

現在の色は変更のたびに #hex=ff5733 として URL ハッシュに自動符号化されます。URL をコピーして Slack スレッドや GitHub Issue に貼り付ければ、開いた人は誰でも同じ hex で同じ RGB 結果に着地します。ハッシュはアドレスバー内にしか存在せず、サーバーには送信されません（ブラウザは HTTP リクエストに URL フラグメントを含めません）。リンクを共有してもサードパーティに色が漏れることはありません。

HEX から RGB へのコンバーター代替の比較

RapidTables Hex to RGB

browser tool

「hex to rgb」の Google デフォルト結果 — hex 入力 RGB 出力の単方向フォームで、他の形式は見えません。検索からの単発参照には有用です。OKLCH、コントラスト検査、色域検出、アルファ処理、複数形式同時表示が欠けています。本ツールは骨格的な単一変換ケース以外のすべての軸で勝ります。

ColorHexa

browser tool

クエリした任意の hex に対して長年にわたる色ごとの SEO ページ: 変換、パレット、ハーモニー、グラデーションを深いメタデータで提供します。UI は古め（2010 年代前半）、OKLCH サポートなし、APCA コントラストなし、広色域処理なし。Google 経由で特定の hex を SEO 的に発見するには強いですが、ユニファイドフィールド UX への入力が速いアクティブな変換ワークフローには弱いです。

W3Schools Hex Calculator

browser tool

教育に焦点を当てたページ上の初心者向け HEX/RGB/HSL トグルで、検索結果に偏在します。OKLCH なし、rgba を超えるアルファ処理なし、高度な機能なし。W3Schools の解説コンテンツと並べて参照に有用です。本ツールは他のすべての軸で勝ちます: より多くの形式、知覚数学、色域 + コントラスト + CVD 機能、Tailwind v4 / SwiftUI / Compose / Flutter のモダンなコードエクスポート。

ブラウザ DevTools カラーピッカー

built-in browser feature

Chrome、Firefox、Safari の DevTools にはすべて、CSS ペインのカラースウォッチをクリックすると hex を RGB にインライン変換するカラーピッカーが付属します。無料、インストール不要、常に利用可能。OKLCH なし、共有可能 URL なし、Web 以外のプラットフォーム（SwiftUI、Compose）向けのコードエクスポートなし。CSS をデバッグしているときは DevTools に手を伸ばし、クロスプラットフォーム出力が必要なときは本ツールに手を伸ばしてください。

macOS Digital Color Meter

native macOS app

OS X 以来すべての Mac にバンドル — 任意のピクセルにホバーすると RGB / hex / 線形値を読みます。画面上の任意のアプリからピクセルカラーをサンプリングするのに優れています。貼り付けた hex 値の変換はしません。これはコンバーターではなくスクリーンサンプラーです。ブラウザ内で同じスクリーンサンプリング機能を得るには、本ツールのピッカーの EyeDropper ボタン（Chromium 系ブラウザのみ）を使ってください。

ConvertingColors

browser tool

多くの空間（HEX、RGB、HSL、HSV、CMYK、XYZ、CIELAB）をカバーする色ごとの SEO ページ。モダンな OKLCH サポートと統合フィールド編集 UX が欠けています。自動生成のコンテンツページはコンテンツファーム感がありますが、変換データ自体は正しいです。Google 経由で個々の色のメタデータを掘るには良いですが、アクティブなワークフローでは本ツールの方が速いです。

HEX から RGB への変換例

スクリーンショットから HEX を貼り付ける → RGB タプル

#FF5733

RGB の出力: rgb(255 87 51)。古典的なユースケース — デザイナーが Figma にブランドカラーを投入し、それをスクリーンショットし、スポイトで hex を取り出し、いまそのチャネル整数を canvas 描画呼び出し、ハードウェアの LED ストリップ、画像バッファに対するピクセル数学のために必要としている、という状況です。表示しているスペース区切り構文は CSS Color 4 のモダンな形式で、レガシーなカンマ形式 rgb(255, 87, 51) も意味は同一で、IE 3 以降のすべてのブラウザでサポートされています。

Tailwind のブランド HEX を Photoshop 用に RGB に変換する

#3b82f6

RGB の出力: rgb(59 130 246)。Adobe の Color ピッカー（Photoshop、Illustrator、InDesign 内）はネイティブ入力として 0〜255 範囲の RGB 整数を受け付けます — 3 つのチャネルボックスに 59 / 130 / 246 を貼り付ければ、Tailwind の blue-500 にぴったり一致します。デザイナーが Web カラーを印刷を意識したレイアウトアプリでモックする場合や、画像編集のためスウォッチライブラリにブランドカラーをサンプリングする場合に便利です。

アルファ付き 8 桁 HEX → rgba

#FF573380

RGB の出力: rgb(255 87 51 / 0.5)。最後のペア（80）は 128/255 ≈ 0.502 として復号され、CSS Color 4 のスラッシュ構文経由でアルファチャネルとして表面化します。同等のレガシー形式は rgba(255, 87, 51, 0.5) で、これは今でもどこでもサポートされ、古いプリプロセッサが期待する形式です。アルファ付き 8 桁 HEX は 2018 年にすべてのエバーグリーンブラウザでネイティブ出荷されました。それ以前のアルファは rgba() 関数経由で表現する必要がありました。

3 桁の短い HEX の展開

#F73

RGB の出力: rgb(255 119 51)。CSS 仕様は 3 桁 hex を、各桁を複製して 6 桁同等の表現を作る省略形として定義しています: #F73 は #FF7733 に展開され、R = FF = 255、G = 77 = 119、B = 33 = 51 となります。これは左パディング*ではありません* — #F73 は #000F73 では ありません。初心者の多くがここを誤解します。本ツールの展開挙動はこのルールを一目で見えるようにします。

一般的な HEX → RGB 変換リファレンス

最もよく変換される 10 個の hex コードとその RGB 等価のリファレンス表 — 純粋なプライマリ、純粋なセカンダリ、Tailwind パレットから 2 つの実世界ブランドカラー。

黒

#000000 → rgb(0 0 0)

純粋な黒。3 チャネルすべてがゼロ — 発光がない状態です。RGB の 3 つ組 (0, 0, 0)。

#000000 → rgb(0 0 0)

画面上の純粋な黒はデザイン選択として正しいことは稀です — 柔らかい本文テキストには #111 か OKLCH の知覚的明度 0.1〜0.15 を試してください。