RGB から HEX への変換 — RGB カラーを HEX コードに変換
RGB カラー値を HEX コードに変換します。リアルタイムカラースウォッチプレビュー、RGB と RGBA に対応。完全にブラウザ内で動作し、アップロードは不要です。
RGB to HEX
Convert RGB color values to HEX color codes online. Enter RGB like 255,102,0 and get the hex code.
RGB と HEX は同じ色言語の 2 つの方言であり、それらの間の切り替えは、デザインとコードの交差点で働くすべての人にとって日常的な雑務です。デザインの受け渡しは色を頂点トリプレットとして配信します。すべての画面、すべてのデザインツール、すべての画像編集アプリケーションのネイティブ形式です。本番 CSS と設定ファイルは HEX コードを要求します。HTML 3.2 の bgcolor 属性以来の標準である、コンパクトで単一文字列の表現。コンバーターは、すべての開発者が最終的に頭の中で学ぶ算術を行います。16 倍、16 で割る、各チャネルで繰り返す。
コンバーターが排除する実用的な摩擦は、精神的なコンテキストスイッチです。rgb(59, 130, 246) を指定するデザインスペックを読みながら #3B82F6 を必要とする CSS ファイルを編集中、変換するために停止する必要があります。スタイリング作業の 1 日の中で、そのコンテキストスイッチは何十回も発生し、各スイッチは継続すべきフローの中での小さな認知的な中断です。コンバーターはフローを維持します。RGB 値を貼り付け、HEX をコピーし、編集を続けます。
アルファチャンネルの処理が、現代のウェブ開発にとって重要な機能です。CSS は現在、すべての主要なブラウザで 8 桁 hex カラー（50% の不透明度のための #3B82F680）をサポートしていますが、ほとんどのデザインツールはアルファを別の不透明度値または RGBA 宣言としてエクスポートします。コンバーターは、RGBA 入力を受け取り、アルファが存在する場合は 8 桁 hex 出力を生成し、出力が拡張 hex 形式をサポートしない場合はアルファをドロップして 6 桁 hex 出力を生成することで、2 つの表現を橋渡しします。
使い方
RGB 値を入力する
赤、緑、青の値（それぞれ 0〜255）を 3 つのチャネル入力に入力するか、`rgb(59, 130, 246)` または `rgba(59, 130, 246, 1)` 文字列を貼り付けます。HEX 出力はライブで更新され、スウォッチプレビューがリアルタイムで色を表示します。
HEX 出力を読む
出力は `#` プレフィックス付きの 6 桁 HEX コードです。アルファが有効な場合、出力は 8 桁 HEX コード（RGBA）です。出力は CSS でそのまま使える `#3B82F6` 文字列としてコピーできます。
HEX コードをコピーする
HEX カラーをクリップボードにコピーして、CSS、デザインツール、設定ファイルで使用します。コピーボタンはデフォルトで `#` プレフィックス付きでコピーします。出力がプレフィックスなしの hex を期待する場合は、トグルして切り替えてください。
よくある質問
RGB は 6 桁 HEX 形式にどうマッピングされますか？
各 RGB チャネル（0〜255）は 2 桁の 16 進数（00〜FF）に変換されます。赤チャネルは最初の 2 つの 16 進 digit に、緑は中央の 2 つに、青は最後の 2 つになります。`rgb(59, 130, 246)` は `59=0x3B`、`130=0x82`、`246=0xF6` のため `#3B82F6` になります。
HEX 出力でアルファチャンネルはどうなりますか？
アルファがオンになっている場合、出力は 8 桁 HEX コードになります。最初の 6 桁は RGB チャネル、最後の 2 桁はアルファ値をエンコードします（16 進で 0〜255、FF が完全に不透明、00 が完全に透明）。CSS はすべての現代のブラウザで 8 桁 HEX カラーをサポートします。
RGB 値をパーセンテージとして入力できますか？
本ツールは 0〜255 の整数値と CSS スタイルの rgb() 文字列を受け付けます。`rgb(50%, 50%, 50%)` のようなパーセンテージ値はチャネル単位入力でサポートされていません。`rgb(50%, 50%, 50%)` 文字列全体を貼り付けて変換してください。パーセンテージを変換前に 0〜255 に正規化します。
RGB を直接使う代わりに、なぜ RGB から HEX に変換するのですか？
一部のデザインツール（Figma、Sketch、Adobe XD）は HEX 出力をデフォルトにします。一部の CSS フレームワークと古いテンプレートエンジンは HEX カラー文字列のみを受け付けます。一部の設定ファイル（ターミナルテーマ、ウィンドウマネージャー設定）は HEX を必要とします。既存の RGB 値を HEX に変換することで、他の形式を期待するツールで色を使用できます。
出力は常に大文字の HEX ですか？
はい。出力 HEX は CSS 規約とデザインツールで使用される形式に合わせて大文字 A-F を使用します。CSS は HEX カラーで大文字小文字を区別しないため、小文字の `#3b82f6` はまったく同様に機能します。出力が小文字を期待する場合は、設定で大文字出力を切り替えてください。
制限事項
- チャネルあたり 0〜255 にクランプ0〜255 の範囲外の値は最も近い有効な値にクランプされます。負の値は 0 に、255 を超える値は 255 になります。SDR 範囲外のチャネルを持つ HDR またはワイド gamut カラー値には、カラーメネジメントツールをご利用ください。
- 色空間変換なし本ツールは RGB 値が sRGB 色空間にあると想定しています。Display P3、Adobe RGB、ProPhoto RGB の値は sRGB として扱われ、レンダリングされる色がシフトします。sRGB 以外の色空間には、埋め込みプロファイルを読み取るカラーマネジメントツールをご利用ください。
- 出力は常に 6 桁または 8 桁の HEX短縮形式の 3 桁 hex（例：#33BB88 の #3B8）はデフォルトでは出力されません。3 つのチャネルペアがすべて同じ digit である場合に 3 桁 hex を生成するには、設定で短縮形式出力をオンにします（アルファも削減可能な場合は 4 桁 hex）。
プラットフォーム別の注意点
- macOS
- Digital Color Meter は RGB を表示します。ブラウザツールは、デザイン brief からの RGB 値を CSS または設定ファイルが期待する HEX 形式に変換するのに適しています。
- Linux
- コマンドライン変換の場合、`printf '#%02X%02X%02X\n' 59 130 246` が HEX を出力します。ブラウザツールはライブカラースウォッチプレビューと RGBA サポートを追加します。
- Web
- 完全にクライアントサイドで動作します。オフラインでも動作します。