RGBAからRGBへの変換ツール(背景色合成)
半透明の前景色(RGBA)と背景色を指定すると、アルファブレンディングにより両者を合成した不透明なRGB色を計算します。rgba()未対応の環境向けのフォールバック色作成に。
アルファブレンディングの計算式
RGBAを不透明なRGBに変換する処理は「アルファブレンディング(over演算子)」と呼ばれ、R・G・Bの各チャンネルに対して以下の式を独立に適用し、最後に小数点以下を四捨五入します。
| 計算式 | result = foreground × alpha + background × (1 − alpha) |
|---|
使い方のヒント
- メールのHTMLテンプレートや古いブラウザ(IE等)は`rgba()`や`opacity`をサポートしないことがあるため、このツールで計算した不透明なRGB値を`background-color`のフォールバックとして併記すると安全です。
- 前景色・背景色はどちらもカラーピッカーとHEXコードの直接入力の両方に対応しています。デザインツールで確認した正確な色をそのまま貼り付けて使えます。
- 不透明度(アルファ値)は0〜100%のスライダーで調整できます。0%は完全に透明(=背景色そのもの)、100%は完全に不透明(=前景色そのもの)になります。
- 背景色に白・黒のプリセットボタンを用意しているのは、この2色が実務で最も比較されやすい代表例(ライトモード/ダークモードの背景)だからです。実際のページ背景色に近い色をカスタム入力すると、より正確なフォールバック色が得られます。
よくある質問
余談ですが ― アルファブレンディングという技術の起源
アルファブレンディング(alpha compositing)の概念は、1984年にThomas PorterとTom Duffがコンピューターグラフィックス分野で発表した論文「Compositing Digital Images」に由来するとされています。それまでは背景と前景を合成する際に色情報だけを扱うのが一般的でしたが、この論文で「不透明度」を表す第4のチャンネル(アルファチャンネル)を色情報と組み合わせて扱う手法が体系化され、その後のCG・画像編集ソフトウェアの標準的な考え方になりました。
今日ではPNGやSVGなどの画像フォーマット、CSSの`rgba()`/`opacity`、多くのペイントソフトのレイヤー機能まで、透明度を扱うほぼすべての技術がこのアルファブレンディングの考え方を基盤にしています。「over演算子」と呼ばれる最も基本的な合成方法(前景を背景の上に重ねる)が、このツールで採用している計算式そのものです。
一方で古いメールクライアントやレガシーブラウザとの互換性の問題は今も完全には解消されていません。特にHTMLメールはレンダリングエンジンの制約が大きく、CSSのモダンな透過表現がそのまま使えないケースが多いため、あらかじめ不透明色に変換したフォールバック値を用意しておく実務上のテクニックが今でも広く使われています。