本文へ移動

RGBからHEXへ変換

RGB → HEX
#FF8000

rgb(255, 128, 0)

シンプルなRGB→HEX変換ツールです。RGB値を16進数形式にすぐ変換できます。

最終更新日: 2026 年 9 月 23 日

機能

  • 赤、緑、青チャンネルのインタラクティブ スライダー (0 ～ 255)

  • ライブ カラー プレビューには選択内容がリアルタイムで表示されます

  • 正確な制御のための直接数値入力

  • HEX 値と RGB 値の両方をワンクリックでコピーします。

  • スムーズな移行を備えたクリーンで直感的なインターフェース

何をするのか

スライダーをドラッグします。色の変化を観察してください。このツールは、rgb(r, g, b) と #hexcode の両方の形式を同時に表示します。特定の色合いが必要ですか?正確な値を入力します。どちらの形式もワンクリックでコピーできます。

以下に最適:

  • ブランドカラーに合わせたWeb デザイナー

  • CSS を作成する開発者

  • デジタル アーティストが正確なカラーコードを見つける

  • カラー形式間で変換するすべての人

インストールはありません。サインアップはありません。色変換だけで機能します。

RGB から 16 進数への変換とは何ですか?

RGB から 16 進数への変換は、3 つの別々の赤、緑、青の数値を 1 つの 6 文字コードに変換し、ブラウザーやデザイン ツールは単一の色として読み取ります。

RGB モデルは、画面上で赤、緑、青の光がどれだけ結合するかに基づいて、それぞれ 0 ～ 255 の 3 つのチャネル値として色を表現します。

16 進値は、同じ 3 つの数値をハッシュ記号を接頭辞としてコンパクトな文字列にパッケージ化し、その文字列を余分な解析を行わずに HTML (EN) または CSS に直接貼り付けることができます。

Slack 独自のブランド ガイドラインには、その特徴である紫が両方向でリストされています。16 進数では #4A154B 、RGB では 74、21、75 で、コンバーターが生成する正確な組み合わせです (Slack ブランド ガイドライン (EN))。

2 つの形式は同じ色を記述します。ピクセルについては何も変わりません。数値の書き方のみが変わります。

  • ディスプレイは赤、緑、青のサブピクセルから構築されているため、RGB は画面のネイティブ形式です。
  • Hex は HTML と CSS で最も一般的に見られる短縮形式です
  • コンバーターは単に 2 つの間で変換を行うだけで、目に見える色を変更することはありません。

これは、カラー ピッカー、パレット ジェネレーター、または色の名前を識別するツールではありません。

これは、RGB カラーを定義する数値を対応する 16 進数に変換するという 1 つのジョブを実行し、そのジョブは毎回同じ方法で実行されます。

RGB から 16 進数への変換式はどのように機能しますか?

各 RGB チャネルは個別に変換されます。10 進数は 2 桁の 16 進数のペアに変換され、3 つのペアが 1 つの文字列に結合されます。

16 進数は基数 16 のシステムであるため、10 進数のように 0 から 9 までを数えるのではなく、0 から F までカウントします (F は 15 を表します)。

チャネルごとの計算

1 つのチャネルの変換は、結局のところ、赤で 1 回、緑で 1 回、青で 1 回実行するという 1 つの除算の問題になります。

  • 10 進数値を 16 で除算します。
  • 整数の結果は最初の 16 進数になります。
  • 余りは2 番目の 16 進数になります。

値 255 を 16 に分割し、余りを 15 にすると、数字 F と F、つまり FF が得られます。

すべてのチャネルが使用する 0 ～ 255 の範囲は、1999 年に IEC によって IEC 61966-2-1 として標準化され、現在でもタグなし Web カラーのデフォルトの前提となっている sRGB カラー スペースに遡ります。

3 つのペアを組み合わせる

赤、緑、青のそれぞれに 2 桁の 16 進数ペアが設定されると、その 3 つのペアが先頭にハッシュ記号を付けて順番に書き込まれます。

赤 255、緑 87、青 51 は FF、57、33 になり、単一の 16 進値 #FF5733 に結合されます。

いくつかの図を見ると、このシステムの規模がイメージしやすくなります。

  • チャネルごとに 0 ～ 255 の可能な値、合計 256
  • 3 つのチャネルすべてを合わせて 16,777,216 個の固有の色をアドレス指定可能
  • チャンネルごとに 2 桁の 16 進数、標準色の場合は合計 6 桁
  • Base16 の番号付け。各桁は 0 から F まで続きます。

RGBA はどのようにして 8 桁の 16 進コードに変換されますか?

RGBA は、赤、緑、青の上に 4 番目の値、つまり透明度を制御するアルファ チャネルを追加します。

RGBA を 16 進数に変換することは、アルファ値の最後に 4 番目の 16 進数のペアが追加されることを除いて、RGB と同じように機能します。

W3C の CSS カラー モジュール レベル 4 (EN) は、2022 年 7 月にこの 8 桁の表記法を勧告候補として正式化し、すでに出荷を開始しているブラウザに追いつきました。

ブラウザのサポートもそれに続きました。caniuse.com の互換性表 (EN)には、ほとんどのサイトがこの形式を使用し始める数年前に、Chrome 62、Firefox 49、Safari 10、Edge 79 でのサポートがリストされています。

  • #RRGGBB: 6 桁、デフォルトでは完全に不透明
  • #RRGGBBAA: 8 桁、最後のペアは不透明度を 00 (完全に透明) から FF (完全に不透明) に設定します。

最後の位置にある CC のような値は、不透明度約 80% になります。これは、CSS (EN) の 10 進アルファ値から得られる結果と同じです。

すべてのプロジェクトにこれが必要なわけではありません。色の透明度が変わらない場合は、プレーンな 6 桁のコードの方が単純で、入力するのがわずかに短くなります。

逆の方向、つまり 16 進数文字列から個々のチャネル値に戻ることも同様に一般的であり、専用の16 進数から rgb へのコンバータが、手動による除算を行わずにその逆の計算を処理します。

RGB 値と比較した 16 進コードの長所と短所は何ですか?

16 進コードは簡潔さと採用の点で優れており、RGB 値は編集のしやすさで優れており、ほとんどの専門家はタスクに応じて両方を使用することになります。

六角形の利点:

  • スタイルシートに入力して貼り付ける時間が短縮される
  • 3 つのカンマ区切りの数字の代わりに 1 つのトークン
  • カラーコードを他の人と共有するための事実上の標準

六角形の欠点:

  • 一見すると読みにくいですが、FF5733 は明らかに rgb(255, 87, 51) のような「暖かいオレンジ」を意味しません。
  • 単一のチャンネルを編集するということは、文字列全体を手動で再計算することを意味します

HTTP Archive の 2021 Web Almanac (EN) によると、すべての CSS カラー値の75 パーセントが 16 進構文を使用しており、6 桁のコード (50 パーセント) と 3 桁の短縮表記 (25 パーセント) に分かれています。

関数型フォーマットは大きく後れを取っています。 rgba() は 14% で 3 位になりましたが、同じデータセットではプレーン rgb() がゼロに切り捨てられました。

この違いは、形式の技術的な優劣よりも、慣習によるところが大きいものです。16進表記はCSSで最初に使われた色形式で、現在も多くのスタイルガイドやデザインの引き継ぎで標準として使われています。rgba()が選ばれるのは、主に透明度が必要なときです。

RGB および 16 進数は、HSL および CMYK カラー モデルとどのように比較されますか?

RGB と 16 進数は、同じ加法的なスクリーンベースのカラー モデルを表します。 HSL と CMYK は色の表現方法が異なり、どちらも単純な除算では 16 進数に変換されません。

モデル構造ネイティブメディア16 進数変換
RGB赤、緑、青のチャンネルスクリーン直接的な、1 つの式
HSL色相、彩度、明度スクリーン最初にRGBに変換する必要があります
CMYKシアン、マゼンタ、イエロー、キー（黒）印刷する決まった配合はなく、インクプロファイルに依存します

HSL は、彩度と明度が固定されたまま色相スライダをドラッグするとカラー ホイール内で回転するため、おそらく人間にとって推論が容易です。

手動で計算せずに 2 つの加算モデル間を移動するには、RGB から HSL コンバータを使用します。

CMYK は、画面上の光ではなく、紙上のインク用に構築された減法原理に基づいて機能します。そのため、RGB と 16 進数で同一に見える色が、印刷されると変化する可能性があります。

加算と減算の分割については、RGB と CMYK (EN) の比較で詳しく説明します。

Web プロジェクトと印刷プロジェクトの間を行き来するデザイナーは、まさにこの理由から、16 進値と同等の CMYK 値の両方をファイルに保存することがよくあります。

デザイナーと開発者にとって最適な RGB から 16 進数へのコンバーター ツールはどれですか?

適切なツールは、色の変換が 1 回だけ必要か、継続的に必要か、またはより大きなデザイン システムの一部として必要かによって異なります。

ブラウザベースのツール

スタンドアロンの Web ベースのコンバーターは、1 回限りの変換の最速のオプションで、インストールもアカウントも必要なく、値を貼り付けて結果を読み取ります。

  • ビルド中の素早い検索に適しています
  • ソフトウェアのインストールや更新は不要
  • 通常は無料で、ブラウザを備えたあらゆるデバイスで動作します

設計ソフトウェア

いくつかのデザイン ツールは、色が選択されるパネル内で変換を自動的に処理します。

  • Photoshop: RGB スライダーが動いた瞬間に 16 進数を再計算します。
  • Figma と Sketch: 塗りつぶしパネルに両方の形式を並べて表示します。
  • GIMP: のカラー選択ダイアログに同じデュアル ディスプレイが含まれています

色のコントラスト (EN)をテストするアクセシビリティ チェッカーは、ほとんどの場合、入力形式として 16 進数を使用します。これは、WCAG 達成基準 1.4.3 (EN) が最小コントラスト比を設定しているためです。通常のテキストの場合は 4.5 ～ 1。

開発者ツール

Chrome と Firefox の開発ツールでは、任意の要素の計算された色が表示され、ワンクリックで 16 進数、RGB、HSL を切り替えることができます。

自動変換または一括変換の場合、chroma.js などの小さな JavaScript (EN) ライブラリが、UI をまったく必要とせずに、プログラムによって数学を処理します。

このアプローチは、プロジェクトに数百の色がデザイン トークンとして定義されている場合、手動検索よりも拡張性が高くなります。

RGB を 16 進数に手動で段階的に変換するにはどうすればよいですか?

手動変換は、前に示したチャネルごとの分割を 3 回実行し、順番に書き出すことに他なりません。

少なくとも一度は手動で行う価値があります。算術を理解すると、すべての自動化された結果が信頼しやすくなります。

  • ステップ 1: 3 つの RGB 値を書き留めます (例: 46、139、87)。
  • ステップ 2: 最初の値 (赤) を 16 で割り、整数と余りを保持します。
  • ステップ 3: 10 ～ 15 に A ～ F を使用して、整数と余りを 16 進数に変換します。
  • ステップ 4: 緑色、次に青色についてステップ 2 と 3 を繰り返します。
  • ステップ 5: 3 つの 2 桁のペアを先頭にハッシュ記号を付けて並べます。

例を見てみると、46 を 16 で割ると 2 余りが 14 となり、赤は 16 進数 2E になります。

139 を 16 で割ると 8 余り 11 となり、緑は 16 進数 8B になります。 87 を 16 で割ると 5 余り 7 となり、青は 16 進数 57 になります。

まとめると、#2E8B57 となり、一般にシー グリーンと呼ばれる色合いになります。

計算は決して変更されず、計算される数値のみが変わります。だからこそ、紙上で実行されても、スクリプト内で実行されても、同じ式が機能します。

コードを使用してRGBを16進数に変換するにはどうすればよいですか?

JavaScript と Python はどちらも、専用のカラー ライブラリではなく、組み込みの基本変換メソッドを使用して RGB を 16 進数に変換します。

構文は異なりますが、基礎となる計算は前に説明した手動の数式と同じです。

言語コアメソッドゼロ埋め対応
JavaScriptNumber.prototype.toString(16)いいえ、padStart() が必要です
Pythonformat() または hex() 組み込みはい、フォーマット仕様あり

JavaScriptの場合

toString() メソッドは基数引数を受け入れ、16 を渡すと数値の 16 進表現を返します。

キャッチ: toString(16) は先頭のゼロを削除するため、5 は「05」ではなく「5」になり、6 文字の 16 進文字列が分割されます。

  • 各チャネルを .toString(16) で変換します。
  • .padStart(2, "0") を使用して、結果を 2 文字に埋め込みます。
  • 先頭にハッシュ記号を付けて、3 つのパディングされたペアを連結します。

PadStart() は ECMAScript 2017 仕様の一部であり、特にこの種の固定幅文字列フォーマットの問題を解決するために追加されました (ECMA International、2017)。

Pythonで

Python は個別のパディング手順をスキップします。その形式仕様のミニ言語は、幅とゼロ埋めを 1 つの式で処理します。

f"{value:02x}" と記述すると、整数が 1 行で 2 文字のゼロ埋めされた小文字の 16 進数文字列に変換されます。

小文字の 16 進整数の「x」表示タイプは、Python 独自の形式仕様リファレンス (EN)に記載されています。

この式を赤、緑、青でループして結果を結合すると、JavaScript バージョンと同じ 6 文字の出力が生成され、周囲のコードは少なくなります。

RGB から 16 進数への変換中に発生する一般的なエラーは何ですか?

ほとんどの変換エラーは、数学ではなく書式設定に起因します。算術は非常に単純なので、その周りで間違いが発生します。

先頭のゼロがない: 5、10、15 などの 16 未満のチャネル値は、2 桁ではなく 1 桁の 16 進数を生成し、6 文字のコードを 5 つに分解します。

範囲外の入力: コンバータに 255 より大きい値または 0 より小さい値を入力しても、必ずしもエラーがスローされるわけではありません。

CSS カラー モジュール レベル 4 仕様では、範囲外の値は無効として扱われないと規定されています。これらは、計算値の時点で最も近い有効な境界にクランプされます (W3C)。

このクランプはブラウザにとって便利ですが、355 のようなタイプミスがフラグを立てずに黙って 255 になることも意味します。

  • 大文字と小文字の混乱: 16 進数では大文字と小文字が区別されないため、#FF5733 と #ff5733 は同じようにレンダリングされます。大文字と小文字の混合はスタイルの選択であり、バグではありません。
  • 省略表記の誤り: #f0a は #f00a ではなく #ff00aa に展開され、位置を移動するのではなく、各 1 桁が 2 倍になります。
  • コピーアンドペーストのドリフト: RGB トリプレットをコンバーターの間違ったフィールドに貼り付けると、エラー メッセージが表示されずにチャンネルが交換されます。

ソースで 1 つの形式に標準化することで、この問題のほとんどを回避できます。

GOV.UK デザイン システムは、すべての色 (RGB 29、112、184、#1D70B8 などの原色ブルー) について両方の形式を並べて公開していますが、16 進コードを手動で再入力するのではなく、名前付き変数を参照するようにチームに指示しています (GOV.UK デザイン システム)。

この単一ソースのアプローチにより、設計システムでは、小規模なコードベースで手動で入力された 16 進数の値によって引き起こされるドリフトがほとんど見られなくなります。

RGB から 16 進数への変換が適用されないのはどのような場合ですか?

この式は、標準的な8ビットRGBと、それに対応する16進表現に適用できます。ただし、実際の利用場面には、この範囲にまったく当てはまらないケースもあります。

シナリオHex がそれをカバーしない理由代わりに何を使用するか
広色域ディスプレイHex は sRGB 色空間を想定しますP3 または color() 関数を表示します
印刷物制作CMYKは加算ではなく減法ですICC プロファイルを使用した CMYK 値
名前付きシステムカラー「Canvas」のような値には固定の RGB トリプレットがありませんOSレベルのカラーキーワード自体

Apple 自身の開発者向けドキュメントには、Display P3 が 16 進数および標準 RGB が想定する sRGB 色域よりもおよそ約 25% 大きいと記載されています (Apple、WWDC)。

より広い色空間で作成した色を、通常の6桁の16進カラーコードで正確に表すことはできません。16進カラーコードには、色域の情報を格納するチャンネルがないためです。

このギャップは理論上のものではありません。 HTTP Archive の 2021 Web Almanac (EN) によると、モバイル ページで使用されている Display-p3 カラーの79 パーセントが、sRGB、ひいては標準 16 進数で表現できる範囲外にあることがわかりました。 Display-p3 をまったく使用したページは 100 ページ程度だけですが、実際に使用したページでは、16 進法では表現できない色のためにそれを選択しました。

Apple 独自の設計ガイダンスでは、出荷前に P3 と sRGB の両方でブランド カラーを確認することを推奨しています。これは、ある空間では適切に見える 16 進数値が、別の空間ではシフトする可能性があるためです。

印刷は完全に別のケースです。

16 進数コードは RGB にきれいに変換され、またその逆に変換されますが、スクリーンでは光が混合され、印刷機ではインクが混合されるため、中間に ICC プロファイルがなければ、CMYK インクのパーセンテージへの信頼できるパスがありません。

システムカラーと名前付きカラーがリストを締めくくります。 「Canvas」や「ButtonFace」などのキーワードは、オペレーティング システムの現在のテーマが定義するものに解決されるため、そもそも変換するための固定の RGB トリプレットがありません。

よくある質問：RGBからHEXへ変換

ヘックストリプレットとは何ですか?

16 進トリプレットとは、16 進コード内の 6 文字の文字列で、赤、緑、青がそれぞれ 1 つの 2 桁のペアで構成されています。

名前は特定の色ではなく形式を表し、使用されるすべての 16 進値に適用されます。

16進コードはRGBの書き方が違うだけなのでしょうか？

はい。 16 進コードとそれに相当する RGB は同じ色を表し、数値の基数が変わるだけです。

RGB は基数 10 でカウントされ、16 進数は基数 16 でカウントされます。どちらの形式も、もう一方の形式ほど多くの色情報を保持しません。

RGB 値に小数が含まれる場合はどうなりますか?

16 進数では小数点以下のチャネル値を表すことができないため、コンバーターは最初に小数点を最も近い整数に丸めます。

127.6 のような値は 128 に丸められ、その後、丸めに関する警告は表示されずに通常どおり変換されます。

RGB の代わりに HSL を使用する必要があるのはどのような場合ですか?

HSL は、明度や彩度を変更するときに 3 つの個別のチャネル番号を再計算する必要がないため、色が調整されている間はより適切に機能します。

色が確定され、固定値として保存できる状態になると、RGB と 16 進数の適合性が向上します。

Photoshop、Figma、およびブラウザ DevTools は同じ方法で 16 進数を計算しますか?

はい、基礎となる数学はどこでも同じです。これは固定された公式であり、単一のツールによって解釈できるものではありません。

異なる点はカラー プロファイルの処理であり、広色域ファイルと標準ファイルの間で表示結果が変わることがあります。

変換された 16 進数コードが時々間違って見えるのはなぜですか?

16 進値自体が問題になることはほとんどありません。モニターがキャリブレーションされていない場合、またはカラー プロファイルが欠落している場合、同じコードが 2 つの画面で異なって表示される可能性があります。

変換にエラーがあったと考える前にディスプレイの調整を確認してください。

すべての RGB 値を有効な 16 進コードに変換できますか?

チャネルごとの標準の 0 ～ 255 の範囲内の RGB トリプレットは、例外なく有効な 16 進コードに変換されます。

この数式にはその範囲内に特殊なケースはなく、毎回 1 つの正しい 6 桁の結果が生成されます。

RGB から HEX へのコンバーターの出力に 2 回目のチェックが必要になるのはどのような場合ですか?

RGB から HEX へのコンバーターの出力は、広色域のソース カラー、印刷に拘束されたプロジェクト、およびキャリブレーションされていない画面から直接取得した値の 3 つの状況で 2 回目のチェックが必要です。

これら 3 つを除けば、6 桁の結果が最終的なものとなるため、それ以上の検証は必要ありません。

  • sRGB内のソースカラー
  • 目的地はプレスではなくスクリーンです
  • スクリーンキャリブレーションを確認しました

CSS では広色域カラーはまだまれですが、6 桁の 16 進コードに強制的に組み込むと最もシフトする可能性が高いカラーであるため、最初に P3 ソース カラーをチェックする価値があります。

16 進数を標準化することでチャンネルごとの編集可能性を犠牲にして、より短くポータブルなコードを実現し、色が確定した後の公平な交換となります。

画面ではなく印刷に向かう値の場合、RGB から CMYK へのコンバータは、sRGB 計算が行うように構築されていない変換を処理します。

関連する変換ツール