CSS HEX8桁カラーコード(※透明度設定あり)をRGBAに変換する

#RRGGBBaaのHEX8桁カラーコードで透明度を与えると、まだ対応していないブラウザがあるので、その場合真っ白に表示されたりしてしまいます。しかし、rgba(rrr,ggg,bbb,a)の10進法に戻す計算方法がよくわからない・・・海外にかっこいい計算サイトがありましたので紹介します。

194
views

HEX8桁のカラーコードに対応していないブラウザがまだある(2018年3月)

分はCSSを修正するとき、お手軽なのでFirefoxの開発ツールを使っています。その中で色合いや色の透明度を変える時、開発ツールのカラーパレットを使うのですが、透明度を与えるとHEX(16進数)8桁のカラーコードが入力されます。

これについて、特に何も考えることなくそのままにしていたのですが・・・昨日初めて、Windows10のedge等がHEX8桁に対応していないことに気がつきました(爆)

↑firefoxの開発ツールカラーパレット・・とっても便利なのですが、思わぬ落とし穴がありました

調べると、edgeは透明度そのものに対応していないわけではなく、どうやら10進法のカラーコード(=rgba(rrr,ggg,bbb,a))には対応しているようです。なので、単に書き換えすればよいのですが、変換しようにも計算方法がよくわからない。

カラーコードを変換してくれるサイトをネットで検索しても、日本語サイトはHEX6桁にしか対応していないところばかりでした・・・さて、困りました。

海外にありました。

方ないので、英語のサイトをいろいろ探して続けたところ、わかりやすいサイトを見つけることができましたので、こちらで紹介したいと思います。つくってくださった Terry Mun様に感謝です・・

8-digit HEX converter ⇒

使い方はとても簡単です。FORMATのプルダウンメニューで「RGBa」を選択し、HEXの入力欄に8桁のHEXカラーコードを入力し、「Convert」をクリックするだけです。

あっと言う間に変換されました。そして、やたらクールでかっこいい。

これで安心して透明度を与えられますね。よかったです。

同じように困った方の助けになれば幸いです・・・(こんなミスをするのは私だけか(笑))

8-digit HEX converterはこちら ⇒
前の記事雪が減ってきた八ヶ岳山頂
次の記事たぬき。
シェア