HEX から RGB 色

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

#RGB または #RRGGBB の色コードを、赤・緑・青の三つの RGB チャンネル値に変換します。デザイントークンや CSS の規則に 16 進数の色コードがあり、画像編集ツールなどで各チャンネルの整数値が必要な場合に使います。先頭の # は表記上の記号で、数値そのものには含まれません。3 桁の省略形は変換前に各桁を複製するため、#ABC は #AABBCC を意味し、小さい三つのチャンネル値を意味しません。

十六進数の二桁ずつが、0 から 255 の赤・緑・青いずれか一つのチャンネル値になります。短縮形では各桁を二回繰り返します。#2A7FDC の場合、2A、7F、DC の組は十進数でそれぞれ 42、127、220 です。入力できるのは三桁または六桁の十六進カラーだけで、アルファ値を含む四桁や八桁の形式は意図的に拒否します。結果は CSS に使える rgb() 表記で、個々の色チャンネルも読み取れます。

色モデルの理解

HEX の色見本を三つのチャンネル欄へ移すときは、二桁ずつ赤、緑、青の順に読み、先頭のゼロも残してください。結果にアルファチャンネルはありません。このツールが扱うのは整数 RGB と一般的な HSL であり、カラーマネジメントのプロファイルではありません。HEX と RGB は、光の三つの加法混色チャンネルを別の形で表します。各チャンネルの整数値は 0～255 で、16 進数では二桁で書きます。したがって六桁のコードは赤、緑、青の二桁ずつをこの順に並べます。HSL は RGB 色を表す別の方法です。色相は色相環上の位置、彩度は同じ明度の灰色からの距離、明度は黒から白までの位置を表します。これらはデザイントークンの比較、CSS の読解、コードの意味を推測せずに配色を調整する際に役立ちます。

正しい表現を選ぶ

#0010FF の最初の 00 は赤のチャンネルがゼロであることを示します。この二桁を落とすと、後続のチャンネルの境界も変わってしまいます。結果は CSS の rgb() 宣言へ入力できますが、この変換だけでは個々のディスプレイのカラープロファイルによる見え方は分かりません。元のデザイントークンに透明度が含まれる場合は、三つの色チャンネルとは別に記録してください。スクリーンショットや仕様書から色コードを写した後は、元の色見本と RGB で表示した色を見比べると誤記を発見しやすくなります。

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