Toolivaro

無料のHex→RGB変換ツール

16進数のカラーコード（Hex）とRGB表記を相互変換。3桁・6桁の短縮形式に対応し、即時・完全ローカルで動作します。

ブラウザ内でローカル処理されます

先頭の#は省略可、3桁または6桁 — 大文字・小文字どちらも可。

0〜255の整数3つをカンマまたはスペースで区切ります。

このツールについて

Hex→RGB変換ツールは、フロントエンド開発者が日常的に扱う2つのカラー表記を相互変換します：#3498dbのようなHexコードと、rgb(52, 152, 219)のようなRGB表記です。どちらかを入力または貼り付けると、もう一方が自動的に表示されます。6桁のHexは3つのチャンネル値になり、カンマ区切り・スペース区切りのRGBはHexコードになります。3桁の短縮形式（#fffは#ffffffに展開）、先頭の#の省略、大文字・小文字のどちらも、rgb(52, 152, 219)のような関数構文まで対応しているため、ブラウザのデベロッパーツールやデザインツール、モックアップからコピーした値をそのまま貼り付けられます。バリデーションは厳密です。Hexは有効な16進数のみ、RGBの各チャンネルは0〜255の整数のみを受け付けます。300, 0, 0のような値は、静かに丸めたりクランプしたりせず、明確なエラーメッセージを表示します。両方のフィールドが入力された場合はHexが優先されます。この優先順位はページ上に明記され、予測可能な動作です。変換はチャンネル値の純粋な演算であり、近似は一切ありません。入力はアップロード・記録・保存されません。スタイルガイドがHexで、チャートライブラリがRGBを要求する場合、ダークテーマで色が想定と異なるときのデバッグ、色を構成する赤・緑・青の割合を確認したい場合などに便利です。

結果はどうやって計算されるの？

デザインツールのHex値をチャートライブラリへ

デザインシステムのブランドカラーは#3498dbですが、チャートライブラリはrgb()表記を要求します。変換ツールはHexをペアに分割し（34, 98, db）、16進数として解釈して52, 152, 219を求めます。チャートはrgb(52, 152, 219)を受け取り、同じ青を表示します。

入力 値
Hexカラー #3498db
RGB
結果 rgb(52, 152, 219)

計算式と前提は？

HexからRGBへ

rgb(r, g, b) = Hexのペアを16進数で解釈

記号 意味
Hexのペア 6桁のHexコード（RRGGBB）の2桁ずつのグループを、それぞれparseInt(·, 16)で解釈した値
r, g, b 0〜255のチャンネル値

3桁の短縮形式（#fff）は、CSSと同様に各桁を展開してから解釈します。

RGBからHexへ

hex = #rrggbb（各チャンネルを16進数2桁の小文字で表記）

記号 意味
チャンネル 0〜255の整数
rr gg bb ゼロ埋めした2桁の16進表記（例: 10 → 0a）

よくある間違いは？

  • 300のような範囲外のチャンネルを入力してクランプを期待する — CSSはクランプしますが、変換ツールとしてはエラーで拒否するのが誠実な動作です。
  • 1桁のHexチャンネルが展開されるのを忘れる（#f00は#ff0000であって#00ff00ではない） — ツールは常に展開後の形式を出力します。
  • redやblueのような名前付きカラーを入力する — ツールが受け付けるのは16進数の桁と数値のRGBのみです。

前提と制限は？

  • アルファチャンネル非対応：4桁・8桁のHexとrgba()には対応していません。
  • 名前付きCSSカラー（red、blue、rebeccapurple）は受け付けません — HexまたはRGB形式で入力してください。
  • Hexの出力は常に小文字・6桁で、入力形式を正規化します。

数値の出典は？

最終確認 2026年8月11日 · バージョン 1.0.0 · Toolivaro 外部コンテンツを保証するものではありません。

開発者 進数変換ツール 2進数・8進数・10進数・16進数の整数をBigIntの正確な演算で変換。丸め誤差なし、完全ローカルで動作します。

よくある質問

3桁と6桁のHexの違いは？

#fffのような3桁のコードはCSSの短縮形式で、各桁が2倍に展開されます。#fffは#ffffffと同じ意味です。すべてのモダンブラウザが対応しています。このツールは両方を受け付け、常に完全な6桁形式で出力するため、結果に曖昧さはありません。

アルファ（透明度）値には対応していますか？

現時点では対応していません。8桁のHex（#rrggbbaa）やrgba()には透明度チャンネルが含まれますが、このツールでは解釈しません。アルファ付きの色は、6桁の基本色をここで変換し、アルファは別に管理してください。

なぜHexの出力は小文字なのですか？

16進数は大文字小文字を区別しません。#3498dbと#3498DBは同じ色です。小文字はモダンなツールやミニファイアの慣例であり、コピー&ペーストしやすい一貫した出力になります。

HexとRGBの両方に入力した場合はどうなりますか？

Hexの値が優先されRGBに変換されます。RGB側は無視されます。ツールは推測せずこの優先順位を明記しているため、結果は常に予測可能です。

このコレクションの一部 形式変換ツール

間違いを見つけましたか？ 報告する — すべての修正を確認します.

このツールは役に立ちましたか？

Toolivaro編集チームが当社の方法論に基づいてレビュー済み 計算方法 · 編集方針