RGB から HEX 色

RGB チャンネルを HEX カラーへ変換

3つの整数の RGB チャンネル値を、6桁の16進数で表す Web カラーに変換します。検査ツール、描画アプリ、色の計算結果から赤・緑・青の値を得たものの、スタイルシートには短い16進カラーコードが必要な場合に使います。rgb(42, 127, 220)、または3つの整数値をカンマで区切って入力できます。パーセント、端数のあるチャンネル値、4番目のアルファ値には対応しません。

赤、緑、青の各チャンネルを RRGGBB の順に、それぞれ二桁の十六進数で表します。十進数の 42 は十六進数の 2A、127 は 7F、220 は DC なので、結果は #2A7FDC です。各チャンネルには必ず二桁を使い、十六未満の値には先頭に零を付けます。十六進数の英字が大文字でも小文字でも色は同じですが、このツールは表記を統一するため大文字で出力します。

色モデルの理解

出力は # の後に三つの二桁のチャンネル値を続けたものと考えてください。結果にアルファチャンネルはありません。このツールが扱うのは整数 RGB と一般的な HSL であり、カラーマネジメントのプロファイルではありません。結果を貼り付ける場所で求められる形式を選びます。CSS は HEX と rgb()、hsl() の構文に対応していますが、デザインシステムや画像ソフトはチャンネル値を別々に保存することがあります。このツールは通常の sRGB の計算を使い、ディスプレーのプロファイル間の変換や、あらゆるモニターでの見え方の予測はしません。三チャンネル HEX にも、ここでの RGB や HSL の結果にも透明度は含まれません。四桁または八桁のアルファ付きコードには別の操作が必要です。整数の RGB 値や表示される HSL の小数値は丸められることがあるため、往復変換で一つのチャンネル値が 1 ずれる場合があります。

正しい表現を選ぶ

たとえば赤 0、緑 16、青 255 の組は #0010FF になります。先頭の 00 も必要で、これを省くと三つのチャンネルの区切りが分からなくなります。入力欄は整数を求めるため、百分率を見た目で推測して入れず、先に数値へ換算してください。HEX の結果を逆方向のツールで RGB に戻せば、元の三つの値と照合できます。ただし、この往復確認で分かるのは計算の一致であり、モニターの校正や背景とのアクセシビリティ上のコントラストではありません。透明度が必要なら別の値として保持します。

確認例として、rgb(42, 127, 220) を入力すると #2A7FDC が得られます。別のアプリと照合するときは、元の入力も結果と並べて残してください。次に、表示結果を逆方向の色変換ツールに入力し、元の入力と比べてください。HEX と整数の RGB は正確に往復変換できますが、HSL のパーセント値を経由すると RGB チャンネルが 1 だけ丸められる場合があります。この違いが重要なら元の入力値も保存してください。