RGBからHexへの変換——このページが提供するもの
このページは、赤（Red）、緑（Green）、青（Blue）の各値を0から255の範囲で入力すると、対応する16進カラーコードを即座に表示します。例えば、R=79、G=70、B=229と入力すると、出力は#4F46E5です。さらに、その色を実際に表示するスウォッチと、HSL、HSV、CMYK、LAB、およびカラーピッカーといった他の全カラーフォーマットを同時に更新します。変換ボタンはなく、いずれかのフィールドを編集するだけで他のすべてが同期します。
このページの特長は、RGB（10進数、3チャンネル0-255）から16進数（6桁または3桁の短縮形）への変換に特化している点です。両フォーマットは同一のsRGB色空間を表すため、変換は完全に可逆的で、近似や色域のクリッピングは発生しません。出力される16進コードは常に#で始まり、6桁の形式（例：#1E90FF）をとります。アルファチャンネルは付きません。入力には3つの数値をコンマまたはスペースで区切って指定します（例：79, 70, 229）。
入力のルールと正しい形式
RGB値の入力は、0から255の範囲に収まる3つの10進数でなければなりません。区切りにはコンマまたはスペースを使用します。以下に有効な入力例と無効な例を示します。
- 有効:
79, 70, 229、255 255 255、0,0,0 - 無効:
79 70 229（スペース区切りは許容されますが、コンマとスペースの混在は避けるべきです）——実際にはスペースのみでも動作しますが、ファクトシートではコンマまたはスペースと明記されています。より正確には「コンマまたはスペース」が正しい形式です。混在（例：79, 70 229）は推奨されません。
範囲外の数値（例：300, 0, 0）や不正な形式（例：79, 70のように数値が足りない場合）を入力すると、ツールはエラーメッセージを表示します：「Enter RGB as three numbers 0–255, like 79, 70, 229.」
16進数の入力フィールドでは、3桁の短縮形（例：#abc）も受け付けます。この場合、ツールは内部で6桁に展開します（#abc→#AABBCC）。ただし、RGBからの出力では自動的に3桁に縮約されることはなく、常に6桁で表示されます。
変換の数学：10進数から16進数への計算方法
各RGBチャンネル（0-255）から2桁の16進数を得るには、次の手順を踏みます。例としてR=79を使います。
- 79を16で割ります。商は4、余りは15です（79 ÷ 16 = 4 余り 15）。
- 商を16進数の1桁目に、余りを2桁目にします。この例では、商4は16進数で
4、余り15はFです。 - よって、79の16進数表現は
4Fです。
同様に、G=70の場合：70 ÷ 16 = 4 余り6 → 46。B=229の場合：229 ÷ 16 = 14 余り5 → E5。これらを連結して#4F46E5が得られます。
極端な例：
- 255 ÷ 16 = 15 余り15 →
FF - 0 ÷ 16 = 0 余り0 →
00 - 128 ÷ 16 = 8 余り0 →
80
このように、各チャンネルは常に2桁の16進数で表現されるため、出力は6桁になります。この変換は可逆的で、16進数から10進数への逆変換も同様に正確です（例：FF→15×16+15=255）。
同時更新と他のカラーフォーマット
このツールは、RGB入力フィールドの編集に応じて、すべてのカラーフォーマットをリアルタイムで更新します。更新されるフォーマットは以下のとおりです。
| フォーマット | 例（#4F46E5の場合） |
|---|---|
| HSL | hsl(244, 77%, 59%) |
| HSV | hsv(244, 69%, 90%) |
| CMYK | cmyk(66%, 69%, 0%, 10%) |
| LAB | lab(34, 46, -66) |
| カラーピッカー | 視覚的な選択が可能 |
16進数フィールドを直接編集した場合も、他のすべてのフォーマットが更新されます。また、カラースウォッチが常に現在の色を表示するため、視覚的な確認も容易です。
実践的な使用とよくある間違い
フロントエンド開発者やデザイナーにとって、このツールはCSSで直接使える16進数コードを手早く取得するのに役立ちます。例えば、RGB値79, 70, 229をCSSで使うには、color: #4F46E5;やbackground-color: #4F46E5;と記述します。
よくある間違いとして、以下の点に注意が必要です。
- 範囲外の値: 300や-1などの値は無効です。必ず0-255の範囲で入力します。
- 区切りの誤り: スペースとコンマの混在は避けます。一貫した区切りを使ってください。
- アルファチャンネルの誤解: このツールの16進出力にはアルファチャンネル（透明度）は含まれません。アルファ付きの8桁16進数（例：
#4F46E580）が必要な場合は、別途処理が必要です。 - 3桁短縮形の自動出力: 出力は常に6桁です。
#abcのような短縮形が必要な場合は、手動で変換するか、別のツールを利用してください。
このツールはすべてブラウザ内で動作するため、入力したデータが外部に送信されることはありません。プライバシーに関わる色情報を扱う場合でも安心して使用できます。
FAQ
Q: 入力が無効な場合、どのようなエラーメッセージが表示されますか？ A: 「Enter RGB as three numbers 0–255, like 79, 70, 229.」と表示されます。
Q: 3桁の短縮形（例：#ABC）を16進数入力フィールドに入力できますか？ A: はい、可能です。ツールは内部で6桁に展開します（#AABBCC）。ただし、RGBからの出力では常に6桁が表示されます。
Q: 変換は完全に可逆ですか？ A: はい、sRGB色空間内では完全に可逆です。RGBからHexへの変換も、HexからRGBへの逆変換も、情報の損失なく行えます。
Q: アルファチャンネル（透明度）はサポートされていますか？ A: このツールの標準的な出力ではアルファチャンネルは含まれません。8桁の16進数（例：#RRGGBBAA）は現時点では出力されませんが、カラーピッカーなど他の入力経路で設定可能な場合があります。
Q: なぜ16進出力は常に6桁なのですか？ A: 各RGBチャンネル（0-255）が2桁の16進数で表現されるため、3チャンネルで合計6桁になります。3桁の短縮形は特定の状況で使われるものの、このツールでは情報の完全性を保つため6桁で出力します。
Q: このツールはどのような色空間を使用していますか？ A: sRGB色空間を使用しています。これはほとんどのディスプレイで標準的に使われる色空間で、RGBとHexの変換はこの空間内で正確に行われます。