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

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

// 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]

主な機能

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

HEX から RGB への変換例

#FF5733

#3b82f6

#FF573380

#F73

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

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

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

1. 1

   HEX フィールドに HEX コードを貼り付ける

   HEX 入力に任意の hex 値を投入します — 先頭の `#` のあり/なし、3 桁の省略形（`#F73`）、6 桁の標準形（`#FF5733`）、4 桁のアルファ省略形（`#F738`）、アルファ付き 8 桁の標準形（`#FF5733CC`）のいずれでも構いません。本ツールは内部でこの 5 つの入力形状を同じ正規の色に正規化します。大文字小文字は無視されます（`#ff5733` と `#FF5733` は同一にパースされます）。不正な文字や桁数違いは静かなインラインエラーになり、有効な hex は他のすべての形式フィールドをリアルタイムで更新します。

2. 2

   RGB フィールドから RGB タプルを読み取る

   HEX フィールドの下にある RGB フィールドは、CSS Color 4 のモダンなスペース区切り構文で対応する `rgb()` 値を表示します: 不透明な色には `rgb(255 87 51)`、アルファ付きには `rgb(255 87 51 / 0.5)`。各チャネルは 0〜255 の整数で、アルファは 0〜1 に正規化されます。値はビット完全です — `parseInt('FF', 16)` は浮動小数点演算なしで 255 を返すので、hex への往復は元の入力をそのまま再現します。

3. 3

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

   各形式カードの右側に Copy ボタンがあります。1 クリックで値がクリップボードに乗り、ボタンラベルが一瞬「Copied!」に切り替わるのでコピー成功がわかります。コピーされる文字列は正規の CSS Color 4 構文（`rgb(255 87 51)`）です。ターゲットがレガシーなカンマ形式を必要とする場合、変換は機械的です（スペースを `, ` に置換）。プラットフォーム固有の出力（SwiftUI、Compose、Flutter、Tailwind v4）には、ピッカー下の Copy as code セクションを使ってください。

4. 4

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

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

5. 5

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

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

よくある HEX / RGB の間違い

#F73 が #000F73 に左パディングされると仮定:
期待: 暗い青 rgb(0, 15, 115)
実際:  明るいオレンジ rgb(255, 119, 51)

3 桁省略形は各桁を複製:
#F73 → #FF7733 → rgb(255, 119, 51)
本ツールの入力中ライブ展開で確認できます。

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 のすべてのチャネル値で正しく動作します。

CSS 8 桁 hex を レガシー Android Color.parseColor() に貼り付け:
#FF573380 が #AARRGGBB として解釈される
→ 色もアルファもまったく違う結果。

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

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

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

HEX から RGB を使う人

Figma の HEX を canvas の RGB 呼び出しに変換するフロントエンド開発者

Figma は hex をエクスポートしますが、`CanvasRenderingContext2D.fillStyle` は hex と `rgb()` の両方を受け付けます — そしてチャネルごとの算術（グラデーション、ブレンディング、画像操作）をしているとき、hex を毎回再パースするよりチャネル整数を直接持っている方が速いです。一度 hex を貼り付け、`rgb(255 87 51)` タプルをコピーし、canvas 呼び出しに差し込みます。自分の側で hex パースコードを書く必要はありません。

Web の HEX を Photoshop / Illustrator の RGB に翻訳するデザイナー

Adobe の Color ピッカーはネイティブ入力として 3 つのチャネルボックスに 0〜255 の整数を受け付けます。Web の hex を本ツールに貼り付け、R / G / B の整数を読み取り、Photoshop に入力します。スクリーンショット＋スポイトの遠回りなしで元の Web カラーに正確に一致します。デザイナーが印刷を意識した Adobe レイアウトアプリで Web カラーをモックする必要があるときに便利です。

ブランド HEX を Unity / Unreal の RGB API に読み込むゲーム開発者

Unity の `Color` と Unreal の `FLinearColor` はどちらも 0〜1 の正規化された浮動小数点を受け取ります。ブランド hex を貼り付け、0〜255 の整数を読み、255 で割ります（または本ツールの正規化された浮動小数点出力を Copy as code で取得）。変換は機械的ですが手作業ではミスしがちで、`(1.0, 0.341, 0.2)` を期待するコンストラクタに `(255, 87, 51)` を入力すると、クリップされた白い色と困惑したツイートが生まれます。本ツールは両形式を表示します。

アドレッサブル LED ストリップをプログラミングするハードウェア開発者

WS2812、APA102、その他のアドレッサブル RGB LED ストリップは LED ごとに 0〜255 の整数チャネルを受け取ります。壁掛けの製品ディスプレイ用のブランド hex を貼り付け、RGB の 3 つ組を読み、コントローラの色配列に投入します。マーケティングチームが hex を指定し、ファームウェアエンジニアが `pixels.setPixelColor(i, r, g, b)` 呼び出し用のチャネル値を必要とするときに便利です。

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

WCAG 2.1 のコントラスト検査は内部で RGB 入力を取ります。ブランド hex を貼り付ければ、対応する RGB に加えて白と黒に対する WCAG 比、APCA Lc スコアを 1 画面で得られます。ブランドカラーが本文テキストの 4.5:1 下限を落とす場合、隣接する知覚的に均一な OKLCH フィールドで、ブランドアイデンティティを失わずに L を持ち上げてコントラストをクリアするのが簡単です。

インライン RGB でメールテンプレートを組むデザイナー

一部のメールクライアント（Windows 版 Outlook、古い Gmail モバイル）は HTML 属性内の hex を一貫しないパースをします — `` が特定のプラットフォームで黒として描画されることがあります。信頼できるフォールバックは同等のインライン RGB `rgb(255, 87, 51)` 形式です。ブランド hex を貼り付け、レガシーカンマ構文の RGB 文字列をコピーし（モダンスペース形式から手で置換）、メールテンプレートの `style` 属性に投入してください。

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

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

ピクセルカラースナップショットを検証する QA エンジニア

ビジュアル回帰テストはしばしばレンダリングされたピクセルに対して特定の RGB 値をアサートします（`expect(pixel.r).toBe(255)`）。仕様が hex で与えられている場合（「ボタンは `#FF5733` で描画されること」）、QA エンジニアはアサーションを書くために対応する RGB 整数を必要とします。hex を貼り付け、R / G / B を読み取り、テストに差し込みます。変換のビット完全性のおかげで、テストは浮動小数点ドリフトの差異で揺らぎません。