RGBをHEXに変換
RGB→HEX変換は、10進の3チャンネルをHEXの色に変換します。各チャンネルを16で割り、商が最初のHEX桁、余りが2番目の桁になります。136は88になり、255はffになります。アルファ値は4つ目のペアとして追加され、256段階の中で最も近い値に丸められます。往復変換で厳密に一致しないのは、ここだけです。
左側に色を入力してください。# の有無を問わない16進数の値、 rgb(), hsl(), oklch() および CSS の色名に対応しています。
RGBをHEXに変換はどう動きますか？
各チャンネルは0〜255の整数で、16進2桁がちょうどその範囲を表します。16で割ると、商が最初の桁、余りが2番目の桁です。136÷16は商8余り8なので88。255÷16は商15余り15、15はfなのでffになります。
1桁になるチャンネルには先頭の0が必要です
16未満のチャンネルは1桁になり、この0を落とすと、後ろの桁がすべてずれます。rgb(255 8 0)は#ff0800であって#ff800ではありません。後者は5桁で、そもそも色として成立しません。自作コンバータの古典的なバグであり、暗い色でしか現れません。つまり、誰も見ていない場所で発生するのです。
整数でないチャンネルの扱い
CSSではrgb(255.6 136 0)のような値が許されますが、HEXでは小数を表せません。値は最も近い整数に丸められます。ブラウザも同じことをします。チャンネルが計算の結果——明るくした色や補間の途中値——である場合、返ってくるHEXは丸められた値であり、それを再度変換しても、最初の小数には戻りません。
アルファ値と、唯一の損失を伴う処理
0.5のアルファ値は80になります。0.5×255は127.5で、128に丸められるからです。これを戻すと0.502になります。色のチャンネルはすべて厳密に往復できます。アルファ値だけはできません。分数の値を256段階に格納するためです。差は目に見えるどの閾値よりもはるかに小さい一方、テストで2つの文字列を比較した瞬間には現れます。
パーセント指定
rgb(100% 53.3% 0%)はrgb(255 136 0)と同じ色です。rgb()内のパーセントは100ではなく255を基準に解決されます。これが落とし穴になるのは、0〜100の値を出力するデザインツールから変換する場合です。その世界では、53%は135を意味し、53ではありません。
RGBチャンネル
rgb(255 136 0)
HEXカラーコード
#ff8800 255 → ff (15 × 16 + 15) 136 → 88 (8 × 16 + 8) 0 → 00 (0 × 16 + 0)
RGBをHEXに変換が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| 0 | チャネル | 00 | 最小値です。2桁とも0です。 |
| 8 | チャネル | 08 | 16未満のため、先頭の0が必要です。これを省くと値全体が壊れます。 |
| 128 | チャネル | 80 | 中間値で、正確に8 × 16です。 |
| 136 | チャネル | 88 | 8 × 16 + 8です。 |
| 255 | チャネル | ff | 最大値で、15 × 16 + 15です。 |
| アルファ0.5 | 分数 | 80 | 127.5は四捨五入して128になります。逆変換すると0.502です。この変換の過程で唯一、正確でないステップです。 |
| 255.6 | 非整数 | ff | ブラウザでの丸めと同じように丸められます。小数のチャネルはhexでは成り立ちません。 |
| 100% | パーセント | 255 | パーセントは255を基準に換算されます。53%は135であって、53ではありません。 |
よくある質問
RGBからHEXへ手動で変換するにはどうすればよいですか？
各チャンネルを16で割ります。商が最初の桁、余りが2番目の桁で、10〜15はa〜fと書きます。136÷16は商8余り8なので88。3つのペアを赤、緑、青の順に並べ、先頭に#を付けます。唯一の罠は16未満のチャンネルです。それでも2桁にしなければならず、8は8ではなく08と書きます。
HEXの色が5桁になるのはなぜですか？
16未満のチャンネルで、先頭の0が落ちたためです。rgb(255 8 0)は#ff0800です。#ff800と書くと5文字になり、有効なHEXの色ではなく、ブラウザは宣言全体を無視します。手書きの変換コードで最もよくあるバグであり、暗い色でしか現れません。
RGBからHEXへの変換で、色の情報は失われますか？
色そのものについては失われません。どちらの表記も同じ3バイトを保持するため、往復は厳密です。例外はアルファ値です。CSSでは分数ですが、HEXでは256段階に格納されるため、0.5は80になり、戻すと0.502になります。画面では見えず、文字列の比較では見えます。
rgb(100% 50% 0%)は何に変換されますか？
#ff8000です。rgb()内のパーセントは100ではなく255に対する割合で、50%は127.5となり、128——つまりHEXの80——に丸められます。デザインツールがこれらの数値を0〜100の値として出力している場合、意味が異なります。貼り付ける前に、その不一致を確認する価値があります。
rgba()と8桁のHEX、どちらを書くべきですか？
どちらでも構いません。現行の環境ならどこでも、両方サポートされています。8桁のHEXはより簡潔で、色全体を1つのトークンに収められるため、デザイントークンや変数に向いています。rgba()は読みやすく手で編集しやすく、既存のスタイルシートの大半が使っている形式でもあります。唯一の実質的な基準は、周囲のコードとの一貫性です。
デザイナーのHEXが、画面のカラーピッカーが表示するRGBと一致しないのはなぜですか？
カラーマネジメントのためです。画面上のカラーピッカーは、ディスプレイプロファイルが適用された後のピクセルをサンプリングします。そのため、ワイドガモットのモニターでは、同じsRGBの元の色に対して異なる数値が報告されます。スクリーンショットからではなくデザインファイルからサンプリングするか、ピッカーをsRGBに設定すれば、2つは再び一致します。