HEX と RGB 変換 の使い方：完全ガイド（2026年版）

HEX と RGB 変換とは？

HEX と RGB 変換は、ToolsMinifyで提供される無料のブラウザベースのユーティリティです。HEX を RGB に（および RGB を HEX に）変換。ライブスウォッチ、フォーマットキット（HSL + CMYK）、クリック可能な tint→shade ランプ、白/黒上の WCAG コントラスト、貼り付け可能な CSS トークンスニペット。#rgb、#rrggbb、#rrggbbaa の貼り付け、ネイティブカラーピッカー、R/G/B 入力に対応。ブラウザ内 - 登録・アップロード不要。サインアップは不要で、可能な場合はデータをローカルで処理し、モバイルとデスクトップでの速度を重視して構築されています。

HEX と RGB（双方向）、HSL、CMYK、ティント・シェード、WCAG コントラスト、CSS トークンスニペット - 無料オンラインカラー変換。

HEX と RGB 変換を使う理由

• ツールを交換することなく両方向に変換する
• 手動計算による丸め誤差を避ける
• 別の単位系を使用する仕様書や計画を確認する
• サインアップやインストールなしで即座に結果が得られる

HEX と RGB 変換の使い方 - ステップバイステップ

1. ステップ1: HEX を貼る、カラーピッカーを使う、またはプリセットスウォッチをクリック。
2. ステップ2: rgb()/rgba() CSS をコピー、または R/G/B（0-255）入力で HEX を生成。
3. ステップ3: フォーマットキットで HSL/CMYK、tint→shade ランプで明/暗ステップを探索。
4. ステップ4: WCAG コントラストカードを確認し、CSS トークンスニペットをテーマにコピー。

HEX と RGB 変換は変換ツールにあります。ツールページを開き、メインフィールドにインプットを入力すると、結果が即座に更新されます。コピーボタンを使用して、出力結果をドキュメント、コードエディタ、またはスプレッドシートに貼り付けてください。

一般的な使用例

#FFFFFF を RGB に

白: rgb(255, 255, 255)。

#3b82f6 を RGB に

Tailwind blue-500: rgb(59, 130, 246) とフォーマットキット内の HSL/CMYK。

短い #0f0

#00ff00 に展開 → rgb(0, 255, 0)。

コントラスト + トークン

青 #3b82f6 on 白は通常 AA 不合格; トークンスニペットは --brand-rgb をモダン CSS 用にエクスポート。

例

• #FFFFFF を RGB に: 白: rgb(255, 255, 255)。
• #3b82f6 を RGB に: Tailwind blue-500: rgb(59, 130, 246) とフォーマットキット内の HSL/CMYK。
• 短い #0f0: #00ff00 に展開 → rgb(0, 255, 0)。
• コントラスト + トークン: 青 #3b82f6 on 白は通常 AA 不合格; トークンスニペットは --brand-rgb をモダン CSS 用にエクスポート。

プロのヒント

• 計算中は完全な精度を保ち、最終的なラベルのためにのみ丸めてください。
• 変換する前に、ソースが実際にどの単位を使用しているかを確認してください。
• 変換がDPIまたは参照値に依存する場合、それらをメモしてください。

よくある質問

HEX を RGB に変換するには？

HEX の各 2 桁ペアが 00（0）～ FF（255）の 16 進チャンネル。例 #1A2B3C → R=26, G=43, B=60、rgb(26, 43, 60)。入力に合わせて自動変換。

対応 HEX 形式は？

短い #rgb（#fff）、完全 #rrggbb（#3b82f6）、8 桁 #rrggbbaa（アルファ付き）。先頭 # は任意、大文字小文字可。ネイティブピッカーも可。

RGB から HEX にも？

はい - R/G/B を 0-255 で入力すると小文字 #rrggbb を出力。範囲外はクランプ。

HSL と CMYK も表示されますか？

はい。フォーマットキットに HEX、RGB、HSL、CMYK とワンクリック CSS コピー。CMYK は画面近似 - 色が重要なら印刷で必ずプルーフ。

tint → shade ランプとは？

色を白（ティント）/黒（シェード）に混ぜた段階。クリックでその HEX を読み込み、ランプ全体をパレット用にコピー可能。

コントラストカードの意味は？

白/黒背景上のテキストとしての WCAG コントラスト比と、通常/大文字の AA/AAA 合否。UI 色を公開前に確認するのに有用。

rgb() と rgba() の違いは？

rgb() は R/G/B のみ。rgba() は 0（透明）～ 1（不透明）のアルファを追加。8 桁 HEX 貼り付け時は rgba() を出力。

必要な関連ツール

ToolsMinifyで他の変換ツールを探索してください。関連ユーティリティはHEX と RGB 変換ページにリンクされており、サイトを離れることなくワークフローを完了するのに役立ちます。