apple-touch-icon で透過を再現する

apple-touch-icon の擬似透過に使える、mobile Safari の背景の色コード。

Symfony.com みたいな、丸い apple-touch-icon とかたまにあるじゃないですか。
あと、角丸の四角アイコンを作るときとか。
Apple 自体もアイコン背景を灰色っぽく合わせて擬似透過してますね。

あれをそのまま透過 PNG でやろうとすると、透過の部分が黒く表示されてしまいます。なんでやねん。
よりにもよって黒なので、これが非常に悪目立ちします。
透過が使えないのはそういう仕様だからと百歩譲るにしても、なぜ白じゃないんだ。

mobile Safari の背景色に合わせて作ると、透過っぽくできます。
色コードはこちら。

16進数
F2F2F2
RGB
rgb(242, 242, 242)
HSL
hsl(0, 0%, 95%)
※ 実際は 94.9019607843137 と続くみたいですが、繰り上げしています。

2014年10月5日、iOS7 の時点のデータです。8 も多分変わってないかと。

3ヶ月くらい前にツイートしたことですが、今更ながら記事にしました。
調べたけど意外と記事が見つからず、結局自分でスクショ撮ってスポイト当てたのでメモ。