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

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

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

主な機能

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

RGB から HEX への変換例

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

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

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

RGB から HEX へのコンバーターの使い方

1. 1

   RGB フィールドに RGB タプルを入力または貼り付ける

   RGB 入力に任意の `rgb()` 値を投入します — モダンなスペース区切り `rgb(255 87 51)`、レガシーなカンマ `rgb(255, 87, 51)`、スラッシュ経由のアルファ `rgb(255 87 51 / 0.5)` または `rgba(255, 87, 51, 0.5)` 形式、あるいはパーセントチャネル `rgb(100% 34% 20%)` のいずれでも構いません。本ツールは hex を計算する前にすべての入力形状を同じ内部 RGB タプルに正規化します。不正な文字、範囲外の整数、構文の崩れは静かなインラインエラーになり、有効な RGB は他のすべての形式フィールドをリアルタイムで更新します。

2. 2

   HEX フィールドから hex コードを読み取る

   RGB フィールドの上の HEX フィールドは、対応する hex 値を表示します: 不透明な色には `#FF5733`、アルファ付きには `#FF573380`（8 桁形式）。出力はほとんどのブランドガイドラインとの一貫性のためデフォルトで大文字 hex を使います。小文字（`#ff5733`）は機械的な 1 置換で得られ、CSS として等しく有効です。変換はビット完全 — RGB → HEX → RGB のラウンドトリップは元の 3 つ組を一字一句、浮動小数点ドリフトなしで再現します。

3. 3

   Copy をクリックして hex 文字列をつかむ

   各形式カードの右側に Copy ボタンがあります。1 クリックで値がクリップボードに乗り、ボタンラベルが一瞬「Copied!」に切り替わるのでわかります。コピーされる文字列は先頭の `#` を含むので、CSS ルール、Figma のカラーフィールド、SwiftUI の hex 拡張、Android の `colors.xml` にそのまま貼り付けられます。プラットフォーム固有の構文（SwiftUI の `Color(red:green:blue:)`、Compose の `Color(0xFF...)`、Tailwind v4 の `@theme` トークン）には、ピッカー下の Copy as code セクションを使ってください。

4. 4

   同時に見える: HSL、OKLCH、OKLAB、CMYK、名前付きカラー

   貼り付けた同じ RGB が他の形式フィールドにも反映されます — レガシー CSS 向けの HSL、知覚的に均一なデザインシステム向けの OKLCH と OKLAB、デザイナーのカラーピッカーワークフロー向けの HSV と HWB、印刷見積もり向けの CMYK、ドキュメントや本文向けの最も近い CSS 名前付きカラー。RGB → hex だけに縛られることはありません。Tailwind v4 の `@theme` ブロックに投入する OKLCH の 3 つ組も必要なら、OKLCH フィールドに専用の Copy ボタン付きで並んでいます。

5. 5

   ビジュアルな微調整にピッカーを使う

   形式グリッドの下には、ビジュアル探索のための SL の四角 + 色相スライダー + アルファスライダーがあります。任意のコントロールをドラッグすればすべてのテキストフィールドがリアルタイムで更新され、出発点だった RGB と HEX も含まれます。Chromium 系ブラウザ（Chrome、Edge、Brave）では EyeDropper ボタンがネイティブの `EyeDropper` API を起動し、ブラウザウィンドウの外を含む画面上の任意のピクセルをサンプリングできます — 別アプリの UI から先にスクリーンショットを撮らずに RGB タプルを取得し、即座に hex を読みたいときに便利です。

よくある RGB / HEX の間違い

padStart をスキップ:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
5 文字の不正な hex を生む。

padStart(2, '0') を使う:
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
6 文字の有効な hex; 0〜255 のすべてのチャネル値で正しく動作します。

丸めをスキップ:
(0.5 * 255).toString(16) → '7f.8'
小数点付きの不正な hex を生む。

まず整数に丸める:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
有効な 2 桁 hex ペア; CSS Color 4 の正規化と一致します。

Android の先頭アルファ hex を CSS に出力:
rgb(255 87 51 / 0.5) → #80FF5733（Android 形式）
CSS は alpha=128、R=255、G=87、B=51 とパース — まったく違う色になる。

ターゲットプラットフォームの文書化された形式を使う:
CSS には: #FF573380（アルファを最後のバイトに）
Android Compose には: Color(0x80FF5733)（アルファを最初のバイトに）
再順序化せずに 2 つの間でクロス貼り付けしないこと。

ガンマ符号化された RGB を直接平均:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
明るい黄色ではなく暗いオリーブに見える。

線形 RGB で平均:
復号 → 線形 RGB → 平均 → 再符号化 → rgb(188, 188, 0)
物理的な光の混合が生む明るい黄色に視覚的に一致します。

RGB から HEX を使う人

canvas の RGB を CSS hex に変換するフロントエンド開発者

Canvas API の描画関数は色を RGB タプルとして報告・受領しますが（`ctx.fillStyle = 'rgb(255 87 51)'`）、周囲の CSS スタイルシートは hex 変数（`--color-fill: #FF5733`）を望みます。RGB を一度貼り付ければ、CSS カスタムプロパティに投入できる対応する hex が得られます。canvas でレンダリングされたチャートやデータ可視化からブランドカラーを抽出して静的 UI に再利用するときに便利です。

Photoshop の RGB を Figma の hex に変換するデザイナー

Adobe の Color ピッカー（Photoshop、Illustrator、InDesign 内）は RGB を 3 つのチャネルボックスにわたる 0〜255 整数 3 つで報告します。対照的に Figma はデザインパネルでデフォルトとしてカラー値を hex で表示します。Photoshop の 3 つの整数を `rgb(...)` としてここに貼り付け、hex 出力をコピーし、Figma のカラーフィールドに投入します。スクリーンショット＋スポイトの遠回りなしで、元の Photoshop の色に正確に一致します。

LED センサーの RGB を Web の hex に変換するハードウェア開発者

アドレッサブル LED ストリップ、カラーセンサー、ハードウェアの RGB カメラはすべてチャネル値を 0〜255 整数で報告します。読み取り値が Web ダッシュボードを駆動する必要があるとき（「ランプは現在この色で光っています」）、CSS の `style="background: ..."` 属性が期待するのは対応する hex コードです。センサーの RGB 3 つ組を貼り付け、hex をコピーし、ダッシュボードのマークアップに差し込みます。

Unity のカラーを Web モックアップにエクスポートするゲーム開発者

Unity の `Color` と Unreal の `FLinearColor` のコンストラクタは正規化された 0〜1 の浮動小数点を取ります。各値に 255 を掛ければ対応する RGB 整数が得られます。結果の `rgb(...)` をここに貼り付け、hex をコピーし、ゲーム内のアクセントカラーに正確に一致させる必要がある Web モックアップやマーケティングサイトに投入します。同時に表示される OKLCH ビューも知覚的明度を表面化するので、モックアップのパレットをゲームの輝度レベルに合わせて手で調整できます。

Photoshop のブランドカラーを監査するアクセシビリティエンジニア

ブランドスタイルガイドが色を RGB 整数 3 つ組として報告する（「ブランドのオレンジは RGB 255 / 87 / 51」）一方で、WCAG 監査ツールは hex コードを望むとき、このコンバーターが橋渡しになります。RGB 3 つ組を貼り付け、hex をコピーし、監査にかけます。本ツールの WCAG と APCA のコントラストバッジも結果を 1 ステップで表面化するので、3 つの別ツールを行き来する必要はありません。

rgba() を 8 桁 hex に移行するメール開発者

モダンなメールクライアントの HTML はアルファ付きの色に 8 桁 hex（`#FF573380`）をサポートしますが、レガシーなテンプレートはしばしば同じ値を `rgba(255, 87, 51, 0.5)` として保存します。rgba() をここに貼り付け、8 桁 hex 出力を読めば、移行が機械的になります。HEX フィールドは 50% アルファの場合に `#FF573380` を表示し、依然として必要なフォールバックコンテキストのためレガシーな `rgba()` 形式は RGB フィールドに残ります。

両形式でブランドトークンを文書化する開発者

デザイントークンのドキュメントでは、同じ色を両形式で見せることがよくあります: CSS コードブロック用の hex、本文注釈用の RGB（「ブランドのオレンジは `#FF5733`、RGB 255 / 87 / 51 と等価」）。両方を並べて表示すれば、ドキュメントの書き手は 2 つの別ツールを走らせず 1 回でそれぞれをコピーできます。共有可能な URL ハッシュもあるので、読者は議論中の正確な色にクリックスルーできます。

ピクセルカラーを hex 仕様に対してアサートする QA エンジニア

ビジュアル回帰テストは時にピクセルカラーを RGB 整数として捕捉します（`expect(pixel).toMatchRgb([255, 87, 51])`）が、基となる仕様は hex で与えられます（「ボタンは `#FF5733` で描画されること」）。捕捉した RGB をここに貼り付ければ対応する hex が得られ、QA エンジニアは仕様と直接比較できます。変換のビット完全性のおかげで、比較は浮動小数点ドリフトの差異で揺らぎません。

RGB から HEX の数式とシリアライズ

toString(16).padStart(2, '0') が 1 行実装

RGB から hex への変換全体はチャネルごとに 1 つの式に収まります: `value.toString(16).padStart(2, '0')`。JavaScript の `toString(16)` は 10 進整数を基数 16 の文字列表現に変換します。`padStart(2, '0')` は忘れがちな細部です — これがないと、チャネル値 5 が `'05'` ではなく `'5'` にシリアライズされ、他のチャネルと連結したときに `#55733` のような不正な 5 文字の hex を生んでしまいます。標準イディオムは `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` の後に `'#'` プレフィックスです。

パーセント正規化: × 255 / 100、その後丸め

CSS Color 4 は `rgb()` でパーセントチャネルを許可します: `rgb(100% 34% 20%)` は `rgb(255 87 51)` と等価です。正規化ルールは `Math.round(percent × 255 / 100)`。`50% × 255 / 100 = 127.5` は 128 に丸められます（.5 から離れる銀行家丸め）。パーセントとして表現されたアルファにも同じルールが適用されます（`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`）。整数形式とパーセント形式は正規化後に同一の hex 出力を生み、本ツールは再正規化後に RGB フィールドに正規の整数形式を表面化します。

アルファから hex へ: 255 を掛けて丸め、末尾ペアとして符号化

アルファ付き RGB（`rgb(255 87 51 / 0.5)`）はアルファに 255 を掛けて最も近い整数に丸め、RGB の後ろに 4 番目の hex ペアとして追加することで、8 桁 hex を出力します。`0.5 × 255 = 127.5` を 128 = `0x80` に丸めると、出力は `#FF573380`。CSS Color 4 仕様はこの変換に銀行家丸め（偶数丸め）を使い、本ツールも従います。アルファがちょうど 1 のとき、スタイルシートに末尾の `FF` ペアを漏らさないよう 8 桁形式は 6 桁に戻ります。

RGB 入力: CSS Color 4 のスペース区切りとレガシーカンマの両方を受け付ける

パーサーはモダンな CSS Color 4 形式 `rgb(255 87 51)` とレガシーな CSS 1 形式 `rgb(255, 87, 51)` の両方を受け付けます。モダン形式は他の CSS Color 4 関数表記（`hsl()`、`lab()`、`oklch()`、`color()`）と整合し、これらはすべてスペース区切りとアルファ用スラッシュを使います。レガシーなカンマ形式はすべてのエバーグリーンブラウザで依然としてサポートされ、古いコードベースで一般的です。両方とも同一の hex 出力を生み、本ツールの hex シリアライザはどの入力形状が来たかを気にしません。

ラウンドトリップ安定性のための OKLCH 内部真実の源

このスポークは RGB → HEX を特に対象としていますが、共有の基盤コンバーターは正規の色を内部で OKLCH の 3 つ組として保持します。これにより RGB → HEX → HSL → OKLAB → CMYK → RGB のラウンドトリップがステップごとの浮動小数点ドリフトなしで戻ります。HSL や sRGB をピボットとして経由するレガシーコンバーターは各変換で丸め誤差を蓄積します。OKLAB ではなく OKLCH を選んだことで Hue が安定軸として保持されるため、色相スライダーをドラッグしても誤ってグレーをクロスフェードすることがありません。Björn Ottosson の 2020 年の OKLAB 論文に従います。

チャネル符号化: 8 bit 符号なし、sRGB ガンマ符号化

各 RGB チャネルは 8 bit 符号なし整数（0〜255）で、IEC 61966-2-1（1996）で定義された sRGB 色空間で符号化されます。値は*ガンマ符号化*されています — つまりチャネル値と知覚的な明るさの関係は非線形で、区分的 sRGB 伝達関数（おおよそ 2.4 の指数にゼロ近傍の小さな線形セグメント）に従います。これは色の数学を行うときに重要です: ガンマ符号化された形式の 2 つの RGB 値を平均すると、誤った知覚的中点が得られます。正しい色のブレンドのためには、まず線形 RGB に復号し（CSS Color 4 §11.2）、平均をとり、それから再符号化します。本ツールの内部 OKLCH モデルがこれを透過にします。

RGB / HEX ワークフローのベストプラクティス

ブランドガイドラインでは大文字 hex、コードでは小文字 hex を優先する

ブランドガイドライン、マーケティング PDF、デザイナー向けドキュメントは視覚的一貫性のため大文字 hex（`#FF5733`）を使うのが典型です — 全大文字の見た目がブランド識別子として読めます。コード（CSS、JSON、JavaScript ソース）は慣習として小文字（`#ff5733`）を使うのが典型で、入力が速く、自動生成された linter 出力でより一般的だからです。両者とも有効な CSS で同一にパースされます。各コンテキストで 1 つを選んで一貫してください。本ツールはデフォルトで大文字を出力し、機械的な 1 置換で小文字に切り替えられます。

アルファが 1 未満のときだけ 8 桁 hex を出力する

アルファが 1（完全に不透明）のときは 6 桁形式に戻ります。末尾の `FF` ペア（`#FF5733FF`）は合法な CSS ですが、視覚的にスタイルシートを散らかし、一部のレガシーパーサーを誤レンダリングに誘うことがあります。8 桁形式は意味のある半透明のときだけ現れるべきです。本ツールはこのルールに自動で従います — 不透明な色は 6 桁 hex を、アルファ付きの色は 8 桁 hex を出力し、境界は厳密です（alpha = 1.0 は 6 桁を、alpha = 0.9999 はデータを保持するため 8 桁を出力）。

色の数学で RGB チャネルを直接平均しない

RGB チャネルはガンマ符号化されています — 2 つの RGB 値を平均すると誤った知覚的中点が得られます。`(255, 0, 0)` を `(0, 255, 0)` と平均すると `(127, 127, 0)` という濁った暗いオリーブが生まれ、視覚的に明るい黄色の中点にはなりません。正しい色のブレンドのためには、まず線形 RGB に復号し（CSS Color 4 §11.2）、平均をとり、それから再符号化します。あるいは、知覚距離が均一な OKLAB や OKLCH で作業する方がベターです — まさにデザインシステムのパレットジェネレーターがやっていることです。

CSS 変数には hex を、ハードウェアには RGB を優先する

CSS カスタムプロパティや Tailwind の設定トークンを書いているときは hex を優先します — 簡潔で JSON や YAML にきれいに収まります。消費側のコードがチャネルごとの算術を行うとき（canvas 呼び出し、画像操作、ハードウェア LED ドライバー、OpenGL のカラー属性）は、RGB の整数形式の方が消費が速いです。2 つの形式は同じ色を記述するので、選択は正確性ではなく純粋に誰が読み書きするかの問題です。本ツールの同時フィールドビューが、両方を等しく安価にします。

255 を掛ける前にアルファ範囲を検証する

自前の RGB → 8 桁 hex コンバーターを実装するときは、`× 255` ステップの前にアルファ浮動小数点が `[0, 1]` の内側にあることを検証してください。範囲外のアルファ（負、または > 1）は、一部のパーサーが受け入れ一部が拒否する不正な hex ペアを静かに生む — もろい失敗モードです。まずクランプし（`Math.max(0, Math.min(1, alpha))`）、それから掛け算、それから丸め、それから hex 符号化します。本ツールは壊れた hex 文字列を出力せず、範囲外のアルファに対しては静かなインラインエラーを表面化します。

URL ハッシュを使ってライブのカラー決定を共有する

色の変更ごとに URL ハッシュが `#hex=ff5733` として自動更新されます。URL を Slack スレッドや GitHub Issue に貼り付ければ、開いた誰もが同じ色で同じ hex に着地します。チャットで RGB タプルを貼り付けるよりこの方が信頼できます — 受け手が手で値を入力するときカンマをタイポしたりチャネルを落としたりすることがあるためです — そしてデザインレビューのスレッドで「火曜に話したオレンジ」ではなく正確な色を参照できるようにします。ハッシュはサーバーには送信されません。

よくある質問